javascript - 动画 SVG : Move shape in direction of mouse/rotate around fixed point?

Question

在浏览了论坛上发布的类似问题后，没有找到可以帮助我解决自己问题的内容，因此我将其发布。

我正在使用SVG.js在 Web 文档中生成 SVG 形状。我想要其中一个形状“跟随”鼠标/光标。

我的意思是:该形状有一个固定的位置/ anchor (在其原始中心)，并且它只能从该固定点移动有限的距离(假设为 50px)。 我希望每当光标移动时形状都沿光标的方向移动，但距其原始位置的距离永远不会超过定义的距离。我附上一个简短的动画来说明我的描述:

如果光标消失，形状将恢复到原来的中心。

我了解 Javascript、HTML 和 CSS。这种类型的元素操作对我来说是新的，数学让我很头疼，任何帮助都会很棒。

看起来我需要形状基本上围绕其原始中心旋转，并且相对于光标有一个 Angular ？我真的不确定如何解决这个问题。我尝试过使用一种方法来计算 Angular described in this post.我的形状移动了，但不符合预期:

// init
var draw = SVG().addTo('body')

// draw 
window.shape = draw.circle(25, 25).stroke({
  color: '#000',
  width: 2.5
}).fill("#fff");
shape.attr("id", "circle1");
shape.move(50, 50)


// move
var circle = $("#circle1");
var dist = 10;

$(document).mousemove(function(e) {

  // angle
  var circleCenter = [circle.offset().left + circle.width() / 2, circle.offset().top + circle.height() / 2];
  var angle = Math.atan2(e.clientX - circleCenter[0], -(e.clientY - circleCenter[1])) * (180 / Math.PI);

  var x = Math.sin(angle) * dist;
  var y = (Math.cos(angle) * dist) * -1;

  shape.animate().dmove(x, y);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意:解决方案是否依赖于 jQuery 对我来说并不重要(理想情况下不依赖)。

Answer 1

经过更多地摆弄一些计算 Angular 和距离的解决方案后，我找到了答案。

我使用固定引用点来计算形状中心和光标之间的直线的 Angular 。然后我相对于该引用点移动形状指定的量:

// Init canvas
var draw = SVG().addTo('body')

// Draw reference/anchor
var shape_marker_center = draw.circle(3,3).fill("#f00").move(150, 150);;
var grafikCenter = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")]

// Draw shapes
var shape = draw.circle(25, 25).stroke({color: '#000', width: 2.5 }).fill("none");
shape.attr("id", "circle1").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape2 = draw.circle(50, 50).stroke({color: '#000', width: 2.5 }).fill("none");
shape2.attr("id", "circle2").attr({cx: grafikCenter[0], cy:grafikCenter[1]})
var shape3 = draw.circle(75, 75).stroke({color: '#000', width: 2.5 }).fill("none");
shape3.attr("id", "circle3").attr({cx: grafikCenter[0], cy:grafikCenter[1]})

$(document).mousemove(function(e) {
  var pointA = [shape_marker_center.attr("cx"), shape_marker_center.attr("cy")];
  var pointB = [e.clientX, e.clientY];
  var angle = Math.atan2(pointB[1] - pointA[1], pointB[0] - pointA[0]) * 180 / Math.PI ;
  //
  var distance_x_1 = Math.cos(angle*Math.PI/180) * 16;
  var distance_y_1 = Math.sin(angle*Math.PI/180) * 16;
  var distance_x_2 = Math.cos(angle*Math.PI/180) * 8;
  var distance_y_2 = Math.sin(angle*Math.PI/180) * 8;
  //
  shape.center((grafikCenter[0] + distance_x_1), (grafikCenter[1] + distance_y_1));
  shape2.center((grafikCenter[0] + (distance_x_2) ), (grafikCenter[1] + (distance_y_2)));
})

svg {
  width: 100vw;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>