SVG-在鼠标位置之后沿固定的圆移动点 [英] SVG - moving a dot along a fixed circle following the mouse position

问题描述

我正在尝试设置动画点以跟随鼠标的药水.

I'm trying to animate a point to follow the potion of the mouse.

就像我注视着箭头，而不注视着眼睛一样. 如果我在鼠标周围移动，则该点应沿圆移动. 如果鼠标在眼睛上，则眼睛应遵循箭头.

It's like an eye looking at the arrow while I'm not on the eye. The point should move along a circle if I mouve around the mouse. If the mouse is on the eye, the eye should follow the arrow.

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

That's what I'm currently trying to do. I use snap.svg library.

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

I currently have a point following the mobility of the mouse but I cant make it stay in a circle.

到目前为止看起来像这样:

It looks like this so far :

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;

任何创意社区吗?

推荐答案

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

Here's my visual solution, it uses Snap's built in functions:-

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;

更新:这是小提琴演示.对读者的挑战:尝试var bigCircle = s.ellipse(150, 150, 100, 50);.

Update: Here's the fiddle demo. Challenge for readers: Try var bigCircle = s.ellipse(150, 150, 100, 50);.

这篇关于SVG-在鼠标位置之后沿固定的圆移动点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！