Javascript，css：將轉換起點更改爲gesturechange中心點

Question

我想將轉換原點更改爲捏合手勢的中心點。

該工作代碼（safariDevSample）適用縮放和旋轉不改變transform-origin：

window.angle = 0; //global to store data for later reset .... 
var newAngle; 

window.scale = 1; 
var newScale; 

function saveChanges() { 
    window.angle = newAngle; 
    window.scale = newScale; 
} 

function getAngleAndScale(e) { 
    // Don't zoom or rotate the whole screen 
    e.preventDefault(); 

    newAngle = window.angle + e.rotation; 

    newScale = window.scale * e.scale; 

    if (newScale < 1) newScale = 1; //prepend to scale smaller then parent 

    // Combine scale and rotation into a single transform 
    var tString = "rotate(" + newAngle + "deg) scale(" + newScale + ")"; 
    document.getElementById("theImg").style.webkitTransform = tString; 

} 

function init() { 
    document.getElementById("theImg").addEventListener("gesturechange", getAngleAndScale, false); 
    document.getElementById("theImg").addEventListener("gestureend", saveChanges, false); 
} 

init(); 

我試着使用touchstart和gesturestart screenX screenY額外的事件監聽器，但沒有成功。

Answer 1

猜猜我發現了一個使用touchstart事件的工作解決方案。 首先得到修復過渡原點，然後將其轉換爲相對的。 這則通的互掐中使用...

var yO = 50; 
var xO = 50; 

window.scale = 1; 

var newScale; 


function saveChanges() { 



    window.scale = newScale; 
} 


function getTouchStartXY(e){ 

myTouchStartNullX = e.touches[0].pageX; 
myTouchStartNullY = e.touches[0].pageY; 

myTouchStartSecondX = e.touches[1].pageX; 
myTouchStartSecondY = e.touches[1].pageY; 

myTouchStartX = (myTouchStartNullX + myTouchStartSecondX)/2; 
myTouchStartY = (myTouchStartNullY + myTouchStartSecondY)/2; 

    var boundingBox = document.getElementById('theImg').getBoundingClientRect(); 
     picX = boundingBox.left; 
    picY = boundingBox.top; 
    picRight = boundingBox.right; 
    picBottom = boundingBox.bottom; 

    if(picX < 0)picX = picX* (-1); 
    if(picY < 0)picY = picY* (-1); 
    xO = ((picX + myTouchStartX)/(picX + picRight))*100; 
    yO = ((picY + myTouchStartY)/(picY + picBottom))*100; 


    document.getElementById("theImg").style['webkitTransformOrigin'] = xO + '% ' + yO + '%'; 

} 

function getAngleAndScale(e) { 

    // Don't zoom or rotate the whole screen 

    e.preventDefault(); 

     newScale = window.scale * e.scale; 
//if(newScale < 1)newScale = 1; 





    // Combine scale and rotation into a single transform 

    var tString = "scale(" + newScale + ")"; 

    document.getElementById("theImg").style['webkitTransform'] = tString; 

} 




function init() { 
    document.getElementById("theImg").addEventListener("touchstart", getTouchStartXY, false); 

    document.getElementById("theImg").addEventListener("gesturechange", getAngleAndScale, false); 
    document.getElementById("theImg").addEventListener("gestureend", saveChanges, false); 

} 

init(); 

THX

漢斯