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。線跟隨元素小提琴

回答

相關問題