如何移动线形对象

Posted 2021-04-28

使用EaselJS 1.0，我想移动一行。我可以通过递增和递减来设置x和y，而不是通过直接将x和y设置为数字来使它起作用。 IOW-line.x ++;有效，但是line.x = 300;不起作用。这里的代码编辑器似乎很古怪，因此，如果我无法插入代码，请参见此处在线运行的两个版本：

http://www.clarksoncs.com/Gettysburg/testMovingLineAlt.html

http://www.clarksoncs.com/Gettysburg/testMovingLine.html

在初始化函数中：

createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", handleTick);
stage = new createjs.Stage("canvasOne");

line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(300, 400);
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
stage.addChild(line);

stage.update();

在滴答事件中：

//Run these two lines: Expected = line moves right and up. Actual = line moves right and up AND GETS LONGER.
line.x++;
line.y--;

/*
Run these two lines: Expected = line appears centered at 600,600. Actual = line is not visible. Check debugger, x and y are set to 600.
line.x = 600; 
line.y = 600;
*/

stage.update();

答案

我认为这里的问题可能是您将图形坐标与线条的位置混淆了。

您正在制作的行位于[0,0]。其注册点尚未移动。然后，您将从[300,400]的内部坐标绘制线到startX和startY所在的位置。由于内部图形坐标，行位置不会更改。

我的猜测是，当您将线设置为x=600时，它不可见，因为您的图形现在处于舞台下。线条位置将为600，但线条图形将从其顶部的300开始。

这里是一个小提琴https://jsfiddle.net/b01tsw42/1/

var line = new createjs.Shape();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke("#ff0000");
line.graphics.moveTo(0, 0);
line.graphics.lineTo(300, 400);
line.graphics.endStroke();
stage.addChild(line);

stage.x = 300; // sets the graphic container to x=300

我希望有帮助！