createjs - createjs 示例中 circle.x 和 circle.y 的目的是什么？

Question

我试图了解为什么 createjs 在其示例中使用此代码：

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

为什么在绘制圆（0,0,50）时坐标中有（0,0），但它们给出了circle.x和circle.y值？

如果我在画布上执行前两行并运行 circle.x，它们是未定义的。为什么，我以为它设置为 0,0？

标签： createjs

Answer 1

CreateJS 提供了一种将图形和符号视为实例的简单方法，然后在创建它们后移动它们。

1. 绘图坐标是形状的尺寸，以及它们如何偏移。这决定了物体旋转时的行为方式。

2. x 和 y 参数让您可以控制对象在父容器中的定位。所以你可以在画布的任何地方移动圆圈，但它的“中心”仍然是 [0,0]。

将这些分开是一种非常常见的方法，让您可以将形状的尺寸与其在屏幕上绘制的位置分开考虑。当您开始将形状嵌套在其他容器中的容器中时，尤其如此。

另一个例子是两个 Shapes 可以共享相同的图形实例，但可以在舞台上单独移动。它们具有相同的绘图说明，但可以分别缩放、平移、旋转和倾斜。