I cut a piece of code on the Internet about the magnification and rotation of the two fingers of the mobile end.
but after each magnification and rotation, release the hand and return to the original value every time when you zoom in and rotate again.
how to keep him in the position of the last magnification and rotation, and then seamlessly continue to zoom in and rotate in this position?
<div class="drag" style="
background: url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=988279975,1210033778&fm=58");
background-size: cover;
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 180px;
transform: scale(1) rotate(0deg);
color: -sharpfff;"
>
</div>
<scirpt>
var now = [], start = [], scale = 1, rotation = 0 , sPageX = 0, sPageY = 0;
var box = document.querySelector(".drag");
var boxGesture = setGesture(box);
boxGesture.gesturestart = function(){ //
};
boxGesture.gesturemove = function(e){ //
scale = e.scale;
rotation = e.rotation;
box.style.transform = "scale("+scale+") rotate("+rotation+"deg)";//
};
boxGesture.gestureend = function(){ //
};
function setGesture(el){
var obj = {}; //
var istouch = false;
el.addEventListener("touchstart", function(e) {
if(e.touches.length >= 2) { //
istouch = true;
start = e.touches; //
obj.gesturestart && obj.gesturestart.call(el); //gesturestart
};
},false);
el.addEventListener("touchmove", function(e) {
e.preventDefault();
if(e.touches.length >= 2 && istouch) {
now = e.touches; //
scale = getDistance(now[0],now[1]) / getDistance(start[0], start[1]); //
rotation = getAngle(now[0],now[1]) - getAngle(start[0],start[1]); //
obj.gesturemove && obj.gesturemove.call(el, {
scale: scale.toFixed(2),
rotation: rotation.toFixed(2)
}); //gesturemove
};
},false);
el.addEventListener("touchend", function(e){
if(istouch){
istouch = false;
obj.gestureend && obj.gestureend.call(el); //gestureend
};
},false);
return obj;
}
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
}
function getAngle(p1, p2) {
var x = p1.pageX - p2.pageX,
y = p1.pageY- p2.pageY;
return Math.atan2(y, x) * 180 / Math.PI;
}
</script>