旋转圆形图像会移动它的位置

Question

我正在尝试使用jquery旋转插件旋转圆形图像。但是，我观察到圆形图像在旋转时似乎在围绕它的中心摆动。就像是直线运动。

在IE7中，这几乎是可以观察到的。在Chrome/Firefox中，如果你放大一点，就可以观察到这个抖动的问题。

我也试着用拉斐尔的库来旋转图像。但尽管如此，这个圈子还是摇摇欲坠。

然后，我用c#程序旋转了图像，看看是不是浏览器的图形引擎出了问题。但即使在这里，也可以观察到这个问题。我甚至拍摄了各种图片，看看这个圆圈是不是不完美。但是，所有的图像都显示了这种行为。

这会因为抗锯齿而发生吗？或者，这只是一种视觉错觉？

如果没有，那么还有什么原因呢？

我正在使用jqueryrotate插件rotate方法来做这件事。$('#circleimg').rotate(Position);

Answer 1

检查此jsFiddle。顺便说一句，这是一种源代码，你可以在你的问题中包括yourself，以便别人更容易回答。

http://jsfiddle.net/KyJzQ/

我使用了this旋转插件，因为你没有指定你使用的是哪一个。

HTML

<img id="circleimg" src="http://i.imgur.com/KgUDClr.png">
&nbsp;
<img id="circleimg2" src="http://i.imgur.com/sK4qP6z.png">

JAVASCRIPT

var rot = 0;

window.setInterval(function() {
    $('#circleimg').rotate(rot);
    $('#circleimg2').rotate(rot);
    rot += 1;
    },
    5
);

我认为你提供的圆圈实际上不是一个完美的圆圈，所以你看到了微小的“振荡”。

我添加了另一个我自己渲染的圆。如果你放大得足够近，你会看到锯齿状的像素在我的圆的边缘移动，但我看不到任何方法来解决这个问题，因为jQuery插件实际上并没有重新渲染图像。我在我的圈子里看不到你提到的任何“振荡”。

这个问题更多的是关于矢量艺术，而不是编程。获取一个很好的矢量图形程序，并尽可能渲染最好的圆。即使是我做的也不是很好。或者使用HTML5和canvas动态绘制，而不是到处移动静态图像。