Question

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

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

请查看以下link。

如果在FF / Chrome / Safari / IE9上运行此图像，则图像旋转正常（保持在黑色边框内）。但是，如果在IE8上运行它，它将在旋转到90或270度时穿过黑色边框边界。

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

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

谢谢！

Answer 1

我也使用HeyGrady的jQuery转换插件在IE 8中遇到了同样的问题。这是修复程序，将其添加到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);

在IE8中旋转：翻译无法正常工作

1 个答案: