EaselJS shape x,y 属性混淆
EaselJS shape x,y properties confusion
我用下面的代码生成了一个 4x4 的正方形网格。他们都在 canvas 和 stage.update() 上绘制正确的位置、行和列。但是检查时所有 16 个的 x,y 坐标都是 0,0。为什么？每个形状都有自己的 x,y 坐标系吗？如果是这样，如果我得到一个形状的句柄，我如何确定它最初被绘制到 canvas?
的位置
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);
}
}
您是在所需坐标处绘制图形，而不是在 0,0 处绘制图形，然后使用 x/y 坐标移动它们。如果你不自己设置x/y，它将是0。EaselJS不会根据图形内容（more info）推断x/y或width/height。
这是更新后的 fiddle，其中图形全部绘制在 [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;
我用下面的代码生成了一个 4x4 的正方形网格。他们都在 canvas 和 stage.update() 上绘制正确的位置、行和列。但是检查时所有 16 个的 x,y 坐标都是 0,0。为什么？每个形状都有自己的 x,y 坐标系吗？如果是这样，如果我得到一个形状的句柄，我如何确定它最初被绘制到 canvas?
的位置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);
}
}
您是在所需坐标处绘制图形，而不是在 0,0 处绘制图形，然后使用 x/y 坐标移动它们。如果你不自己设置x/y，它将是0。EaselJS不会根据图形内容（more info）推断x/y或width/height。
这是更新后的 fiddle，其中图形全部绘制在 [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;