Вращение в IE8: перевод не работает должным образом - PullRequest
Новая
       32

Вращение в IE8: перевод не работает должным образом

1 голос
/ 29 ноября 2011

Мне нужно повернуть изображение в веб-приложении. В более раннем посте мне объяснили, что при вращении мне нужно «перевести» изображение, потому что меняется центральная точка.

Я использую плагин HeyGrady 2D transfrom от JQuery для вращения и предоставляю ему перевод, как было предложено, который отлично работает на FF / Chrome / Safari / IE9. Однако на IE8 это не работает хорошо.

Пожалуйста, посмотрите на следующую ссылку .

Если вы запустите это в FF / Chrome / Safari / IE9, изображение будет вращаться очень хорошо (остается в пределах черной границы). Однако, если вы запустите его в IE8, он будет пересекать черную границу при повороте на 90 или 270 градусов.

На странице проекта плагина упоминается, что «в IE также отсутствует поддержка transform-origin и translate () [...] Плагин jQuery Transform обрабатывает эти вычисления автоматически». Тем не менее, это не похоже на это.

У кого-нибудь есть идеи, в чем может быть проблема?

Спасибо!

1 Ответ

2 голосов
/ 20 сентября 2012

Я также столкнулся с той же проблемой в IE 8, используя плагин преобразования jQuery от HeyGrady.Вот исправление, добавив это в функцию 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);
...