我想将变换原点更改为捏合手势的中心点。
此工作代码(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
and 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();
Thx
Hans
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)