将 css 转换为缩放和位置答案

【问题标题】：converting css transform to zoom and position将 css 转换为缩放和位置
【发布时间】：2013-08-11 13:18:06
【问题描述】：

我想使用硬件加速的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

【问题讨论】：

虽然我可能无法回答您的问题，但我可以提供一些建议。尽可能使用类而不是 jQuery css 函数。在我看来，尽可能将 css 保存在 css 文件中而不是 JavaScript 中可以使代码更清晰、更易于理解。还有一些 css3 变量在 JavaScript 中使用时会变得相当混乱。所以与其在 JavaScript 中做动画，我会在 JS 中使用带有超时的 css3 转换来匹配时间。不是说你的不好，只是个人经验。
我打的.css() 电话都是针对动态职位的。此外，jQuery 处理浏览器前缀，这很好。
少也可以，女巫很好，不过只是一个意见，不要认为它对你的问题有太大帮助。

标签： javascript css multi-touch css-transforms hammer.js

【解决方案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
  });
})

其工作方式是计算手势原点与内容左上角之间的向量。当您缩放页面时，该矢量应该与页面的其余部分线性缩放。

向量是 distance_to_origin_x 和 distance_to_origin_y

【讨论】：