KInetic JS在鼠标移动时缩放形状

Question

是否可以使用Kinetic.js创建一个应用程序来创建一个形状，然后在移动鼠标时缩放它？我在Kinetic API中找不到任何东西，所以我混合使用“原始”JQuery。特别是，我使用$("canvas").last().mousemove函数，但事实证明这实际上非常慢。

Here是JSFiddle。

有关加快速度的提示吗？

我不认为Kinetic.js支持layer.on("mousemove", fn)，因为它似乎只适用于形状。

Answer 1

是肯定的。你会做这样的事情：

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

换句话说，将mousemove侦听器附加到容器div元素（传递给Kinetic阶段的元素）。使用setScale（）方法设置形状比例。使用batchDraw（）而不是draw（），以便绘制操作挂钩到KineticJS动画引擎，以获得更好的性能。否则，如果你使用draw（），每次检测到mousemove事件时你都会重绘整个图层，根据浏览器的不同，这可能是每秒数十万次