Question

我关注paperjs，我希望瞳孔跟着鼠标，但我不希望它离开外眼的边界。我已经看到使用Jquery（JQuery follow mouse curser within in a div centered on page）完成了这项工作，但不了解如何使用paperjs实现这一点。我一直在使用他们的示例页面上的paperjs示例; http://paperjs.org/reference/tool/#onmousemove

知道如何在paperjs中实现这一点吗？什么帮助:) !!

Answer 1

如果您的眼睛也是圆形的，那么您的瞳孔也是一个简单的方法，那就是通过计算瞳孔与眼睛中心的距离来约束瞳孔的位置。
该距离必须小于眼睛半径减去瞳孔半径。
这是sketch演示的想法。

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

paperjs鼠标跟随另一个对象的边界

1 个答案: