Свободное вращение элемента jQuery.Исправление Transform Origin и Translate в IE - PullRequest
Новая
       33

Свободное вращение элемента jQuery.Исправление Transform Origin и Translate в IE

4 голосов
/ 24 февраля 2011

Я разрабатываю плагин jQuery, чтобы сделать элемент уровня блока вращающимся с помощью мыши.Теперь он работает должным образом в браузерах, отличных от IE, но при вращении в Internet Explorer ведет себя странно.

Демонстрация размещена на testerski.antaranian.me здесь, скрипт плагина вращения 

    $.fn.roll = function(angle){
    var $this = this,
        ie = !jQuery.support.leadingWhitespace;
    if (ie) {
        var cosAngle = parseFloat(parseFloat(Math.cos(angle.rad())).toFixed(8)),
            sinAngle = parseFloat(parseFloat(Math.sin(angle.rad())).toFixed(8)),
            tx = 0, ty = 0,
            matrixFilter = '(M11=' + cosAngle + ', ' 
                    + 'M12=' + -sinAngle + ', '
                    + 'M21=' + sinAngle + ', '
                    + 'M22=' + cosAngle + ','
                    + 'sizingMethod=\'auto expand\')',
            filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrixFilter,
            css = {
                '-ms-filter': filter,
                'filter': filter                        
              };
            debug.log(filter);  
        var matrix = $M([
                  [cosAngle, -sinAngle, tx],
                  [sinAngle, cosAngle, ty],
                  [0, 0, 1]
                ]);  
        debug.log(matrix);
        $this.transformOrigin(matrix);
        $this.fixIeBoundaryBug(matrix);

    } else {
        var css = {
                '-webkit-transform': 'rotate(' + angle + 'deg)',
                '-moz-transform': 'rotate(' + angle + 'deg)',
                '-o-transform': 'rotate(' + angle + 'deg)'
              };
    }   
    $this.css(css);
    return this;            
  };

Я гуглил и нашел эти две страницы, связанные с этой темой

Руководство Грэди и Руководство Золтана

Когда я получаю, есть некоторые бухгалтерские данные, связанные с линейной алгеброй, но мне трудно, так что если у кого-то есть более простыеучебник, или знает прямое решение, пожалуйста, дайте мне знать.

Любая помощь будет признательна, Antaranian.

Ответы [ 3 ]

3 голосов
/ 24 февраля 2011

В Transform Filter, к сожалению, нет понятия «transform-origin». sizingMethod с автоматическим расширением заставит преобразованный объект занимать минимально возможное пространство, и вам нужно изменить его положение.

В cssSandpaper я поместил еще один тег

вокруг преобразованного объекта и отрегулировал его поля left-left и margin-top. Если вы перейдете на веб-сайт cssSandpaper и просмотрите код, вы увидите точную формулу (найдите «setMatrixFilter» в cssSandpaper.js). Вы можете жестко запрограммировать его в свою библиотеку или использовать для этого сам cssSandpaper (используя метод cssSandpaper.setTransform ()). Несмотря на то, что это может добавить несколько КБ к вашему коду, я предлагаю это на всякий случай, если я внесу улучшения в способ обработки преобразований в будущем.

В любом случае, удачи!

Z.

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

Фиксированная позиция для IE также может быть рассчитана аналитически - см. Здесь

0 голосов
/ 30 марта 2011

На самом деле я кодировал его в соответствии с моими потребностями, вот код, если кому-то еще интересно. 

$.fn.ieRotate = function(alfa){
    var self = this,
        cosAlfa = Math.cos(alfa),
        sinAlfa = Math.sin(alfa),
        matrix = '(M11=' + cosAlfa + ', ' 
                + 'M12=' + -sinAlfa + ', '
                + 'M21=' + sinAlfa + ', '
                + 'M22=' + cosAlfa + ','
                + 'sizingMethod=\'auto expand\')',
        // constructing the final filter string
        filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrix;    
    self.each(function(el){
        var $this = $(el),
            size = $this.data('size'),
            pos = $this.data('pos');
        $this.css({
            '-ms-filter': filter,
            'filter': filter,
            // for IE9
            'transform': 'rotate(' + angle + 'deg)'
          });
        // calculate the difference between element's expeced and the actual centers
        var dLeft = ($this.width() - size.width) / 2,
            dTop = ($this.height() - size.height) / 2;
        $this.css({
            top: pos.top -dTop,
            left: pos.left - dLeft 
          });   
    });
    return self;    
};

Использование: 

// caching the image object to a variable
$image = $('img#my-image');
// saving images non-rotated position and size data
$image.data('pos', {
        top:    $image.position().top,
        left:   $image.position().left
    }).data('size', {
        height: $image.height(),
        width:  $image.width()
    });
// rotate image 1.2 radians
$image.ieRotate(1.2);

Благодаря @Zoltan Hawryluk, его код помог мне во время разработки.

...