为了账号安全,请及时绑定邮箱和手机立即绑定

放大图片旋转

放大图片旋转

噜噜哒 2019-03-20 18:15:08
我截了一段网上关于移动端双指放大旋转的代码,但是每一次放大旋转后,松开手,再次放大旋转的时候每次都会还原到初始值怎么让他保持上一次放大旋转的位置,再在这个位置上无缝的继续放大旋转?<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),
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 387 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信