Question

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

Answer 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;

干杯！

编辑：这是一些使用这个想法的演示，我做了一段时间：

Createjs。行跟随元素小提琴

1 个答案: