jQuery 요소 무료 로테이션. 변환 원점 수정 및 IE에서 번역

Question

마우스로 회전 할 수있는 블록 레벨 요소를 만들 수있는 jQuery 플러그인을 개발 중입니다. 이제 비 IE 브라우저에서 예상대로 작동하지만 Internet Explorer에서 회전하는 동안 이상한 동작이 발생합니다.

데모는 여기 testerski.antaranian.me에서 호스팅되는, 회전 플러그인 스크립트는 내가 봤이 두 페이지 나되는 때 몇 가지가 있습니다

Grady's guide 및 Zoltan's guide

이 주제에 관한 발견

$.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;    
    }; 

입니다 Linear Algebra와 관련하여 회계가 필요하지만 누군가가 더 간단한 튜토리얼을 가지거나 직접 솔루션을 알고 있다면 저에게 알려주세요.

아무 도움도 받으실 수 있습니다. Antaranian.

Answer 1

IE의 변환 필터에는 불행히도 "변환 원점"이라는 개념이 없습니다. 'auto expand'sizingMethod를 사용하면 변형 된 객체가 가능한 최소 공간을 차지하게되고 위치를 변경해야합니다.

cssSandpaper에서 변형 된 객체 주위에 <div> 태그를 추가하고 margin-left와 margin-top을 조정했습니다. the cssSandpaper website으로 이동하여 코드를 살펴보면 정확한 수식이 표시됩니다 (cssSandpaper.js에서 "setMatrixFilter"로 검색). 라이브러리에 하드 코딩하거나 cssSandpaper 자체를 사용하여 수행 할 수 있습니다 (cssSandpaper.setTransform() 메소드 사용). 비록 당신의 코드에 몇 KB를 더할지라도, 나는 미래의 변환을 처리하는 방법을 개선하기 위해 이것을 제안한다.

어쨌든 행운을 비네! Z.

Answer 2

사실 내가 여기, 내 요구에 따라 코딩 다른 사람이 관심이 있다면, 코드입니다했습니다.

$.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;  
}; 

사용법 : @Zoltan Hawryluk에

// 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); 

덕분에 자신의 코드를 개발하는 동안 저를 도왔다.

Answer 3

IE의 위치 조정은 분석적으로도 계산할 수 있습니다. - see here