用hammerjs，css轉換和轉換原點的手勢運動

我正嘗試在SVG環境中創建多手勢導航。我已經能夠通過Hammer.js提供的示例成功實現拖放操作，並且通過應用CSS3屬性轉換來縮放和旋轉。用hammerjs，css轉換和轉換原點的手勢運動

轉換似乎有效，但是當我進行第二次轉換/旋轉時，問題會追加並且原點似乎丟失，並且兩個運動之間會跳轉。

這是一個jsfiddle的問題的執行情況。您可以通過按住maj按鈕來嘗試多點觸控（用於旋轉/縮放）。

canvas = { 
    posX: 0, 
    posY: 0, 
    lastPosX: 0, 
    lastPosY: 0, 
    xImage: 0, 
    yImage: 0, 
    xLast: 0, 
    yLast: 0, 
    newPosX: 0, 
    newPosY: 0, 
    anchorX: 0, 
    anchorY: 0, 
    lastAnchorX: 0, 
    lastAnchorY: 0, 
    bufferX: 0, 
    bufferY: 0, 
    scale: 1, 
    lastScale: undefined, 
    rotation: 0, 
    last_rotation: undefined, 
    dragReady: 0, 
    transformOrigin: '', 
    initTouch: function() { 
     Hammer.plugins.showTouches(); 
     Hammer.plugins.fakeMultitouch(); 

     var hammertime = Hammer(document.getElementById('container'), { 
      transform_always_block: true, 
      transform_min_scale: 1, 
      drag_block_horizontal: true, 
      drag_block_vertical: true, 
      drag_min_distance: 0 
     }); 

     var posX = 0, 
      posY = 0, 
      lastPosX = 0, 
      lastPosY = 0, 
      bufferX = 0, 
      bufferY = 0, 
      scale = 1, 
      last_scale, 
      rotation = 1, 
      last_rotation, 
      dragReady = 0; 

     hammertime.on('touch drag dragend transform', function (ev) { 
      elemRect = document.getElementById('viewport'); 
      canvas.manageMultitouch(ev); 
     }); 
    }, 
    manageMultitouch: function (ev) { 

     switch (ev.type) { 
      case 'touch': 
       canvas.last_scale = canvas.scale; 
       canvas.last_rotation = canvas.rotation; 
       break; 

      case 'drag': 
       canvas.posX = ev.gesture.deltaX + canvas.lastPosX; 
       canvas.posY = ev.gesture.deltaY + canvas.lastPosY; 
       break; 

      case 'transform': 
       canvas.rotation = canvas.last_rotation + ev.gesture.rotation; 
       canvas.scale = Math.max(1, Math.min(canvas.last_scale * ev.gesture.scale, 10)); 

       canvas.anchorX = (ev.gesture.center.pageX - canvas.lastPosX); 
       canvas.anchorY = (ev.gesture.center.pageY - canvas.lastPosY); 

       canvas.transformOrigin = canvas.anchorX + " " + canvas.anchorY; 

       break; 

      case 'dragend': 
       canvas.lastPosX = canvas.posX; 
       canvas.lastPosY = canvas.posY; 

       break; 
     } 



     var transform = 
      "translate3d(" + canvas.posX + "px," + canvas.posY + "px, 0) " + 
      "scale3d(" + canvas.scale + "," + canvas.scale + ", 0) " + 
      "rotate(" + canvas.rotation + "deg) "; 

     elemRect.style.transform = transform; 
     elemRect.style.oTransform = transform; 
     elemRect.style.msTransform = transform; 
     elemRect.style.mozTransform = transform; 
     elemRect.style.webkitTransform = transform; 

     elemRect.style.webkitTransformOrigin = canvas.transformOrigin; 



    } 
} 

$(document).ready(function() { 
    canvas.initTouch(); 
});

來源

2014-04-29 jminguely

從我的理解，你的問題是，要修改的轉化中心（變換原點）。我明白你想要達到什麼目的，也就是讓新的修改集中在捏/旋轉手勢的中心。但是，通過更改轉換中心，還可以更改之前應用的所有轉換的中心，從而導致跳躍行爲。

要實現你想要的，你可能需要做一些矩陣操作並使用css矩陣屬性。理論上我猜你：

需要保持當前變換矩陣（TM）
當一個新的轉型是使用矩陣乘法應用
- 招TM通過手勢的負變電中心
- 矩陣乘以TM與手勢
- 動議TM由正變換中心的規模和位置
- 應用新TM噸○CSS矩陣的屬性

希望這有助於

本傑明

來源

2014-05-08 12:46:27

用hammerjs，css轉換和轉換原點的手勢運動

回答

相關問題