Javascript, css: change transform origin to centerpoint of gesturechange

Question

I would like to change the transform origin to the center point of the pinch gesture.

This working code (safariDevSample) applies scale and rotation without changing the 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();

I've tried to use touchstart and gesturestart screenX screenY as additional event listeners but without success.

Answer 1

Guess I found a working solution by using the touchstart event. First get a fix transition origin and then convert it to a relative one. This can then be used thru the each pinch ...

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

Hans