javascript - SVG - 沿着鼠标位置的固定圆移动一个点

Question

我正在尝试为一个点设置动画以跟随鼠标的移动。

这就像一只眼睛看着箭，而我不在眼睛上。如果我围绕鼠标移动，该点应该沿着一个圆圈移动。如果鼠标在眼睛上，眼睛应该跟随箭头。

这就是我目前正在尝试做的事情。我使用 snap.svg 库。

我目前有一点跟随鼠标的移动，但我不能让它停留在一个圆圈内。

到目前为止看起来是这样的:

var s = Snap(400,400);
var c1 = s.circle(0,0,10).attr({ fill: "red" });

function OnMouseMove(evt) {
    c1.attr({ cx: evt.clientX , cy: evt.clientY });
}
document.onmousemove = OnMouseMove;

任何想法社区？

Answer 1

这是我的视觉解决方案，它使用 Snap 的内置函数:-

var s = Snap(400,400);
var circleX = 150, circleY = 150, circleRadius = 100;
var bigCircle = s.circle(circleX, circleY, circleRadius);
var L1 = s.path("M "+circleX+" "+circleY +"L 0 0").attr({stroke: "blue"});
// BigCircle default its black, lets change its attributes
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
var c1 = s.circle(0,0,10).attr({ fill: "red" });

function OnMouseMove(evt) {
    L1.attr({ d: "M "+circleX+" "+circleY +"L "+evt.clientX+" "+evt.clientY });
    var totalLength = L1.getTotalLength();
    if (totalLength < circleRadius) {
        c1.attr({ cx: evt.clientX , cy: evt.clientY });
    } else {
        var PAL = L1.getPointAtLength(circleRadius);
        c1.attr({ cx: PAL.x , cy: PAL.y });
    }
}
document.onmousemove = OnMouseMove;

更新:这是 fiddle demo .读者挑战:尝试 var bigCircle = s.ellipse(150, 150, 100, 50);。