스케일링, 끌기 및 회전 할 때 이미지 위치 지정

Question

이미지를 조작하기 위해 일부 코드 작업 중. 나는 90 %의 효과를 얻었지만, 내 머리카락을 꺼내는 버그에 부딪쳤다! 그래서 두 개의 슬라이더가 있습니다. 왼쪽 슬라이더는 회전하고 오른쪽 슬라이더는 줌 (배율)입니다. 이미지를 드래그하여 위치시킬 수도 있습니다.

이미지 크기가 조정될 때 점프되는 특정 시퀀스입니다. 시퀀스는 다음과 같습니다.

회전, 크기 조정, 회전, 크기 조정, 끌기, 크기 조절.

최종 눈금에서 이미지의 위치가 어긋나는 것을 볼 수 있습니다. 이것은 내가 얻는 것입니다.

// Drag Handler 
$('#posUsrImgWrap').draggable({ 
    drag:function(event, ui){ 
     var il = ui.position.left; 
     var it = ui.position.top; 
     var iw = $(this).width(); 
     var ih = $(this).height(); 
     $('#posUserImg').css({'top':it+'px','left':il+'px'}); 
     dragged = true; 
     zc = 0; 
    }, 
    stop:function(){ 
     ixz = $('#posUserImg').position().left; 
     iyz = $('#posUserImg').position().top; 
     if(rotated){ 
      if(!zoomed){ 
       rx=orx*zv; 
       ry=ory*zv; 
      } 
      ixz=ixz+rx; 
      iyz=iyz+ry; 
     } 
     rxz=ixz; 
     ryz=iyz; 
     zoomed=false; 
     rd=true; 
    } 
}); 

회전 :

$("#slider-vertical").show().slider({ 
    orientation: "vertical", 
    min: -180, 
    max: 180, 
    value: sv, 
    slide: function(event, ui) { 
     var rv = ui.value; // Rotate Value 

     $('#posUserImg, #posUsrImgWrap').rotate(rv); 
     $('#rVal').val(rv); 
    }, 
    stop:function(){ 
     rx=((rxz - $('#posUserImg').position().left)); 
     ry=((ryz - $('#posUserImg').position().top)); 
     orx=rx; 
     ory=ry; 
     rzv=zv; 
     rotated=true; 
    } 
}); 

규모

내가 아래에있는 내 코드와 내 전체 코드의 일부 jsfiddle here

드래그 테스트 할 수 추가 ahve :

$("#slider-vertical-zoom").show().slider({ 
     orientation: "vertical", 
     min: -90, 
     max: 150, 
     step: 5, 
     value: szv, 
     start:function(){ 
      czv = (1+ $(this).slider("value")/100); 
     }, 
     slide: function(event, ui) { 
      zv = (1+ ui.value/100); // Zoom Value 
      var nx = 0; 
      var ny = 0; 

      var ozv = (1+ parseInt($('#zVal').val())/100); 

      nzo = calculateAspectRatioFit(iwz, ihz, iwz*(ozv), ihz*(ozv)); 

      if (dragged && zc == 0){ 
       var wt = Math.abs(iwz - nzo.width); 
       var ht = Math.abs(ihz - nzo.height); 
       if (czv < 1){ 
        ixz = ixz-(wt/2); 
        iyz = iyz-(ht/2); 
       } else { 
        ixz = ixz+(wt/2); 
        iyz = iyz+(ht/2); 
       } 
      } 

      nzo = calculateAspectRatioFit(iwz, ihz, iwz*(zv), ihz*(zv)); 

      $('#posUserImg, #posUsrImgWrap').width(nzo.width).height(nzo.height); 
      var wd = Math.abs(iwz - nzo.width); 
      var hd = Math.abs(ihz - nzo.height); 

      if (zv < 1){ 
       nx = (ixz+(wd/2)); 
       ny = (iyz+(hd/2)); 
       $('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'}); 
      } else { 
       nx = (ixz-(wd/2)); 
       ny = (iyz-(hd/2)); 
       $('#posUserImg, #posUsrImgWrap').css({'left':nx+'px','top':ny+'px'}); 
      } 

      $('#wPos').val(nzo.width); 
      $('#hPos').val(nzo.height); 
      $('#xPos').val(($('#posUserImg').position().left+(orx*zv))); 
      $('#yPos').val(($('#posUserImg').position().top+(ory*zv))); 
      $('#zVal').val(ui.value); 
      zc++; 
      iz=1; 
     }, 
     stop: function(){ 
      zx = 0; 
      zoomed=true; 
      rx=orx*zv; 
      ry=ory*zv; 
      rxz=ixz+rx; 
      ryz=iyz+ry; 
     } 
    }); 

나는 문제가 회전 또는 크기 조정 기능 내에 있다고 생각합니다. 규모의 가치와 관련이있을 수 있다는 느낌이 들지만, 운이 좋지 않게 작동하도록 여러 가지 조합을 시도했습니다.