html - KINETIC JS 在鼠标移动时缩放形状

Question

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

这是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 事件时都会重新绘制整个图层，这可能每秒数十万次，具体取决于浏览器