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

Question

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

在 IE7 中，它几乎可以观察到。在 Chrome/Firefox 中，如果您稍微放大一点，可以观察到这个摆动问题。

我也尝试使用 Raphael 库来旋转图像。但是，这个圈子还是在摇晃。

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

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

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

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

score 1 · Accepted Answer

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

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

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

1 回答 1