Createjs. Линия следует за элементом скрипки

Я создал этот jsfiddle.

Линия, соединяющая два элемента, и я хочу, чтобы линия оставалась подключенной к обоим элементам независимо от того, куда они идут.

Я вроде как преуспел, но с одной довольно очевидной ошибкой. Он продолжает рисовать новые линии вместо того, чтобы перерисовывать существующую линию. Пожалуйста, помогите мне, как заставить его обновить позицию линии.

var stage = new createjs.Stage("canvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
var arrDots = [];
var arrLines = [];

var circle1 = new createjs.Shape().set({
  x: stage.canvas.width/2,
  y: 50,
  cursor: "pointer",
  name:"target"
});
circle1.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
  .dc(0,0,20);
stage.addChild(circle1);
arrDots.push(circle1);

var circle2 = new createjs.Shape().set({
  x: stage.canvas.width/2,
  y: stage.canvas.height - 50,
  cursor: "pointer",
  name:"target"
});
circle2.graphics.f(createjs.Graphics.getRGB(Math.random()*0xFFFFFF))
  .dc(0,0,20);
stage.addChild(circle2);
arrDots.push(circle2);

var line = new createjs.Shape().set({
  graphics: new createjs.Graphics().s("#00f").mt(arrDots[0].x, 
arrDots[0].y).lt(arrDots[1].x, arrDots[1].y)
});
stage.addChild(line);
arrLines.push([arrDots[0], arrDots[1], line]);


createjs.Tween.get(circle1, {loop: true}).to({x:50}, 
3000).to({x:stage.canvas.width/2}, 3000);

function tick(event) {
  keepLineConnection();

  stage.update();
}
function keepLineConnection() {
  for(var i = 0; i < arrLines.length; i++) {
    arrLines[i][2].graphics.mt(arrLines[i][0].x, arrLines[i][0].y).lt(arrLines[i][1].x, arrLines[i][1].y);
  }
}
Источник

1 ответ

Решение

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

 graphics.mt().lt().mt().lt().mt().lt().mt().etc();

Поскольку вы просто добавляете новые инструкции, они со временем будут накапливаться и в конечном итоге убьют ваш процессор.

Для этого легко очистить графику перед добавлением новых:

graphics.clear().mt().lt();

Лучше всего использовать команды. Начиная с EaselJS 0.7.0, все графические команды являются объектами, и в любой момент вы можете напрямую обновить свойства этих объектов. Например, команды MoveTo и LineTo имеют x а также y имущество. Вот больше информации о командах: http://blog.createjs.com/update-width-height-in-easeljs/

Вот модифицированная скрипка, которая хранит команды в строке, а затем обновляет их tick, Я также сделал несколько других обновлений, таких как изменение режима синхронизации на RAF, что более плавно, чем использование интервальных таймеров со скоростью 60FPS.

https://jsfiddle.net/tck7x8u2/

// Store commands:
line.cmd1 = line.graphics.mt(0,0).command;
line.cmd2 = line.graphics.lt(0,0).command;

// Update commands:
var instr = arrLines[i],
line = instr[2];
line.cmd1.x = instr[0].x;
line.cmd1.y = instr[0].y;
line.cmd2.x = instr[1].x; 
line.cmd2.y = instr[1].y;

Ура!

Редактировать: Вот несколько демонстраций, использующих эту идею, которую я сделал некоторое время назад:

Источник
Другие вопросы по тегам