assign onFrame() animation function to play on mouseevent

Question

since I'm pretty new to Paper.js I really need some help with this one:

I am having a MouseEnter event on an path element:

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

works fine so far. But what I want to do is obviously not just a simple console log, I want to start the animation function like:

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

but unfortunately nothing happens. How can I do it that the onFrame() function initialises after the onMouseEnter?

Thanks in advance.

Answer 1

The onFrame and onResize events are specific to the view object. If you're calling them from inside an onMouseEnter event handler of a path object, it may fire, but the event will still come from onMouseEnter. I recommend calling:

console.log(event);

instead of "test" to get a clearer picture of what is being returned.

Instead, you'll need to attach an event handler to your object that attaches another event handler to the view.

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)});

You can attach multiple event handlers to an object and/or the view in this way. Check out this answer for another example.