我截了一段网上关于移动端双指放大旋转的代码,但是每一次放大旋转后,松开手,再次放大旋转的时候每次都会还原到初始值怎么让他保持上一次放大旋转的位置,再在这个位置上无缝的继续放大旋转?<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: #fff;" > </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),
添加回答
举报
0/150
提交
取消