mouseevent - paperjs 鼠标跟随在另一个对象的范围内

Question

我在paperjs中有一只眼睛，我希望瞳孔跟随鼠标，但我不希望它离开外眼的边界。我已经看到使用 Jquery 完成此操作（JQuery 在以页面为中心的 div 中跟随鼠标光标），但不明白如何使用 paperjs 来实现这一点。我一直在使用他们的示例页面上的 paperjs 示例； http://paperjs.org/reference/tool/#onmousemove

知道如何在 paperjs 中实现它吗？有什么帮助:)！！

Answer 1

如果你的眼睛是一个圆圈并且你的瞳孔也是一个圆圈，一个简单的方法是通过计算瞳孔到眼睛中心的距离来限制瞳孔的位置。
该距离必须小于眼睛半径减去瞳孔半径。
这是一个演示这个想法的草图。

// user defined constants
var EYE_RADIUS = 50;
var PUPIL_RADIUS = 10;

// calculate max vector length
var MAX_VECTOR_LENGTH = EYE_RADIUS - PUPIL_RADIUS;

// draw a circle for the eye
var eye = new Path.Circle({
    center: view.center,
    radius: EYE_RADIUS,
    strokeColor: 'black'
});

// draw a circle for the pupil
var pupil = new Path.Circle({
    center: view.center,
    radius: PUPIL_RADIUS,
    fillColor: 'black'
});

// on mouse move
function onMouseMove(event) {
    // calculate vector from eye to pointer
    var vector = event.point - eye.position;
    // constrain it to stay inside the eye
    if (vector.length > MAX_VECTOR_LENGTH) {
        vector = vector.normalize(MAX_VECTOR_LENGTH);
    }
    // update pupil position
    pupil.position = eye.position + vector;
}