CSS 변환을 줌 및 위치로 변환

Question

하드웨어 가속화 transform: translate3d() scale3d() CSS로 핀치 확대 및 패닝을 수행하고 싶습니다. 제스처가 완료되면 변환을 재설정하고 CSS zoom 및 절대 위치로 전환합니다. 이렇게하면 확대/축소 및 이동이 자유 롭습니다. 제스처가 끝나면 내용이 멋지게 재 렌더링됩니다.

.on('dragend', function(event){ 
    $pinch.css({ 
    // Reset transform 
    transform: "translate3d(0, 0, 0) " 
    }); 
    // Convert transform to position 
    panX += event.gesture.deltaX/zoom; 
    panY += event.gesture.deltaY/zoom; 
    $("#content").css({ 
    left: panX, 
    top: panY 
    }); 
}) 

그러나 핀치 줌 내가 zoom의 원점 (0, 0)의 차이를 고려하는 방법을 알아낼 수없고 : 나는 계정으로 줌을하면

패닝 잘 작동합니다 몸짓의 기원 (핀치 중간).

.on('transformstart', function (event) { 
    currentZoom = zoom; 
    startX = event.gesture.center.pageX; 
    startY = event.gesture.center.pageY; 
    originX = startX/currentZoom; 
    originY = startY/currentZoom; 
    $pinch.css({ 
    transformOrigin: originX+"px "+originY+"px" 
    }); 
}) 
.on('transform', function (event) { 
    scale = Math.max(0.25/currentZoom, Math.min(event.gesture.scale, 6/currentZoom)); 
    deltaX = (event.gesture.center.pageX - startX)/currentZoom; 
    deltaY = (event.gesture.center.pageY - startY)/currentZoom; 
    $pinch.css({ 
    transform: "translate3d("+deltaX+"px,"+deltaY+"px, 0) " + 
       "scale3d("+scale+","+scale+", 1) " 
    }); 
}) 
.on('transformend', function (event) { 
    // Convert scale to zoom 
    zoom = currentZoom * scale; 
    zoom = Math.max(0.25, Math.min(zoom, 6)); 
    $pinch.css({ 
    // Reset transform 
    transform: "translate3d(0, 0, 0) " + 
       "scale3d(1, 1, 1) ", 
    zoom: zoom   
    }); 
    $("#content").css({ 
    top: currentX + deltaX + ???? 
    left: currentY + deltaY + ???? 
    }); 
}) 

자료 : http://bl.ocks.org/forresto/6097596 또는 http://codepen.io/forresto/full/KBHDr ... Shift + 마우스 드래그 멀티 터치를 시뮬레이션합니다. CSS zoom이 Firefox에서 작동하지 않습니다.

Hammer.js 'event.gesture는

angle: -133.87669728592456 
center: Object 
    pageX: 426 
    pageY: 337 
deltaTime: 853 
deltaX: -75 
deltaY: -78 
direction: "up" 
distance: 108.2081327812286 
eventType: "end" 
pointerType: "touch" 
rotation: 0 
scale: 1 
target: HTMLDivElement 
timeStamp: 1375041776946 
velocityX: 0.08792497069167643 
velocityY: 0.0914419695193435 

Answer 1

이 제스처의 원점과 왼쪽 상단 사이의 벡터를 계산하는 것입니다 작동

var $pinch = $("#pan"); 
var pinch = $pinch[0]; 
var currentZoom, startX, startY, originX, originY, scale, deltaX, deltaY, distance_to_origin_x, distance_to_origin_y; 
var zoom = 1; 
var panX = 0; 
var panY = 0; 

Hammer(pinch) 
.on('transformstart', function (event) { 
     currentZoom = zoom; 
     startX = event.gesture.center.pageX; 
     startY = event.gesture.center.pageY; 
     originX = startX/currentZoom; 
     originY = startY/currentZoom; 
     distance_to_origin_x = originX - $pinch.left(); 
     distance_to_origin_y = originY - $pinch.top(); 
     $pinch.css({ 
      transformOrigin: originX+"px "+originY+"px" 
     }); 
}) 
.on('transform', function (event) { 
     scale = Math.max(0.25/currentZoom, Math.min(event.gesture.scale, 6/currentZoom)); 
     deltaX = (event.gesture.center.pageX - startX)/currentZoom; 
     deltaY = (event.gesture.center.pageY - startY)/currentZoom; 
     $pinch.css({ 
      transform: "translate3d("+deltaX+"px,"+deltaY+"px, 0) " + 
        "scale3d("+scale+","+scale+", 1) " 
     }); 
}) 
.on('transformend', function (event) { 
    // Convert scale to zoom 
    zoom = currentZoom * scale; 
    zoom = Math.max(0.25, Math.min(zoom, 6)); 
    distance_to_origin_x *= zoom; 
    distance_to_origin_y *= zoom; 
    $pinch.css({ 
    // Reset transform 
    transform: "translate3d(0, 0, 0) " + 
       "scale3d(1, 1, 1) ", 
    zoom: zoom 
    }); 
    $("#content").css({ 
    top: originY + distance_to_origin_y , 
    left: originX + distance_to_origin_x 
    }); 
}) 

아래의 방법으로 코드를 수정처럼 보이는 콘텐츠 코너. 페이지의 크기를 조정할 때 벡터의 나머지 부분은 선형 적으로 확장되어야합니다. 나는 귀하의 질문에 내가 몇 가지 조언을 줄 수있는 답변을 할 수 없을 수도 있지만

벡터는