移动端单指拖 双值旋转缩放(改动版)
改动内容:改动了缩放或者扩大后元素溢出边框的BUG,获取了缩放或者扩大的区间值进行计算,详细区别能够看上一篇博客对照一下代码就知道了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>222</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
*{
margin:0;
padding:0;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
div{
width:100%;
font-size:18px;
}
#pic{
-webkit-transform-origin:center center;
}
title{
display: none;
}
body{
width:100%;
height:100%;
position: relative;
}
</style>
</head>
<body>
<img src="5.png" id="pic" alt="" width="200" height="200">
</body>
<script src="hammer.min.js"></script>
<script>
!(function(win,doc){
var pic=doc.getElementById("pic");
var mc=new Hammer.Manager(pic);
var pinch=new Hammer.Pinch();
var rotate=new Hammer.Rotate();
var pan=new Hammer.Pan();
pinch.recognizeWith(rotate);
mc.add([pinch,rotate,pan]);
mc.get('pan').set({direction:Hammer.DIRECTION_ALL});
var pan_ex=pan_ey=rota_ex=pex3=pey3=0,pin_sl=1;
/**
* 获取到浏览器窗体的距离
* @param {[type]} elm [description]
* @return {[type]} [description]
*/
function getpos(elm){
var x1=0,y1=0;
while(elm.nodeName!="BODY"){
x1+=elm.offsetLeft;
y1+=elm.offsetTop;
elm=elm.offsetParent;
}
return {"x":x1,"y":y1}
}
/**获取设置网页宽度
* [w description]
* @type {[type]}
*/
var w=doc.documentElement.scrollWidth<win.innerWidth?win.innerWidth:doc.documentElement.scrollWidth;
h=doc.documentElement.scrollHeight<win.innerHeight?
win.innerHeight:doc.documentElement.scrollHeight,
getx=getpos(pic).x,
gety=getpos(pic).y;
/**
* *单指拖动
* @param {[type]} ev [description]
* @return {[type]} [description]
*/
mc.on("panmove", function(ev) {
var pan_mx=ev.deltaX+pan_ex,
pan_my=ev.deltaY+pan_ey;
//变大变小之后计算位移防止超过边框
if(pan_mx<0&&getx-Math.abs(pan_mx-pex3/2)<0){
pan_mx=-(getx-pex3/2);
}else if(pan_mx>0&&(getx+(pan_mx-pex3/2)+pic.offsetWidth)>(w)){
pan_mx=w-pic.offsetWidth-getx-pex3/2;
}
if(pan_my<0&&gety-Math.abs(pan_my-pey3/2)<0){
pan_my=-(gety-pey3/2);
}else if(pan_my>0&&gety+(pan_my-pey3/2)+pic.offsetHeight>(h)){
pan_my=h-pic.offsetHeight-gety-pey3/2;
}
//设置元素变形值
pic.style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)";
pic.style.webkitTransformOrigin=(pan_mx+100)+"px "+(pan_my+100)+"px;";
mc.on("panend", function(ev) {
pan_ex=pan_mx;
pan_ey=pan_my;
});
ev.preventDefault();
});
//双指拉伸旋转
mc.on("pinchstart rotatestart", function(ev) {
var pinch_sa=ev.scale;
var rota_sx=ev.rotation;
mc.on("pinchmove rotatemove", function(ev) {
pin_ml=ev.scale-pinch_sa+pin_sl;
rota_mx=ev.rotation-rota_sx+rota_ex;
pic.style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)";
mc.on("pinchend rotateend", function(ev) {
pin_sl=pin_ml;
rota_ex=rota_mx;
//计算拉伸之后的区间值
if(ev.type=="rotateend"){
pex3=pin_ml*pic.offsetWidth-(pic.offsetWidth);
pey3=pin_ml*pic.offsetHeight-(pic.offsetHeight);
}
});
ev.preventDefault();
});
ev.preventDefault();
});
})(window,document)
</script>
</html>
