EaselJS形状x，y属性混乱

Question

我用下面的代码生成一个4x4的正方形网格。它们都在stage.update（）上的画布上绘制正确的位置，行和列。但是在检查时所有16个坐标的x，y坐标都是0,0。为什么？每个形状都有自己的x，y坐标系吗？如果是这样，如果我得到一个形状的句柄，我该如何确定它最初绘制在画布上的位置？

EaselJS文档没有提及该主题;-)。也许你必须知道Flash。

var stage = new createjs.Stage("demoCanvas");
    for (i = 0; i < 4; i++) {
        for (j = 0; j < 4; j++) {
            var square = new createjs.Shape();                                            
            square.graphics.drawRect(i*100, j*100, 100, 100);
            console.log("Created square + square.x + "," + square.y);
            stage.addChild(square);
        }
    }

Answer 1

您正在绘制所需坐标的图形，而不是在0,0处绘制它们，并使用x / y坐标移动它们。如果您没有自己设置x / y，它将为0. EaselJS不会根据图形内容（more info）推断x / y或宽度/高度。

这是一个更新的小提琴，其中图形全部在[0,0]处绘制，然后使用x / y定位：http://jsfiddle.net/0o63ty96/

相关代码：

square.graphics.beginStroke("red").drawRect(0,0,100,100);
square.x = i * 100;
square.y = j * 100;