transform: translate3d() scale3d()
ハードウェア アクセラレーションCSSを使用して、ピンチ ズームとパンを実行したいと考えています。ジェスチャが完了したら、変換をリセットし、CSSzoom
と絶対配置に切り替えます。このように、ズームとパンはジャンクフリーであり、ジェスチャの最後にはコンテンツが適切に再レンダリングされます。
ズームを考慮に入れると、パンは正常に機能します。
.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 ... シフト + マウス ドラッグは、マルチタッチをシミュレートします。CSSzoom
は 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