0

我创建了这个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);
  }
}
4

1 回答 1

0

它不断绘制的原因是因为您不断向图形添加命令。基本上，您正在这样做：

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

由于您只是添加新的指令，它们会随着时间的推移而堆积起来，最终会杀死您的处理器。

一个简单的解决方法是在添加新图形之前先清除图形：

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

更好的方法是使用命令。从 EaselJS 0.7.0 开始，所有图形命令都是对象，您可以随时直接更新这些对象的属性。例如，MoveTo和LineTo命令都有一个xandy属性。以下是有关命令的更多信息：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;

干杯!

编辑：这是一些使用我不久前提出的想法的演示：

于 2017-07-31T15:32:49.270 回答