Html 5画布在原点移动时在两个方向上旋转标尺

Question

有谁能告诉我如何在画布中旋转标尺（比例尺）？在两个方向（顺时针和反向），我能够顺时针旋转标尺，但不能逆时针旋转。问题来了如果我将原点移动到标尺（左侧，顶部）。有没有人有解决方案？

Answer 1

要从水平位置旋转标尺CCW，您需要将鼠标移动到旋转中心的上方或左侧;因为中心位于左上角，这意味着你必须将鼠标移离标尺。问题是旋转标尺的mousemove处理程序仅在鼠标位于标尺上方时才起作用。您可以通过将相同的处理程序附加到父容器来解决此问题。

我通过替换行

让你的代码工作

$('#id_scale').bind("mousemove",function(e){

与

$('#parent_container').bind("mousemove",function(e){

jsFiddle example（旋转仅适用于Firefox，与原版一样）

您可以考虑添加其他转换样式，以便您的代码可以在Firefox以外的浏览器中使用。