js移动端双指缩放和旋转

在iOS上有一组双指事件gesturestart、gesturechange、gestureend
gesturestart触发条件是当屏幕上有两根或以上手指并且第二根手指放在当前元素上
当两根手指移动时触发gesturechange，可以得到两个值
event.scale 缩放比例
event.rotation 旋转角度
但是这一组事件只能在iOS上使用，安桌上是没有的
在安卓上需要用touchstart、touchmove、touchend去实现

利用第一组两个点的x轴、y轴坐标求出两个点之间的距离，在得到第二组点的距离相除，得到缩放比例
利用第一组点的夹角与第二组点的夹角相减得到旋转角度
下面是我写的一个方法

function setGesture(el){var obj={}; //定义一个对象var istouch=false;var start=[];el.addEventListener("touchstart",function(e){if(e.touches.length>=2){  //判断是否有两个点在屏幕上istouch=true;start=e.touches;  //得到第一组两个点obj.gesturestart&&obj.gesturestart.call(el); //执行gesturestart方法};},false);document.addEventListener("touchmove",function(e){e.preventDefault();if(e.touches.length>=2&&istouch){var now=e.touches;  //得到第二组两个点var scale=getDistance(now[0],now[1])/getDistance(start[0],start[1]); //得到缩放比例，getDistance是勾股定理的一个方法var rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]);  //得到旋转角度，getAngle是得到夹角的一个方法e.scale=scale.toFixed(2);e.rotation=rotation.toFixed(2);obj.gesturemove&&obj.gesturemove.call(el,e);  //执行gesturemove方法};},false);document.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;
};

调用方法

    var box=document.querySelector("#box");var boxGesture=setGesture(box);  //得到一个对象boxGesture.gesturestart=function(){  //双指开始box.style.backgroundColor="yellow";};boxGesture.gesturemove=function(e){  //双指移动box.innerHTML = e.scale+"<br />"+e.rotation;box.style.transform="scale("+e.scale+") rotate("+e.rotation+"deg)";//改变目标元素的大小和角度};boxGesture.gestureend=function(){  //双指结束box.innerHTML="";box.style.cssText="background-color:red";};

这样在iOS和安卓下都可以用这一个方法

js移动端双指缩放和旋转相关推荐

android js 双指事件,JS实现移动端双指缩放和旋转方法
JS实现移动端双指缩放和旋转方法发表于 2020-2-25|标签javascript js实现移动端双指缩放和旋转,具体代码如下所示: ```javascript var initHeading = ...
移动端双指缩放、旋转
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
android js 双指事件,JS实现移动端双指缩放和旋转方法_旧址_前端开发者
var initHeading = 0; var rotation = 0; var lastTime; function setGesture(el){ var obj={}; var istouc ...
android旋转缩放布局,Android学习笔记（一）：双指缩放及旋转计算
请尊重原创,转载请注明来源. Android中,很多时候会用到手势判断,判断用户当前的手势是移动,还是双指缩放/旋转,关于Android中的手势和gesturedetector,已经有很多人进行过研究 ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
移动端双指缩放事件(原生)，e.originalEvent.touches
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
移动端js实现双指缩放，单指拖动图片
1.可通过修改图片的宽高来缩放图片 2.可通过修改transform进行缩放图片,使用transform默认的作用中心是元素的中心点,需要通过transform-origin:0 0调整作用中心点 3 ...
android js 双指事件,双指缩放的实现方式对比
一.双指缩放的实现方式方式一: 根据手势计算scale重新render生成视图实现逻辑 (1) 通过Web端手势库 AlloyFinger 获取元素onPinch事件的双指缩放比例scale. ( ...

js移动端双指缩放和旋转

js移动端双指缩放和旋转相关推荐

最新文章

热门文章