hammer实现拖拽旋转缩放功能

效果：

首先下载hammer插件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>

hammer实现拖拽旋转缩放功能相关推荐

Android开发学习之ImageView手势拖拽、缩放、旋转
在Android应用中,图片随手势的拖拽.缩放.旋转在很多场景中都会用到,今天我们要做的就是在ImageView的基础上实现一个可以拖拽.缩放.转转的TouchView. 一.实现原理 OnTouch ...
小程序的拖拽、缩放和旋转手势
在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下. wxml部分: <view class="touch-container"><vie ...
vue-drag-resize实线页面的拖拽与缩放
使用vue-drag-resize实线页面的拖拽与缩放示例 <template><div id=" ...
D3.js实现人物关系图谱有移动、拖拽、放大功能
原文链接:https://www.jianshu.com/p/d768505cab78 在此基础上加了点东西实现了关系图的移动.拖拽.放大功能.以及数据的分类等等.代码稍显繁琐,另外案例中的d3.j ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
C#实现树型结构TreeView节点拖拽的简单功能，附全部源码，供有需要的参考
为什么80%的码农都做不了架构师?>>> 应用软件是否好用就体现在一些细节操作上,开发人员是否考虑到了很多细节,例如一个树形结构的数据若不支持拖拽功能那用起来会很糟糕一些,用户 ...
java鼠标左键按下后拖动实现多选_鼠标拖拽多选功能
鼠标拖拽多选功能 *{ box-sizing:border-box; } ul{ width:500px; height:auto; margin:0; padding:20px; font-size ...
安卓开发仿微信图片拖拽_Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...
Android 仿微信朋友圈发表图片拖拽和删除功能
朋友圈实现原理我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Mo ...

hammer实现拖拽旋转缩放功能

hammer实现拖拽旋转缩放功能相关推荐

最新文章

热门文章