как переместить объект Shape line - PullRequest
Новая
       39

как переместить объект Shape line

0 голосов
/ 08 ноября 2019

Используя 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();

1 Ответ

0 голосов
/ 08 ноября 2019

Я думаю, что проблема здесь может заключаться в том, что вы путаете графические координаты с положением линии.

Линия, которую вы делаете, находится в [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

Надеюсь, это поможет!

...