Createjs。线跟随元素小提琴

我连接两个元素的一条线，我希望线条保持连接到两个元素，无论他们去哪里。

我有点成功，但有一个非常明显的错误。它不断绘制新的线条，而不是重新绘制现有的线条。请帮助我如何使其更新线位置。

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); 
    } 
}

来源

2017-07-31 John

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

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

既然你是刚刚加入的新instrucitons，他们将堆积随着时间的推移，并最终会杀死你的处理器。

一个简单的办法是先加入新的之前清除图形：

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;

干杯！

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

来源

2017-07-31 15:32:49 Lanny

啊，好醇”受信任的兰尼 - 中unmasked堆栈溢出Createjs英雄！感谢您的回复，这就是我需要:) – John

Createjs。线跟随元素小提琴

回答

相关问题