创建js。行跟随元素 fiddle

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 and LineTo commands both have an x and y property. Here is more info on Commands: http://blog.createjs.com/update-width-height-in-easeljs/

这里是修改后的 fiddle，它在线上存储命令，然后在 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;

干杯！

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

创建js。行跟随元素 fiddle

Createjs. Line follow element fiddle

createjs

easeljs

tweenjs