在IE8中旋转:翻译不能正常工作
在IE8中旋转:翻译不能正常工作
提问于 2011-11-29 23:58:35
我需要在web应用程序中旋转图像。在早期的post中，有人向我解释说，在旋转时，我需要“平移”图像，因为中心点发生了变化。
我正在使用JQuery的HeyGrady 2D转换插件进行旋转，并提供建议的翻译，它在FF/Chrome/Safari/IE9中运行良好。然而，在IE8上，这并不能很好地工作。
请看下面的link。
如果你在FF/Chrome/Safari/IE9上运行它，图像会旋转得很好(停留在黑色边框内)。但是，如果在IE8上运行它，当旋转到90度或270度时，它将越过黑色边框边界。
插件项目页面提到"IE也缺乏对transform-origin和translate()的支持……jQuery Transform插件会自动处理这些计算“。然而，它似乎没有做到这一点。
有人知道问题出在哪里吗？
谢谢!
回答 1
Stack Overflow用户
发布于 2012-09-21 00:11:26
我在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); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8313787
复制相关文章
相似问题
腾讯云开发者
