SD2DNode

专为 2D 的节点打造。继承自 sd.SDNode。这是一个抽象类，不应该被实例化。

API 列表

type XLocator = "x" | "cx" | "mx";
type YLocator = "y" | "cy" | "my";

class SD2DNode extends SDNode {
    constructor(target: SDNode | RenderNode);

    // 透明度
    opacity(): number;
    opacity(opacity: number): this;

    // 位置管理
    inRange(point: [number, number]): boolean;
    x(): number;
    x(x: number): this;
    y(): number;
    y(y: number): this;
    width(): number;
    width(width: number): this;
    height(): number;
    height(height: number): this;
    scale(scale: number): this;
    pos(xLocator: XLocator, yLocator: YLocator, dx?: number, dy?: number): [number, number];
    center(): [number, number];
    center(center: [number, number]): this;
    center(cx: number, cy: number): this;
    kx(k: number): number;
    ky(k: number): number;
    dx(dx: number): this;
    dy(dy: number): this;
    cx(): number;
    cx(cx: number): this;
    cy(): number;
    cy(cy: number): this;
    mx(): number;
    mx(mx: number): this;
    my(): number;
    my(my: number): this;
}

位置管理

对于一个 2D 图形，我们定义：

其左上角坐标为 $(x,y)$。
中心坐标为 $(cx,cy)$，这里的 $c$ 是 center 的意思。
右下角为 $(mx,my)$，这里的 $m$ 是 maximum 的意思。
在 x 方向上的长度为宽度，即 $width$。
在 y 方向上的长度为高度，即 $height$。

不妨来看一些例子。

const svg = sd.svg();
const rect = new sd.Rect(svg).width(500).height(60);
console.log(rect.width()); // 500
console.log(rect.height()); // 60

const svg = sd.svg();
const circle = new sd.Circle(svg).width(250);
console.log(circle.width()); // 250
console.log(circle.height()); // 250

那么位置管理相关的大部分方法作用就一目了然了，无非就是在对这几种坐标的进行获取或者赋值。

const svg = sd.svg();
const C = sd.color();
const rect = new sd.Rect(svg);
sd.main(async () => {
    await sd.pause();
    rect.startAnimate().x(100).endAnimate(); // 将 rect 的 x 坐标设置为 100
    await sd.pause();
    rect.startAnimate().dx(100).endAnimate(); // 将 rect 的 x 坐标增大 100
    await sd.pause();
    rect.startAnimate().scale(2).endAnimate(); // 将 rect 扩大至原来的两倍
    await sd.pause();
    appear(new sd.Circle(svg).r(3).color(C.red).center(rect.x(), rect.y())); // 在 rect 的 (x, y) 处新建一个红点
    await sd.pause();
    appear(new sd.Circle(svg).r(3).color(C.blue).center(rect.center())); // 在 rect 的中心处新建一个蓝点
    await sd.pause();
    appear(new sd.Circle(svg).r(3).color(C.green).center(rect.pos("mx", "cy"))); // 在 rect 的 (mx, y) 处新建一个绿点
    await sd.pause();
    appear(new sd.Circle(svg).r(3).color(C.orange).center(rect.pos("x", "y", 10, 10))); // 在 rect 的 (x + 10, y + 10) 处新建一个橙点
    await sd.pause();
    appear(new sd.Circle(svg).r(3).color(C.black).center(rect.kx(0.75), rect.ky(0.25))); // 新建一个黑点，黑点的 x 坐标在 rect 的 x 方向上 3/4 的处，黑点的 y 坐标在 rect 的 y 方向上 1/4 处
});
function appear(object) {
    object.opacity(0).startAnimate().opacity(1).endAnimate();
}