CreateJS示例中circle.x、circle.y的作用及坐标设置疑问

关于drawCircle参数与circle.x、circle.y的作用 #

• 核心逻辑是CreateJS将形状绘制和形状定位做了完全的解耦，对应两套独立的坐标体系：
  • graphics的绘制参数属于Shape实例的本地坐标体系：drawCircle(0, 0, 50)的含义，是在Shape自身的本地坐标系原点位置，绘制一个半径50的实心红圆，圆心与Shape本地坐标系的原点完全重合。
  • circle.x、circle.y是Shape作为显示对象，在父容器（如Stage）全局坐标系下的位置偏移量：它不改变Shape内部绘制的图形本身，只是决定整个Shape被放置到父容器的哪个位置显示。
• 这种设计的实际价值是降低交互、动画的实现成本：
  • 如果将绘制点放在Shape本地原点，后续给圆形做旋转、缩放、拖拽交互时，不需要额外修正图形的中心偏移，直接操作Shape的x/y、rotation、scaleX/scaleY属性，就能得到符合直觉的效果。
  • 举个直观的对比例子：如果把绘制逻辑改成circle.graphics.beginFill("red").drawCircle(100, 100, 50)，同时设置circle.x=0、circle.y=0，最终在画布上显示的圆位置和原示例完全一致，但此时如果给圆形加一个circle.rotation = 30的旋转动画，圆会绕着Shape的本地原点（也就是全局画布的(0,0)位置）旋转，而不是绕着自己的圆心旋转，这也是官方示例要把绘制点放在Shape本地原点的核心原因。

未加入显示列表时读取circle.x返回undefined的原因 #

• CreateJS的DisplayObject基类定义了x、y属性的默认值为0，但这类属性的赋值规则是懒初始化：
  • 当你仅创建Shape实例、配置了内部graphics内容时，这个实例还没有被加入显示列表，也没有触发任何渲染、属性校验流程，实例自身的属性表上并没有实际挂载x、y这两个键，默认值仅存在于DisplayObject的原型链上。
  • 此时直接读取circle.x，访问到的是实例自身不存在的属性，自然返回undefined，并不是说属性没有默认值。
• 可以做个简单验证：哪怕不把circle加入Stage，只要手动给Shape设置任意一个触发属性校验的参数（比如circle.visible = true），之后再读取circle.x，就会返回补全后的默认值0。

内容的提问来源于stack exchange，提问作者rickster26ter1