Javascript，CSS : change transform origin to centerpoint of 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();

谢谢

汉斯