1

我需要在 Web 应用程序中旋转图像。在之前的一篇文章中，有人向我解释说，在旋转时我需要“平移”图像，因为中心点会发生变化。

我正在使用 HeyGrady 2D transfrom JQuery 插件进行旋转并按照建议为其提供翻译，这在 FF/Chrome/Safari/IE9 上运行良好。但是，在 IE8 上，这并不能很好地工作。

请查看以下链接。

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

插件项目页面提到“IE 也不支持 transform-origin 和 translate() [...] jQuery Transform 插件会自动处理这些计算”。但是，它似乎没有这样做。

任何人都有任何想法可能是什么问题？

谢谢！

4

1 回答 1

2

我也在 IE 8 中使用 HeyGrady 的 jQuery 转换插件遇到了同样的问题。这是通过在第 290 行左右将其添加到 execMatrix 函数的修复：

替换这一行：

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);
于 2012-09-20T16:11:26.097 回答