javascript - 分配onFrame()动画函数以在mouseevent上播放

因为我对Paper.js刚起步，所以我真的需要一些帮助：

我在路径元素上有一个MouseEnter事件：

pathArr[0].onMouseEnter = function(event) {
  console.log("test");
}

到目前为止工作正常。但是，我想做的显然不是简单的控制台日志，我想启动动画功能，例如：

pathArr[0].onMouseEnter = function(event) {
  function onFrame(event) {
    pathArr[1].segments[1].point += (throughPoint - pathArr[1].segments[1].point) / 10;
  }
}

但不幸的是没有任何反应。如何在onMouseEnter之后初始化onFrame()函数？

提前致谢。

最佳答案

onFrame和onResize事件特定于view对象。如果您是从路径对象的onMouseEnter事件处理程序内部调用它们的，则可能会触发，但该事件仍将来自onMouseEnter。我建议致电：

console.log(event);

而不是“测试”，以更清晰地了解返回的内容。

相反，您需要将事件处理程序附加到对象，该对象将另一个事件处理程序附加到视图。

var path = new Path.Circle({
    center: view.center,
    radius: 25,
    fillColor: 'black'
});

var shiftPath = function onFrame(event) {
    console.log(event.count);
    path.position += new Point(.5,.5);
};

path.on('mouseenter', function(){view.on('frame', shiftPath)});
path.on('mouseleave', function(){view.off('frame', shiftPath)});

您可以通过这种方式将多个事件处理程序附加到对象和/或视图。查看this answer以获得另一个示例。