Javascript，css：将变换原点更改为gesturechange的centerpoint [英] Javascript, css: change transform origin to centerpoint of gesturechange

问题描述

我想将转换原点更改为缩放手势的中心点。

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

这个工作代码（safariDevSample）适用于缩放和旋转， c $ c> transform-origin ：

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();

我尝试使用 touchstart gesturestart screenX screenY 作为附加事件监听器，但未成功。

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

推荐答案

猜我通过使用touchstart事件找到了一个工作解决方案。
首先得到一个修复过渡原点，然后将其转换为相对的。
这可以通过每个pinch ...

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

这篇关于Javascript，css：将变换原点更改为gesturechange的centerpoint的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！