在IE8中旋转:翻译不能正常工作

Rotating in IE8: translation not working properly

本文关键字：常工作 工作 不能 IE8 旋转 翻译      更新时间：2023-09-26

我需要在web应用程序中旋转图像。在之前的一篇文章中，有人向我解释说，在旋转时，我需要"翻译"图像，因为中心点发生了变化。

我使用HeyGrady 2D转换JQuery插件旋转，并提供翻译建议，这在FF/Chrome/Safari/IE9上工作得很好。然而，在IE8上，这并不能很好地工作。

请看下面的链接

如果你在FF/Chrome/Safari/IE9上运行这个，图像旋转得很好(保持在黑色边框内)。但是，如果你在IE8上运行它，当旋转到90度或270度时，它会越过黑色边框边界。

插件项目页面提到"IE也缺乏对transform-origin和translate()的支持[…]jQuery Transform插件会自动处理这些计算。然而，它似乎并没有这样做。

有谁知道是什么问题吗?

谢谢!

我在ie8中使用HeyGrady的jQuery转换插件也遇到了同样的问题。这里有一个修复方法，将它添加到execMatrix函数中，在第290行左右:

替换这一行:

this.fixPosition(matrix, tx, ty);
与这个:

    // factor in the object's current rotation so translation remains straight up/down/left/right
    // otherwise, object will be translated along the rotated axis, which produces undesirable effects
    var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted
        radians = rotation * (Math.PI / 180), // convert degrees to radians
        newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x
        newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y
    this.fixPosition(matrix, newX, newY);
相关文章：