双指缩放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){
svg和canvas的区别uches.length>=2){ //判断是否有两个点在屏幕上
istouch=true;
uches; //得到第⼀组两个点
};
},false);
document.addEventListener("touchmove",function(e){
e.preventDefault();
uches.length>=2&&istouch){
var uches; //得到第⼆组两个点
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.Fixed(2);
};
},false);
document.addEventListener("touchend",function(e){
if(istouch){
istouch=false;
};
},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); //得到⼀个对象sturestart=function(){ //双指开始
/*box.style.backgroundColor="yellow";*/
initHeading = map25D._coreMap.map.position.heading; };
rotation = ation);
var time = new Date().getTime();
var realRotation = changeAngle(rotation,time);
if(realRotation){
//TODO 得到旋转⾓度后想实现的功能
map25D._coreMap.map.position.setHeading(realRotation); map25D._derer.update();
}
};
};
//通过时间判断解决叠加初始⽅向
var changeAngle = function (heading,newTime) {
if((newTime - lastTime) < 2){
return false;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。