旋转圆形图像会改变它的位置

Question

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

在IE7中，它几乎可以观察到。在Chrome / Firefox中，如果稍微缩放，可以观察到这个摇摆不定的问题。

我也尝试使用Raphael库旋转图像。但是，这个圈子仍在摇摆不定。

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

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

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

我正在使用jqueryrotate插件旋转方法来执行此操作。 $('#circleimg').rotate(Position);

Answer 1

检查这个jsFiddle。顺便说一句，这是一种源代码，你可以在你的问题中包含 你自己 ，以便让其他人更容易回答。

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和画布动态绘制，而不是移动静态图像。