將css轉換爲變焦和位置

我想用硬件加速transform: translate3d() scale3d() CSS進行縮放和平移。一旦手勢完成，我重置變換並切換到CSS zoom和絕對定位。通過這種方式，縮放和平移不會鬆動，在手勢結束時它會很好地重新渲染內容。將css轉換爲變焦和位置

平移工作正常，如果我把變焦考慮：

.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 ...移+鼠標拖動模擬多點觸摸。 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

來源

2013-07-28 forresto

雖然我不能夠會回答你的問題，我可以給一些建議。儘可能使用類而不是jQuery css函數。在css文件中保留css，而不是在可能的情況下使用JavaScript，可以在我看來導致更清晰和更易於理解的代碼。另外一些css3變量在JavaScript中使用時會變得相當混亂。所以寧願在JavaScript中做動畫我會在JS中使用超時的css3轉換來匹配時間。不說你的不好，只是個人經驗。 –

我所做的'.css（）'調用全部用於動態位置。此外，jQuery負責瀏覽器前綴，這很好。 – forresto

還不錯，女巫很好，只是一個意見，不認爲它會真的幫助你的問題很多。 –

修改代碼以低於

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

這部作品是通過計算手勢的原點和左上角之間的矢量的方式內容的角落。當您縮放頁面時，矢量應該與頁面的其餘部分線性縮放。

的載體是distance_to_origin_x和distance_to_origin_y

來源

2013-08-11 04:54:29 DGS

將css轉換爲變焦和位置

回答

相關問題