两个箭头在圆圈内旋转答案

【问题标题】：Two arrows rotating inside a circle两个箭头在圆圈内旋转
【发布时间】：2013-07-05 07:35:52
【问题描述】：

所以，我需要实现的基本理念是创建一个从 0 度到 360 度的简单圆。

圆圈内有两个箭头。我需要它们在圆圈内旋转。

一个箭头需要每度旋转一次，直到达到指定的角度。另一个需要直接进入那个角度。

因此，您的箭头都将从 0 度开始，如果您指定要转到 100 度，一个箭头会立即跳跃并指向 100 度，而另一个箭头会逐渐指向 100 度。

编辑：

很抱歉我缺乏使用 stackoverflow 的技能（我刚刚意识到我从来没有在我的问题中包含一个问题......）。所以我早些时候通过stackoverflow上的另一个问题设法在画布中获得了简单的箭头，但是当我开始研究实际旋转箭头时，我只是迷失在代码中。

我想我的问题是：如何根据用户选择的度数值对我的两个箭头应用旋转？

这就是我设法制作的箭头：

<html>
<head>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>

<script langauage="javascript">
<!--
ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
canvas_arrow(ctx,50,50,100,50);
canvas_arrow(ctx,50,50,10,30);
ctx.stroke();


function canvas_arrow(context, fromx, fromy, tox, toy){
    var headlen = 10;   // length of head in pixels
    var dx = tox-fromx;
    var dy = toy-fromy;
    var angle = Math.atan2(dy,dx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
}
-->
</script>
</body>
</head>

箭头很好，但是让其中一个旋转而另一个跳到所需的度数是我觉得很难的事情。我找不到任何关于如何根据用户给出的度数使它们移动的示例或想法。

【问题讨论】：

这很有趣，但你的问题是什么？
这是个好主意。怎么样？
我认为您应该编辑您的问题并使其更加明确，否则您将在这里被一些“超级残忍”的前辈投票否决:)
@DoanCuong 当你有1 总分时，投反对票还不错:)
我只是注意到并完全同意:)

标签： javascript jquery html canvas rotation

【解决方案1】：

使用 jQuery，您可以获得 degrees，具体取决于鼠标在元素上方的位置，然后应用 CSS3 变换旋转 deg 并设置动画过渡时间：

const $el = $('#circle'),
  $cir = $el.children();

$el.on('click', evt => {
  const o = $(evt.target).offset(),
    rad = $el.width() / 2,
    mPos = {
      x: evt.pageX - o.left,
      y: evt.pageY - o.top
    },
    a = Math.atan2(mPos.x - rad, mPos.y - rad),
    d = -a / (Math.PI / 180) + 180;

  $cir.css({transform: `rotate(${d}deg)`});
});

#circle {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-family: arial, helvetica, sans-serif;
  user-select: none; /* prevent text highlight */
  cursor: pointer;
}

#circle>* {
  text-align: center;
  position: absolute;
  border-radius: inherit;
  width: inherit;
  height: inherit;
}

#circle1 {
  background: #eee;
  transition: 1.3s;
}

#circle2 {
  background: #fff;
  transition: 0.3s;
  top: 20px;
  left: 20px;
  width: calc(150px - 40px);
  height: calc(150px - 40px);
}

<div id="circle">
  <div id="circle1">&#9660;</div>
  <div id="circle2">&#9650;</div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

【讨论】：

See here.
这就像一个魅力，我正在玩弄它来尝试修改标记以使其成为箭头。我想出的一个问题是在灰色圆圈上添加带有度数的标记。我正在尝试每 15 度添加标记，但似乎无法找出如何。我在想 html、css 和 sass 的混合可能是最好的？类似于此link
@JulienDesaulniers 不，请为该元素创建一个背景图像 - 在 15° 处径向位移 24 行。这就是你所需要的。
@RokoC.Buljan ：是否可以固定背景并让箭头在其上移动，而背景本身不移动？
这真是个天才，很棒的解决方案！