双指缩放canvas图片_JS实现移动端双指缩放和旋转方法
js实现移动端双指缩放和旋转,具体代码如下所示:
var initHeading = 0;
var rotation = 0;
var lastTime;
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("#map3d");
var boxGesture=setGesture(box); //得到一个对象
boxGesture.gesturestart=function(){ //双指开始
/*box.style.backgroundColor="yellow";*/
initHeading = map25D._coreMap.map.position.heading;
};
boxGesture.gesturemove=function(e){ //双指移动
rotation = parseInt(e.rotation);
var time = new Date().getTime();
var realRotation = changeAngle(rotation,time);
if(realRotation){
//TODO 得到旋转角度后想实现的功能
map25D._coreMap.map.position.setHeading(realRotation);
map25D._coreMap.map.renderer.update();
}
};
boxGesture.gestureend=function(){ //双指结束
};
//通过时间判断解决叠加初始方向
var changeAngle = function (heading,newTime) {
if((newTime - lastTime) < 2){
return false;
}
lastTime = newTime;
return (initHeading + heading)
}
ps:下面看下js缩放网页比例
将当前网页缩放比变为200%
document.getElementsByTagName('body')[0].style.zoom=2
总结
以上所述是小编给大家介绍的JS实现移动端双指缩放和旋转方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
双指缩放canvas图片_JS实现移动端双指缩放和旋转方法相关推荐
- 点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失 一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
- 双指缩放canvas图片_移动端 图片手势控制 双指缩放 单指移动
var pageX,pageY,position_top,position_left; function setGesture(el) { var obj = {}; //定义一个对象 var ist ...
- 双指缩放canvas图片_小程序实现图片双指缩放
一:小程序实现图片双指缩放介绍 1:大体思路 监听图片加载完成 给图片初始化宽高 ▶ 双手指触发开始 计算两个手指坐标的距离 ▶ 双手指移动 计算两个手指坐标和距离 ▶ 根据探测到用户的手指距离变化, ...
- 移动端双指缩放、旋转
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存
模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
- ionic图片点击放大,双指缩放
对于这个功能,也是查找了好多的资料,到现在其中的代码也需要好好研究研究,这个方法的缺点就是每次只能显示一张图片,并对其进行放大~至于多张图片,以后再研究~ 1.写好模板页(comImageBox.ht ...
- android js 双指事件,JS实现移动端双指缩放和旋转方法
JS实现移动端双指缩放和旋转方法 发表于 2020-2-25|标签javascript js实现移动端双指缩放和旋转,具体代码如下所示: ```javascript var initHeading = ...
- android 固定比例图片裁剪插件,移动端添加图片裁剪的坑
本文关键:阻止冒泡.canvas压缩.canvas裁剪.生成黑色图片. 最近项目需要在添加图片时实现裁剪功能,虽然 github 上开源的裁剪插件不少,试了好几个插件,在移动端体验好的寥寥无几.躺了几 ...
- HTML5开发笔记:初窥CANVAS,上传canvas图片到服务器
本文向您展示怎样转换Image为canvas,以及canvas如何提取出一个Image. 转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 con ...
- 基于Vue Konva的canvas图片放大缩小
最近一个项目要实现图片根据鼠标位置多级放大缩小的功能,在网上找了好久的资源没有找到,偶然看到了一篇文章,但是没有完整的代码,研究了两天把代码补全了,其实也不难,但是困扰了我好几天,这个方法相对于网上别 ...
最新文章
- Ubuntu下通过 PPA 安装 Komodo 编辑器
- 来来来!DD带大家一起赢台MacBook Pro回家过年!
- MapReduce基础开发之十读写ORC File
- Bash脚本教程之变量
- C# windows定时服务+服务邮箱发送
- jenkins 集成java搅拌_如何将Gauge与Jenkins集成
- html5的鼠标拖拽
- Android 4.3 新特性
- 网络安全设备Bypass功能分析
- 51单片机彩灯控制器的设计(含源代码、编译过的 HEX 文件以及仿真图)
- C++和VC++学习方法
- 使用python爬虫获取大乐透和双色球历史开奖数据储存到excel表中
- python列表元素按条件分组_python-按值分组列表
- 微信文件过大不能上传?学会这几种方法,再大文件也能轻松发
- TPM分析笔记(一) TPM历史
- 自考学历和成考学历哪个更高一些 有啥区别
- 标准化API设计的重要性
- c 语言编写编译原理语义分析实验,北邮 编译原理 语义分析实验报告
- Ucinet三天写论文!C刊科研网络精写
- 1155:回文三位数