Javascript，css:将变换原点更改为手势更改的中心点

Javascript, css: change transform origin to centerpoint of gesturechange

本文关键字：中心点 原点 css 变换 Javascript      更新时间：2023-09-26

我想将变换原点更改为捏合手势的中心点。

这个工作代码（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 作为额外的事件侦听器，但没有成功。

猜猜我通过使用 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();

感谢

汉斯

相关文章：