hammer实现拖拽旋转缩放功能

野性酷女 2022-04-11 02:27 400阅读 0赞

效果：

![20181204112557702.gif][]

首先下载hammer插件[http://hammerjs.github.io/][http_hammerjs.github.io]

html部分：

<div class="resultCon">  
        <p>人景合成图:</p>  
        <div class="resultImgCon">  
              
            <img src="img/beach.jpg" class="resultBg"/>   
              
            <img src="img/shape.png" class="resultP draggable" id="move-box" />  
        </div>  
    </div>

js部分：

var el = document.querySelector("\#move-box");

var START\_X = Math.round((window.innerWidth - el.offsetWidth) / 2);  
        var START\_Y = Math.round((window.innerHeight - el.offsetHeight) / 2)-50;

var ticking = false;  
        var transform;   //图像效果  
        var timer;  
        var initAngle = 0;  //旋转角度  
        var initScale = 1;  //放大倍数

function onPinch(ev)\{  
            if(ev.type == 'pinchstart') \{  
                initScale = transform.scale || 1;  
            \}  
            el.className = '';  
            transform.scale = initScale \* ev.scale;  
            requestElementUpdate();      
        \}

//旋转相关  
        var  preAngle =0 ;  
        var  tempAngleFlag=0;  
        var  deltaAngle = 0;      
        var  startRotateAngle = 0;

function updateElementTransform() \{  
            var value = \[  
                        'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',  
                        'scale(' + transform.scale + ', ' + transform.scale + ')',  
                        'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'  
            \];

value = value.join(" ");  
            el.style.webkitTransform = value;  /\*为Chrome/Safari\*/  
            el.style.mozTransform = value; /\*为Firefox\*/  
            el.style.transform = value; /\*IE Opera?\*/  
            ticking = false;  
        \}

function requestElementUpdate() \{  
            if(!ticking) \{  
                reqAnimationFrame(updateElementTransform);  
                ticking = true;  
            \}  
        \}

/\*\*  
        初始化设置  
        \*/  
        function resetElement() \{

el.className = 'animate';  
             transform = \{  
                translate: \{ x: START\_X, y: START\_Y \},  
                scale: 1,  
                angle: 0,  
                rx: 0,  
                ry: 0,  
                rz: 0  
            \};  
            requestElementUpdate();  
        \}

resetElement();

</script>

[20181204112557702.gif]: /images/20220411/0a2ddcf3c113465883ac0dc661c6d792.png
[http_hammerjs.github.io]: http://hammerjs.github.io/