鼠標移動時的KInetic JS比例形狀

是否可以使用Kinetic.js創建一個應用程序，您可以在其中創建一個形狀，然後在您移動鼠標時對其進行縮放？我在Kinetic API中找不到任何東西，所以我在混合使用「原始」JQuery。特別是，我使用$("canvas").last().mousemove函數，但事實證明這實際上非常慢。鼠標移動時的KInetic JS比例形狀

Here是JSFiddle。

有關使其更快的任何提示？

我不認爲Kinetic.js支持layer.on("mousemove", fn)，因爲它似乎只適用於形狀。

來源

2013-06-04 BlackSheep

如何調整繪製位置形狀，而不是在每次鼠標移動時創建/刪除它。 – dchhetri

是的...你應該只保留對形狀的引用並修改其寬度/高度而不是破壞/重新創建它。 – Shmiddty

其實這似乎慢得多。我只是試了一下。 – BlackSheep

是的。你會做這樣的事情：

$('#container').on('mousemove', function(evt) { 
    shape.setScale(someValue); 
    layer.batchDraw(); 
});

換句話說，附加一個鼠標移動監聽到容器div元素（你通入動力學階段的一個）。使用setScale（）方法設置形狀比例。使用batchDraw（）而不是draw（），以便繪製操作掛鉤到KineticJS動畫引擎中，以獲得更好的性能。否則，如果使用draw（），則每次檢測到鼠標移動事件時都會重繪整個圖層，這取決於瀏覽器可能每秒數十萬次。

來源

2013-06-10 01:47:28

鼠標移動時的KInetic JS比例形狀

回答

相關問題