JavaScript IE вращение преобразования математика - PullRequest
Новая
       12

JavaScript IE вращение преобразования математика

2 голосов
/ 19 февраля 2011

Я работаю над настройкой поворота элемента с помощью JavaScript, я знаю, что это легко сделать, если вы хотите установить угол 90 градусов, но это не то, что я хочу.Поскольку я хочу установить странные углы, такие как 20 градусов, мне нужно использовать фильтр преобразования.Я знаю схему этого, но мне было интересно, как я вычисляю четыре значения, сначала я попробовал это. 

calSin = Math.sin(parseInt(css[c]));
calCos = Math.cos(parseInt(css[c]));
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

Но, как вы можете видеть, это никогда не сработало, я просто взялудар в темноте.Из-за того, что математика не была моей сильной стороной, мне было интересно, кто-нибудь может помочь мне вычислить значения?

Спасибо.

РЕДАКТИРОВАТЬ

Хорошо!Работает со следующим кодом. 

radians = parseInt(css[c]) * Math.PI * 2 / 360;
calSin = Math.sin(radians);
calCos = Math.cos(radians);
element.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(M11=' + calCos + ', M12=-' + calSin + ',M21=' + calSin + ', M22=' + calCos + ', sizingMethod="auto expand")';

Но теперь вопрос в том, как заставить его вращаться из центра, а не слева вверху?

Ответы [ 3 ]

4 голосов
/ 23 июня 2011

На самом деле есть способ сделать то, что вы пытаетесь сделать, используя только фильтр преобразования матрицы.

в дополнение к M11, M12, M21, M22, матрица также имеет два дополнительных свойства: Dx и Dy для перевода.К сожалению, вы не можете просто перевести на постоянную сумму.Для того, чтобы вращаться вокруг центра объекта, вам нужно составить три преобразования.

Сначала переведите центр объекта в начало координат.Во-вторых, поверните объект.В-третьих, переведите из источника обратно туда, где находится центр.

IE не может сам составить несколько матриц, поэтому вам придется самостоятельно выполнять линейную алгебру.Предположим, что тета - это угол, на который вы хотите повернуть, и предположим, что ширина объекта равна 2w, а высота - 2h.(Таким образом, w и h - ПОЛОВИНА ширины и высоты соответственно.) Пусть c и s означают cos (theta) и sin (theta) соответственно.

Матричный продукт, который вы хотите вычислить, будет: 

    [[1 0 w] [[c -s 0] [[1 0 -w]
     [0 1 h]  [s  c 0]  [0 1 -h]
     [0 0 1]] [0  0 1]] [0 0  1]]

, что равно: 

    [[ c           -s           (-wc + hs + w)]
     [ s            c           (-ws - hc + h)]
     [ 0            0                   1     ]]

Итак, если вы вычислите две величины (-wc + hs + w) и (-ws -hc + h) и добавите их в свой фильтр какDx и Dy соответственно, конечным результатом будет то, что вращение происходит вокруг центра объекта.

Я закодировал это и протестировал для проекта, в котором мне нужно было анимировать вращение объекта вокруг его центра, и это сработало для меня.

2 голосов
/ 19 февраля 2011

Для поворота из центра вам нужно добавить Dx и Dy в фильтр IE, затем добавить смещение через css и добавить хаки css для увеличения ширины и высоты элементов в IE .

Вы можете посмотреть, как это сочетается на моем сайте: http://kirilloid.ru/

На самом деле это больше вопрос CSS, чем javascript.

0 голосов
/ 06 августа 2012

Вы должны проверить https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie для всестороннего взлома IE 50%, 50% трансформации происхождения.Будьте осторожны, в последней функции есть несколько опечаток, вот правильный блок: 

var matrices = {
    tl: matrix.x($M([0, 0, 1])),
    bl: matrix.x($M([0, y, 1])),
    tr: matrix.x($M([x, 0, 1])),
    br: matrix.x($M([x, y, 1]))
};

Вам также понадобится библиотека Sylvester: http://sylvester.jcoglan.com/

HTH

...