javascript - 如何使用鼠标操作围绕固定点旋转 HTML canvas 对象？

Question

例如，它可能用于手动调整时钟指针的应用。我想这可能涉及平移针(使针的终点成为旋转中心)然后旋转它，然后再次平移针。

但由于指针一直在监听鼠标事件，因此第一个鼠标事件将被捕获。结果是针最终被平移而根本没有旋转。鼠标事件也无法调试...

我可以引用任何想法或代码片段吗？使用 Javascript 或 CSS 旋转两者都很好。

Answer 1

在您的示例中，您需要计算钟面中心(黑点)与当前鼠标位置(红点)之间的 Angular ，相对于 Y 轴(如果您想象一个指南针，则以北为基数) .

如果我没记错的话，你可以用下面的方法计算:

var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }

公式中，x和y是两点的坐标，其中一个你会知道(它是钟面的中心)，另一个你可以从鼠标移动事件中得到。

确定 Angular 后，您可以简单地平移到圆心，将 Canvas 旋转计算出的量，然后画手。

更新:我创建了一个 jsfiddle 来说明 Angular 计算:

http://jsfiddle.net/DAEpy/1/