移动端 图片缩放功能 手指缩放插件
移动端双指缩放图片
常见的 手势类型
iOS
- Tap（离散手势，100 ms 左右的点击行为）
- Long Press (连续手势，500 ms 以上的点击行为)
- Pan （连续手势，平移，类似 drag，但是可以在移动过程中不断变化方向）
- Swipe （离散手势）
- Pinch（连续手势，向外捏时放大，向内捏时缩小）
- Rotation（连续手势，旋转）
这里 我们着重 Pinch；
双指行为的判断
document.addEventListener('touchmove', function (event) {
if (event.touches && event.touches.length == 2) {
console.log('双指在移动');
}
});
双指缩放比例
双指缩放功能的实现的难点就是缩放比例的计算。
event.touches 中的每一项都是触摸点对象，包含了触碰的元素以及触摸点的坐标。
其中，触摸点的坐标就可以用来计算缩放比例。
我们记录下第一次双指行为发生时候的两个手指点的坐标值，于是就可以计算出这两个指头之间的距离；
然后继续 touchmove 的时候，实时计算出新的两个手指的坐标距离。
一开始的距离/现在的距离 = 应该缩放的比例。
双指缩放比例计算:originScale/scale=初始距离/后来距离，即：scale=originScale*（后来距离/初始距离)
function getScale (ts,tm){
var fingerRangeS = Math.sqrt(Math.pow((ts.x1 - ts.x0),2)+Math.pow((ts.y1-ts.y0),2)); //两手指的初始距离
var fingerRangeM = Math.sqrt(Math.pow((tm.x1 - tm.x0),2)+Math.pow((tm.y1-tm.y0),2)); //两手指移动过程中的距离
var range = fingerRangeM/fingerRangeS;
return range;
};
缩放旋转角度
var rotation=getAngle(now[0],now[1])-getAngle(start[0],start[1]); //得到旋转角度，getAngle是得到夹角的一个方法
function getAngle(p1, p2) {
var x = p1.pageX - p2.pageX,
y = p1.pageY- p2.pageY;
return Math.atan2(y, x) * 180 / Math.PI;
};
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)
}
参考demo
<img id="image" src="1.png">
var eleImg = document.querySelector('#image');
var store = {
scale: 1
};
// 缩放事件的处理
eleImg.addEventListener('touchstart', function (event) {
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
event.preventDefault();
// 第一个触摸点的坐标
store.pageX = events.pageX;
store.pageY = events.pageY;
store.moveable = true;
if (events2) {
store.pageX2 = events2.pageX;
store.pageY2 = events2.pageY;
}
store.originScale = store.scale || 1;
});
document.addEventListener('touchmove', function (event) {
if (!store.moveable) {
return;
}
event.preventDefault();
var touches = event.touches;
var events = touches[0];
var events2 = touches[1];
// 双指移动
if (events2) {
// 第2个指头坐标在touchmove时候获取
if (!store.pageX2) {
store.pageX2 = events2.pageX;
}
if (!store.pageY2) {
store.pageY2 = events2.pageY;
}
// 获取坐标之间的举例
var getDistance = function (start, stop) {
return Math.hypot(stop.x - start.x, stop.y - start.y);
};
// 双指缩放比例计算
var zoom = getDistance({
x: events.pageX,
y: events.pageY
}, {
x: events2.pageX,
y: events2.pageY
}) /
getDistance({
x: store.pageX,
y: store.pageY
}, {
x: store.pageX2,
y: store.pageY2
});
// 应用在元素上的缩放比例
var newScale = store.originScale * zoom;
// 最大缩放比例限制
if (newScale > 3) {
newScale = 3;
}
// 记住使用的缩放值
store.scale = newScale;
// 图像应用缩放效果
eleImg.style.transform = 'scale('+ newScale +')';
}
});
document.addEventListener('touchend', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
document.addEventListener('touchcancel', function () {
store.moveable = false;
delete store.pageX2;
delete store.pageY2;
});
常见demo
腾讯的 AlloyFinger http://alloyteam.github.io/AlloyFinger/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AlloyFinger</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style>
html,body{
margin: 0;
padding: 0;
border: 0;
background-color: #ccc;
text-align: center;
font: 14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
.header{
background-color: #333;
height: 40px;
color:white;
text-align: left;
text-indent: 20px;
font-weight: bold;
font-size: 20px;
line-height: 40px;
}
.title{
height: 30px;
color:#333333;
font-size: 20px;
line-height: 30px;
}
.example img{
width:160px ;
}
.imgBox{
margin-bottom: 10px;
border-bottom: 1px solid #333333;
}
.swipeBox{
height:160px;
width: 160px;
margin: 0 auto;
overflow: hidden;
font-size: 0;
position: relative;
border: 2px solid #ccc;
box-sizing: border-box;
}
.scroll{
width: 480px;
height: 160px;
white-space: nowrap;
}
.nuclear-nav {
position: absolute;
bottom: 6px;
right: 10px;
}
.nuclear-nav a {
display: inline-block;
background-color: white;
cursor: pointer;
width: 10px;
height: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
border: 1px solid #808080;
}
.nuclear-nav a.active {
background-color: #ffd800;
}
.longTapBox{
position: relative;
margin: 0 auto;
width: 160px;
height: 160px;
overflow: hidden;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
user-drag: none;
touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.longTapBox img{
pointer-events: none;
}
.overlay2,.overlay{
background-color: rgba(70, 70, 70, 0.8);
position: absolute;
top:0;
left: 0;
width: 160px;
height: 160px;
display: none;
}
.overlay2 img, .overlay img{
width: 40px;
height: 40px;
position: absolute;
top: 60px;
left: 60px;
}
.pb6{
padding-bottom: 6px;
}
.ribbon {
top: 3.2em;
right: -3.7em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
color:#fff;
display: block;
padding: .6em 3.5em;
position: fixed;
text-align: center;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: green;
z-index: 10000;
}
.btn {
letter-spacing: 3px;
display: inline-block;
color: white;
width: 270px;
height: 45px;
font-size: 24px;
line-height: 45px;
background-color: green;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
}
.footer{
height: 120px;
}
.linkCanvasBox{
margin-top: 10px;
}
.linkCanvasBox .btn{
font-size: 16px;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
<div class="header">AlloyFinger</div>
<div class="example">
<div class="title">pinch</div>
<div class="imgBox">
<img id="pinchImg" src="asset/test.png" />
</div>
<div class="title">rotate</div>
<div class="imgBox">
<img id="rotateImg" src="asset/test.png" />
</div>
<div class="title">pinch+rotate</div>
<div class="imgBox">
<img id="pinchRotateImg" src="asset/test.png" />
</div>
<div class="title">pressMove</div>
<div class="imgBox">
<img id="pressMoveImg" src="asset/test.png" />
</div>
<div class="title">doubleTap</div>
<div class="imgBox">
<img id="doubleTapImg" src="asset/test.png" />
</div>
<div class="title">swipe</div>
<div class="imgBox pb6">
<div class="swipeBox">
<div class="scroll" id="swipeScroll">
<img src="asset/test.png" /> <img src="asset/test2.png" /> <img src="asset/test3.png" />
</div>
<div class="nuclear-nav">
<a data-index="0" class="active"></a>
<a data-index="1" class=" "></a>
<a data-index="2" class=" "></a>
</div>
</div>
</div>
<div class="title">longTap</div>
<div class="imgBox pb6">
<div class=" longTapBox" id="longTapBox">
<img id="longTapImg" src="asset/test.png" />
<div class="overlay" id="overlay">
<img src="asset/yes.png"/>
</div>
</div>
</div>
<div class="title">tap</div>
<div class="imgBox pb6">
<div class=" longTapBox" id="tapBox">
<img src="asset/test.png" />
<div class="overlay2" id="overlay2">
<img src="asset/yes.png"/>
</div>
</div>
</div>
</div>
<div class="footer">
<div> <a class="btn" href="http://alloyteam.github.io/AlloyFinger/example/picture/">综合例子→</a></div>
</div>
<script src="asset/transform.js"></script>
<script src="alloy_finger.js"></script>
<script src="asset/to.js"></script>
<script>
var pinchImg = document.getElementById("pinchImg");
Transform(pinchImg);
var initScale = 1;
new AlloyFinger(pinchImg, {
multipointStart: function () {
initScale = pinchImg.scaleX;
},
pinch: function (evt) {
pinchImg.scaleX = pinchImg.scaleY = initScale * evt.zoom;
}
});
var rotateImg = document.getElementById("rotateImg");
Transform(rotateImg);
new AlloyFinger(rotateImg, {
rotate:function(evt){
rotateImg.rotateZ += evt.angle;
}
});
var pinchRotateImg = document.getElementById("pinchRotateImg");
Transform(pinchRotateImg);
new AlloyFinger(pinchRotateImg, {
rotate:function(evt){
pinchRotateImg.rotateZ += evt.angle;
},
multipointStart: function () {
initScale = pinchRotateImg.scaleX;
},
pinch: function (evt) {
pinchRotateImg.scaleX = pinchRotateImg.scaleY = initScale * evt.zoom;
}
});
var pressMoveImg = document.getElementById("pressMoveImg");
Transform(pressMoveImg);
new AlloyFinger(pressMoveImg, {
pressMove:function(evt){
pressMoveImg.translateX += evt.deltaX;
pressMoveImg.translateY += evt.deltaY;
evt.preventDefault();
}
});
function ease(x) {
return Math.sqrt(1 - Math.pow(x - 1, 2));
}
var doubleTapImg = document.getElementById("doubleTapImg");
Transform(doubleTapImg);
new AlloyFinger(doubleTapImg, {
doubleTap:function(){
if(doubleTapImg.scaleX===1){
new To(doubleTapImg, "scaleX", 2, 500, ease);
new To(doubleTapImg, "scaleY", 2, 500, ease);
}else if(doubleTapImg.scaleX===2){
new To(doubleTapImg, "scaleX", 1, 500, ease);
new To(doubleTapImg, "scaleY", 1, 500, ease);
}
}
});
var swipeScroll = document.getElementById("swipeScroll"),
currentIndex=0;
Transform(swipeScroll);
function activeNav(index){
var items = document.querySelectorAll(".nuclear-nav a"),
i = 0,
len = items.length;
for (; i < len; i++) {
if (i === index) {
items[i].classList.add("active");
} else {
items[i].classList.remove("active");
}
}
}
new AlloyFinger(swipeScroll, {
touchMove:function(evt) {
if (Math.abs(evt.deltaX) >= Math.abs(evt.deltaY)) {
evt.preventDefault();
}
},
swipe:function(evt){
if(evt.direction==="Left"){
if(currentIndex<2) {
currentIndex++;
new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
activeNav(currentIndex);
});
}
}else if(evt.direction==="Right"){
if(currentIndex>0) {
currentIndex--;
new To(swipeScroll, "translateX", -160 * currentIndex, 500, ease, function () {
activeNav(currentIndex);
});
}
}
}
});
var longTapBox = document.getElementById("longTapBox");
Transform(longTapBox);
var overlay=document.getElementById("overlay");
new AlloyFinger(longTapBox, {
longTap:function(evt){
evt.preventDefault();
toggleDom(overlay);
}
});
var tapBox = document.getElementById("tapBox");
Transform(tapBox);
var overlay2=document.getElementById("overlay2");
new AlloyFinger(tapBox, {
tap:function(){
toggleDom(overlay2);
},
singleTap:function(){
console.log("singleTap")
},
doubleTap:function(){
console.log("doubleTap")
},
pointStart:function(){
console.log("pointStart")
}
});
function toggleDom(dom){
var displayValue=window.getComputedStyle(dom,null)["display"];
if(displayValue==="none"){
dom.style.display="block";
}else{
dom.style.display="none";
}
}
</script>
</body>
</html>
/* AlloyFinger v0.1.15
* By dntzhang
* Github: https://github.com/AlloyTeam/AlloyFinger
*/
; (function () {
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
var mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
var r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
var angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
var HandlerAdmin = function(el) {
this.handlers = [];
this.el = el;
};
HandlerAdmin.prototype.add = function(handler) {
this.handlers.push(handler);
}
HandlerAdmin.prototype.del = function(handler) {
if(!handler) this.handlers = [];
for(var i=this.handlers.length; i>=0; i--) {
if(this.handlers[i] === handler) {
this.handlers.splice(i, 1);
}
}
}
HandlerAdmin.prototype.dispatch = function() {
for(var i=0,len=this.handlers.length; i<len; i++) {
var handler = this.handlers[i];
if(typeof handler === 'function') handler.apply(this.el, arguments);
}
}
function wrapFunc(el, handler) {
var handlerAdmin = new HandlerAdmin(el);
handlerAdmin.add(handler);
return handlerAdmin;
}
var AlloyFinger = function (el, option) {
this.element = typeof el == 'string' ? document.querySelector(el) : el;
this.start = this.start.bind(this);
this.move = this.move.bind(this);
this.end = this.end.bind(this);
this.cancel = this.cancel.bind(this);
this.element.addEventListener("touchstart", this.start, false);
this.element.addEventListener("touchmove", this.move, false);
this.element.addEventListener("touchend", this.end, false);
this.element.addEventListener("touchcancel", this.cancel, false);
this.preV = { x: null, y: null };
this.pinchStartLen = null;
this.zoom = 1;
this.isDoubleTap = false;
var noop = function () { };
this.rotate = wrapFunc(this.element, option.rotate || noop);
this.touchStart = wrapFunc(this.element, option.touchStart || noop);
this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
this.pinch = wrapFunc(this.element, option.pinch || noop);
this.swipe = wrapFunc(this.element, option.swipe || noop);
this.tap = wrapFunc(this.element, option.tap || noop);
this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
this.longTap = wrapFunc(this.element, option.longTap || noop);
this.singleTap = wrapFunc(this.element, option.singleTap || noop);
this.pressMove = wrapFunc(this.element, option.pressMove || noop);
this.twoFingerPressMove = wrapFunc(this.element, option.twoFingerPressMove || noop);
this.touchMove = wrapFunc(this.element, option.touchMove || noop);
this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);
this._cancelAllHandler = this.cancelAll.bind(this);
window.addEventListener('scroll', this._cancelAllHandler);
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = { x: null, y: null };
};
AlloyFinger.prototype = {
start: function (evt) {
if (!evt.touches) return;
this.now = Date.now();
this.x1 = evt.touches[0].pageX;
this.y1 = evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now);
this.touchStart.dispatch(evt, this.element);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
if (this.isDoubleTap) clearTimeout(this.singleTapTimeout);
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
var preV = this.preV,
len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
var v = { x: evt.touches[1].pageX - this.x1, y: evt.touches[1].pageY - this.y1 };
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this.multipointStart.dispatch(evt, this.element);
}
this._preventTap = false;
this.longTapTimeout = setTimeout(function () {
this.longTap.dispatch(evt, this.element);
this._preventTap = true;
}.bind(this), 750);
},
move: function (evt) {
if (!evt.touches) return;
var preV = this.preV,
len = evt.touches.length,
currentX = evt.touches[0].pageX,
currentY = evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
var sCurrentX = evt.touches[1].pageX,
sCurrentY = evt.touches[1].pageY
var v = { x: evt.touches[1].pageX - currentX, y: evt.touches[1].pageY - currentY };
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.zoom = getLen(v) / this.pinchStartLen;
this.pinch.dispatch(evt, this.element);
}
evt.angle = getRotateAngle(v, preV);
this.rotate.dispatch(evt, this.element);
}
preV.x = v.x;
preV.y = v.y;
if (this.x2 !== null && this.sx2 !== null) {
evt.deltaX = (currentX - this.x2 + sCurrentX - this.sx2) / 2;
evt.deltaY = (currentY - this.y2 + sCurrentY - this.sy2) / 2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this.twoFingerPressMove.dispatch(evt, this.element);
this.sx2 = sCurrentX;
this.sy2 = sCurrentY;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
//move事件中添加对当前触摸点到初始触摸点的判断，
//如果曾经大于过某个距离(比如10),就认为是移动到某个地方又移回来，应该不再触发tap事件才对。
var movedX = Math.abs(this.x1 - this.x2),
movedY = Math.abs(this.y1 - this.y2);
if(movedX > 10 || movedY > 10){
this._preventTap = true;
}
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this.pressMove.dispatch(evt, this.element);
}
this.touchMove.dispatch(evt, this.element);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
evt.preventDefault();
}
},
end: function (evt) {
if (!evt.changedTouches) return;
this._cancelLongTap();
var self = this;
if (evt.touches.length < 2) {
this.multipointEnd.dispatch(evt, this.element);
this.sx2 = this.sy2 = null;
}
//swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
(this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
self.swipe.dispatch(evt, self.element);
}, 0)
} else {
this.tapTimeout = setTimeout(function () {
if(!self._preventTap){
self.tap.dispatch(evt, self.element);
}
// trigger double tap immediately
if (self.isDoubleTap) {
self.doubleTap.dispatch(evt, self.element);
self.isDoubleTap = false;
}
}, 0)
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self.singleTap.dispatch(evt, self.element);
}, 250);
}
}
this.touchEnd.dispatch(evt, this.element);
this.preV.x = 0;
this.preV.y = 0;
this.zoom = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
},
cancelAll: function () {
this._preventTap = true
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
},
cancel: function (evt) {
this.cancelAll()
this.touchCancel.dispatch(evt, this.element);
},
_cancelLongTap: function () {
clearTimeout(this.longTapTimeout);
},
_cancelSingleTap: function () {
clearTimeout(this.singleTapTimeout);
},
_swipeDirection: function (x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
},
on: function(evt, handler) {
if(this[evt]) {
this[evt].add(handler);
}
},
off: function(evt, handler) {
if(this[evt]) {
this[evt].del(handler);
}
},
destroy: function() {
if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if(this.tapTimeout) clearTimeout(this.tapTimeout);
if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
if(this.swipeTimeout) clearTimeout(this.swipeTimeout);
this.element.removeEventListener("touchstart", this.start);
this.element.removeEventListener("touchmove", this.move);
this.element.removeEventListener("touchend", this.end);
this.element.removeEventListener("touchcancel", this.cancel);
this.rotate.del();
this.touchStart.del();
this.multipointStart.del();
this.multipointEnd.del();
this.pinch.del();
this.swipe.del();
this.tap.del();
this.doubleTap.del();
this.longTap.del();
this.singleTap.del();
this.pressMove.del();
this.twoFingerPressMove.del()
this.touchMove.del();
this.touchEnd.del();
this.touchCancel.del();
this.preV = this.pinchStartLen = this.zoom = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = this.twoFingerPressMove = null;
window.removeEventListener('scroll', this._cancelAllHandler);
return null;
}
};
if (typeof module !== 'undefined' && typeof exports === 'object') {
module.exports = AlloyFinger;
} else {
window.AlloyFinger = AlloyFinger;
}
})();
第一种
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>图片缩放</title>
<link rel="stylesheet" href="themes/scale.css" type="text/css" />
</head>
<body>
<div class="list">
<img src="themes/images/2.jpg" />
</div>
<section class="imgzoom_pack">
<div class="imgzoom_x">X</div>
<div class="imgzoom_img"><img src="" /></div>
</section>
<script src="js/scale.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event){
ImagesZoom.init({
"elem": ".list"
});
}, false);
</script>
</body>
</html>
源码
(function(window, undefined){
var document = window.document,
support = {
transform3d: ("WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix()),
touch: ("ontouchstart" in window)
};
function getTranslate(x, y){
var distX = x, distY = y;
return support.transform3d ? "translate3d("+ distX +"px, "+ distY +"px, 0)" : "translate("+ distX +"px, "+ distY +"px)";
}
function getPage(event, page) {
return support.touch ? event.changedTouches[0][page] : event[page];
}
var ImagesZoom = function(){};
ImagesZoom.prototype = {
// 给初始化数据
init: function(param){
var self = this,
params = param || {};
var imgList = document.querySelectorAll(params.elem + " img"),
zoomMask = document.querySelector(".imgzoom_pack"),
zoomImg = document.querySelector(".imgzoom_pack .imgzoom_img img"),
zoomClose = document.querySelector(".imgzoom_pack .imgzoom_x"),
imgSrc = "";
self.buffMove = 3; //缓冲系数
self.buffScale = 2; //放大系数
self.finger = false; //触摸手指的状态 false：单手指 true：多手指
self._destroy();
zoomClose.addEventListener("click", function(){
zoomMask.style.cssText = "display:none";
zoomImg.src = "";
zoomImg.style.cssText = "";
self._destroy();
document.removeEventListener("touchmove", self.eventStop, false);
}, false);
for(var len=imgList.length,i=0; i<len; i++){
imgList[i].addEventListener("click", function(){
imgSrc = this.getAttribute("src");
zoomMask.style.cssText = "display:block";
zoomImg.src = imgSrc;
zoomImg.onload = function(){
zoomImg.style.cssText = "margin-top:-"+(zoomImg.offsetHeight/2)+"px";
// 禁止页面滚动
document.addEventListener("touchmove", self.eventStop, false);
self.imgBaseWidth = zoomImg.offsetWidth;
self.imgBaseHeight = zoomImg.offsetHeight;
self.addEventStart({
wrapX: zoomMask.offsetWidth,
wrapY: zoomMask.offsetHeight,
mapX: zoomImg.width,
mapY: zoomImg.height
});
}
}, false);
}
},
addEventStart: function(param){
var self = this,
params = param || {};
self.element = document.querySelector(".imgzoom_pack img");
//config set
self.wrapX = params.wrapX || 0; //可视区域宽度
self.wrapY = params.wrapY || 0; //可视区域高度
self.mapX = params.mapX || 0; //地图宽度
self.mapY = params.mapY || 0; //地图高度
self.outDistY = (self.mapY - self.wrapY)/2; //图片超过一屏的时候有用
self.width = self.mapX - self.wrapX; //地图的宽度减去可视区域的宽度
self.height = self.mapY - self.wrapY; //地图的高度减去可视区域的高度
self.element.addEventListener("touchstart",function(e){
self._touchstart(e);
},false);
self.element.addEventListener("touchmove",function(e){
self._touchmove(e);
},false);
self.element.addEventListener("touchend",function(e){
self._touchend(e);
},false);
},
// 重置坐标数据
_destroy: function(){
this.distX = 0;
this.distY = 0;
this.newX = 0;
this.newY = 0;
},
// 更新地图信息
_changeData: function(){
this.mapX = this.element.offsetWidth; //地图宽度
this.mapY = this.element.offsetHeight; //地图高度
// this.outDistY = (this.mapY - this.wrapY)/2; //当图片高度超过屏幕的高度时候。图片是垂直居中的，这时移动有个高度做为缓冲带
this.width = this.mapX - this.wrapX; //地图的宽度减去可视区域的宽度
this.height = this.mapY - this.wrapY; //地图的高度减去可视区域的高度
},
_touchstart: function(e){
var self = this;
e.preventDefault();
var touchTarget = e.targetTouches.length; //获得触控点数
self._changeData(); //重新初始化图片、可视区域数据，由于放大会产生新的计算
if(touchTarget == 1){
// 获取开始坐标
self.basePageX = getPage(e, "pageX");
self.basePageY = getPage(e, "pageY");
self.finger = false;
}else{
self.finger = true;
self.startFingerDist = self.getTouchDist(e).dist;
self.startFingerX = self.getTouchDist(e).x;
self.startFingerY = self.getTouchDist(e).y;
}
console.log("pageX: "+getPage(e, "pageX"));
console.log("pageY: "+getPage(e, "pageY"));
},
_touchmove: function(e){
var self = this;
e.preventDefault();
e.stopPropagation();
console.log("event.changedTouches[0].pageY: "+event.changedTouches[0].pageY);
var touchTarget = e.targetTouches.length; //获得触控点数
if(touchTarget == 1 && !self.finger){
self._move(e);
}
if(touchTarget>=2){
self._zoom(e);
}
},
_touchend: function(e){
var self = this;
self._changeData(); //重新计算数据
if(self.finger){
self.distX = -self.imgNewX;
self.distY = -self.imgNewY;
}
if( self.distX>0 ){
self.newX = 0;
}else if( self.distX<=0 && self.distX>=-self.width ){
self.newX = self.distX;
self.newY = self.distY;
}else if( self.distX<-self.width ){
self.newX = -self.width;
}
self.reset();
},
_move: function(e){
var self = this,
pageX = getPage(e, "pageX"), //获取移动坐标
pageY = getPage(e, "pageY");
// 禁止默认事件
// e.preventDefault();
// e.stopPropagation();
// 获得移动距离
self.distX = (pageX - self.basePageX) + self.newX;
self.distY = (pageY - self.basePageY) + self.newY;
if(self.distX > 0){
self.moveX = Math.round(self.distX/self.buffMove);
}else if( self.distX<=0 && self.distX>=-self.width ){
self.moveX = self.distX;
}else if(self.distX < -self.width ){
self.moveX = -self.width+Math.round((self.distX+self.width)/self.buffMove);
}
self.movePos();
self.finger = false;
},
// 图片缩放
_zoom: function(e){
var self = this;
// e.preventDefault();
// e.stopPropagation();
var nowFingerDist = self.getTouchDist(e).dist, //获得当前长度
ratio = nowFingerDist / self.startFingerDist, //计算缩放比
imgWidth = Math.round(self.mapX * ratio), //计算图片宽度
imgHeight = Math.round(self.mapY * ratio); //计算图片高度
// 计算图片新的坐标
self.imgNewX = Math.round(self.startFingerX * ratio - self.startFingerX - self.newX * ratio);
self.imgNewY = Math.round((self.startFingerY * ratio - self.startFingerY)/2 - self.newY * ratio);
if(imgWidth >= self.imgBaseWidth){
self.element.style.width = imgWidth + "px";
self.refresh(-self.imgNewX, -self.imgNewY, "0s", "ease");
self.finger = true;
}else{
if(imgWidth < self.imgBaseWidth){
self.element.style.width = self.imgBaseWidth + "px";
}
}
self.finger = true;
},
// 移动坐标
movePos: function(){
var self = this;
if(self.height<0){
if(self.element.offsetWidth == self.imgBaseWidth){
self.moveY = Math.round(self.distY/self.buffMove);
}else{
var moveTop = Math.round((self.element.offsetHeight-self.imgBaseHeight)/2);
self.moveY = -moveTop + Math.round((self.distY + moveTop)/self.buffMove);
}
}else{
var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;
if(self.distY >= -a){
self.moveY = Math.round((self.distY + a)/self.buffMove) - a;
}else if(self.distY <= -b){
self.moveY = Math.round((self.distY + b)/self.buffMove) - b;
}else{
self.moveY = self.distY;
}
}
self.refresh(self.moveX, self.moveY, "0s", "ease");
},
// 重置数据
reset: function(){
var self = this,
hideTime = ".2s";
if(self.height<0){
self.newY = -Math.round(self.element.offsetHeight - self.imgBaseHeight)/2;
}else{
var a = Math.round((self.wrapY - self.imgBaseHeight)/2),
b = self.element.offsetHeight - self.wrapY + Math.round(self.wrapY - self.imgBaseHeight)/2;
if(self.distY >= -a){
self.newY = -a;
}else if(self.distY <= -b){
self.newY = -b;
}else{
self.newY = self.distY;
}
}
self.refresh(self.newX, self.newY, hideTime, "ease-in-out");
},
// 执行图片移动
refresh: function(x, y, timer, type){
this.element.style.webkitTransitionProperty = "-webkit-transform";
this.element.style.webkitTransitionDuration = timer;
this.element.style.webkitTransitionTimingFunction = type;
this.element.style.webkitTransform = getTranslate(x, y);
},
// 获取多点触控
getTouchDist: function(e){
var x1 = 0,
y1 = 0,
x2 = 0,
y2 = 0,
x3 = 0,
y3 = 0,
result = {};
x1 = e.touches[0].pageX;
x2 = e.touches[1].pageX;
y1 = e.touches[0].pageY - document.body.scrollTop;
y2 = e.touches[1].pageY - document.body.scrollTop;
if(!x1 || !x2) return;
if(x1<=x2){
x3 = (x2-x1)/2+x1;
}else{
x3 = (x1-x2)/2+x2;
}
if(y1<=y2){
y3 = (y2-y1)/2+y1;
}else{
y3 = (y1-y2)/2+y2;
}
result = {
dist: Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))),
x: Math.round(x3),
y: Math.round(y3)
};
return result;
},
eventStop: function(e){
e.preventDefault();
e.stopPropagation();
}
};
window.ImagesZoom = new ImagesZoom();
})(this);
另一种
/*
Copyright (c) Manuel Stofer 2013 - rtp.ch - RTP.PinchZoom.js
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
/*global jQuery, console, define, setTimeout, window*/
(function () {
'use strict';
var definePinchZoom = function ($) {
/**
* Pinch zoom using jQuery
* @version 0.0.2
* @author Manuel Stofer <mst@rtp.ch>
* @param el
* @param options
* @constructor
*/
var PinchZoom = function (el, options) {
this.el = $(el);
this.zoomFactor = 1;
this.lastScale = 1;
this.offset = {
x: 0,
y: 0
};
this.options = $.extend({}, this.defaults, options);
this.setupMarkup();
this.bindEvents();
this.update();
// default enable.
this.enable();
},
sum = function (a, b) {
return a + b;
},
isCloseTo = function (value, expected) {
return value > expected - 0.01 && value < expected + 0.01;
};
PinchZoom.prototype = {
defaults: {
tapZoomFactor: 2,
zoomOutFactor: 1.3,
animationDuration: 300,
maxZoom: 4,
minZoom: 0.5,
lockDragAxis: false,
use2d: true,
zoomStartEventName: 'pz_zoomstart',
zoomEndEventName: 'pz_zoomend',
dragStartEventName: 'pz_dragstart',
dragEndEventName: 'pz_dragend',
doubleTapEventName: 'pz_doubletap'
},
/**
* Event handler for 'dragstart'
* @param event
*/
handleDragStart: function (event) {
this.el.trigger(this.options.dragStartEventName);
this.stopAnimation();
this.lastDragPosition = false;
this.hasInteraction = true;
this.handleDrag(event);
},
/**
* Event handler for 'drag'
* @param event
*/
handleDrag: function (event) {
if (this.zoomFactor > 1.0) {
var touch = this.getTouches(event)[0];
this.drag(touch, this.lastDragPosition);
this.offset = this.sanitizeOffset(this.offset);
this.lastDragPosition = touch;
}
},
handleDragEnd: function () {
this.el.trigger(this.options.dragEndEventName);
this.end();
},
/**
* Event handler for 'zoomstart'
* @param event
*/
handleZoomStart: function (event) {
this.el.trigger(this.options.zoomStartEventName);
this.stopAnimation();
this.lastScale = 1;
this.nthZoom = 0;
this.lastZoomCenter = false;
this.hasInteraction = true;
},
/**
* Event handler for 'zoom'
* @param event
*/
handleZoom: function (event, newScale) {
// a relative scale factor is used
var touchCenter = this.getTouchCenter(this.getTouches(event)),
scale = newScale / this.lastScale;
this.lastScale = newScale;
// the first touch events are thrown away since they are not precise
this.nthZoom += 1;
if (this.nthZoom > 3) {
this.scale(scale, touchCenter);
this.drag(touchCenter, this.lastZoomCenter);
}
this.lastZoomCenter = touchCenter;
},
handleZoomEnd: function () {
this.el.trigger(this.options.zoomEndEventName);
this.end();
},
/**
* Event handler for 'doubletap'
* @param event
*/
handleDoubleTap: function (event) {
var center = this.getTouches(event)[0],
zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,
startZoomFactor = this.zoomFactor,
updateProgress = (function (progress) {
this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
}).bind(this);
if (this.hasInteraction) {
return;
}
if (startZoomFactor > zoomFactor) {
center = this.getCurrentZoomCenter();
}
this.animate(this.options.animationDuration, updateProgress, this.swing);
this.el.trigger(this.options.doubleTapEventName);
},
/**
* Max / min values for the offset
* @param offset
* @return {Object} the sanitized offset
*/
sanitizeOffset: function (offset) {
var maxX = (this.zoomFactor - 1) * this.getContainerX(),
maxY = (this.zoomFactor - 1) * this.getContainerY(),
maxOffsetX = Math.max(maxX, 0),
maxOffsetY = Math.max(maxY, 0),
minOffsetX = Math.min(maxX, 0),
minOffsetY = Math.min(maxY, 0);
return {
x: Math.min(Math.max(offset.x, minOffsetX), maxOffsetX),
y: Math.min(Math.max(offset.y, minOffsetY), maxOffsetY)
};
},
/**
* Scale to a specific zoom factor (not relative)
* @param zoomFactor
* @param center
*/
scaleTo: function (zoomFactor, center) {
this.scale(zoomFactor / this.zoomFactor, center);
},
/**
* Scales the element from specified center
* @param scale
* @param center
*/
scale: function (scale, center) {
scale = this.scaleZoomFactor(scale);
this.addOffset({
x: (scale - 1) * (center.x + this.offset.x),
y: (scale - 1) * (center.y + this.offset.y)
});
},
/**
* Scales the zoom factor relative to current state
* @param scale
* @return the actual scale (can differ because of max min zoom factor)
*/
scaleZoomFactor: function (scale) {
var originalZoomFactor = this.zoomFactor;
this.zoomFactor *= scale;
this.zoomFactor = Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom));
return this.zoomFactor / originalZoomFactor;
},
/**
* Drags the element
* @param center
* @param lastCenter
*/
drag: function (center, lastCenter) {
if (lastCenter) {
if(this.options.lockDragAxis) {
// lock scroll to position that was changed the most
if(Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {
this.addOffset({
x: -(center.x - lastCenter.x),
y: 0
});
}
else {
this.addOffset({
y: -(center.y - lastCenter.y),
x: 0
});
}
}
else {
this.addOffset({
y: -(center.y - lastCenter.y),
x: -(center.x - lastCenter.x)
});
}
}
},
/**
* Calculates the touch center of multiple touches
* @param touches
* @return {Object}
*/
getTouchCenter: function (touches) {
return this.getVectorAvg(touches);
},
/**
* Calculates the average of multiple vectors (x, y values)
*/
getVectorAvg: function (vectors) {
return {
x: vectors.map(function (v) { return v.x; }).reduce(sum) / vectors.length,
y: vectors.map(function (v) { return v.y; }).reduce(sum) / vectors.length
};
},
/**
* Adds an offset
* @param offset the offset to add
* @return return true when the offset change was accepted
*/
addOffset: function (offset) {
this.offset = {
x: this.offset.x + offset.x,
y: this.offset.y + offset.y
};
},
sanitize: function () {
if (this.zoomFactor < this.options.zoomOutFactor) {
this.zoomOutAnimation();
} else if (this.isInsaneOffset(this.offset)) {
this.sanitizeOffsetAnimation();
}
},
/**
* Checks if the offset is ok with the current zoom factor
* @param offset
* @return {Boolean}
*/
isInsaneOffset: function (offset) {
var sanitizedOffset = this.sanitizeOffset(offset);
return sanitizedOffset.x !== offset.x ||
sanitizedOffset.y !== offset.y;
},
/**
* Creates an animation moving to a sane offset
*/
sanitizeOffsetAnimation: function () {
var targetOffset = this.sanitizeOffset(this.offset),
startOffset = {
x: this.offset.x,
y: this.offset.y
},
updateProgress = (function (progress) {
this.offset.x = startOffset.x + progress * (targetOffset.x - startOffset.x);
this.offset.y = startOffset.y + progress * (targetOffset.y - startOffset.y);
this.update();
}).bind(this);
this.animate(
this.options.animationDuration,
updateProgress,
this.swing
);
},
/**
* Zooms back to the original position,
* (no offset and zoom factor 1)
*/
zoomOutAnimation: function () {
var startZoomFactor = this.zoomFactor,
zoomFactor = 1,
center = this.getCurrentZoomCenter(),
updateProgress = (function (progress) {
this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
}).bind(this);
this.animate(
this.options.animationDuration,
updateProgress,
this.swing
);
},
/**
* Updates the aspect ratio
*/
updateAspectRatio: function () {
this.setContainerY(this.getContainerX() / this.getAspectRatio());
},
/**
* Calculates the initial zoom factor (for the element to fit into the container)
* @return the initial zoom factor
*/
getInitialZoomFactor: function () {
// use .offsetWidth instead of width()
// because jQuery-width() return the original width but Zepto-width() will calculate width with transform.
// the same as .height()
return this.container[0].offsetWidth / this.el[0].offsetWidth;
},
/**
* Calculates the aspect ratio of the element
* @return the aspect ratio
*/
getAspectRatio: function () {
return this.el[0].offsetWidth / this.el[0].offsetHeight;
},
/**
* Calculates the virtual zoom center for the current offset and zoom factor
* (used for reverse zoom)
* @return {Object} the current zoom center
*/
getCurrentZoomCenter: function () {
// uses following formula to calculate the zoom center x value
// offset_left / offset_right = zoomcenter_x / (container_x - zoomcenter_x)
var length = this.container[0].offsetWidth * this.zoomFactor,
offsetLeft = this.offset.x,
offsetRight = length - offsetLeft -this.container[0].offsetWidth,
widthOffsetRatio = offsetLeft / offsetRight,
centerX = widthOffsetRatio * this.container[0].offsetWidth / (widthOffsetRatio + 1),
// the same for the zoomcenter y
height = this.container[0].offsetHeight * this.zoomFactor,
offsetTop = this.offset.y,
offsetBottom = height - offsetTop - this.container[0].offsetHeight,
heightOffsetRatio = offsetTop / offsetBottom,
centerY = heightOffsetRatio * this.container[0].offsetHeight / (heightOffsetRatio + 1);
// prevents division by zero
if (offsetRight === 0) { centerX = this.container[0].offsetWidth; }
if (offsetBottom === 0) { centerY = this.container[0].offsetHeight; }
return {
x: centerX,
y: centerY
};
},
canDrag: function () {
return !isCloseTo(this.zoomFactor, 1);
},
/**
* Returns the touches of an event relative to the container offset
* @param event
* @return array touches
*/
getTouches: function (event) {
var position = this.container.offset();
return Array.prototype.slice.call(event.touches).map(function (touch) {
return {
x: touch.pageX - position.left,
y: touch.pageY - position.top
};
});
},
/**
* Animation loop
* does not support simultaneous animations
* @param duration
* @param framefn
* @param timefn
* @param callback
*/
animate: function (duration, framefn, timefn, callback) {
var startTime = new Date().getTime(),
renderFrame = (function () {
if (!this.inAnimation) { return; }
var frameTime = new Date().getTime() - startTime,
progress = frameTime / duration;
if (frameTime >= duration) {
framefn(1);
if (callback) {
callback();
}
this.update();
this.stopAnimation();
this.update();
} else {
if (timefn) {
progress = timefn(progress);
}
framefn(progress);
this.update();
requestAnimationFrame(renderFrame);
}
}).bind(this);
this.inAnimation = true;
requestAnimationFrame(renderFrame);
},
/**
* Stops the animation
*/
stopAnimation: function () {
this.inAnimation = false;
},
/**
* Swing timing function for animations
* @param p
* @return {Number}
*/
swing: function (p) {
return -Math.cos(p * Math.PI) / 2 + 0.5;
},
getContainerX: function () {
return this.container[0].offsetWidth;
},
getContainerY: function () {
return this.container[0].offsetHeight;
},
setContainerY: function (y) {
return this.container.height(y);
},
/**
* Creates the expected html structure
*/
setupMarkup: function () {
this.container = $('<div class="pinch-zoom-container"></div>');
this.el.before(this.container);
this.container.append(this.el);
this.container.css({
'overflow': 'hidden',
'position': 'relative'
});
// Zepto doesn't recognize `webkitTransform..` style
this.el.css({
'-webkit-transform-origin': '0% 0%',
'-moz-transform-origin': '0% 0%',
'-ms-transform-origin': '0% 0%',
'-o-transform-origin': '0% 0%',
'transform-origin': '0% 0%',
'position': 'absolute'
});
},
end: function () {
this.hasInteraction = false;
this.sanitize();
this.update();
},
/**
* Binds all required event listeners
*/
bindEvents: function () {
detectGestures(this.container.get(0), this);
// Zepto and jQuery both know about `on`
$(window).on('resize', this.update.bind(this));
$(this.el).find('img').on('load', this.update.bind(this));
},
/**
* Updates the css values according to the current zoom factor and offset
*/
update: function () {
if (this.updatePlaned) {
return;
}
this.updatePlaned = true;
setTimeout((function () {
this.updatePlaned = false;
this.updateAspectRatio();
var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,
offsetX = -this.offset.x / zoomFactor,
offsetY = -this.offset.y / zoomFactor,
transform3d = 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1) ' +
'translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)',
transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' +
'translate(' + offsetX + 'px,' + offsetY + 'px)',
removeClone = (function () {
if (this.clone) {
this.clone.remove();
delete this.clone;
}
}).bind(this);
// Scale 3d and translate3d are faster (at least on ios)
// but they also reduce the quality.
// PinchZoom uses the 3d transformations during interactions
// after interactions it falls back to 2d transformations
if (!this.options.use2d || this.hasInteraction || this.inAnimation) {
this.is3d = true;
removeClone();
this.el.css({
'-webkit-transform': transform3d,
'-o-transform': transform2d,
'-ms-transform': transform2d,
'-moz-transform': transform2d,
'transform': transform3d
});
} else {
// When changing from 3d to 2d transform webkit has some glitches.
// To avoid this, a copy of the 3d transformed element is displayed in the
// foreground while the element is converted from 3d to 2d transform
if (this.is3d) {
this.clone = this.el.clone();
this.clone.css('pointer-events', 'none');
this.clone.appendTo(this.container);
setTimeout(removeClone, 200);
}
this.el.css({
'-webkit-transform': transform2d,
'-o-transform': transform2d,
'-ms-transform': transform2d,
'-moz-transform': transform2d,
'transform': transform2d
});
this.is3d = false;
}
}).bind(this), 0);
},
/**
* Enables event handling for gestures
*/
enable: function() {
this.enabled = true;
},
/**
* Disables event handling for gestures
*/
disable: function() {
this.enabled = false;
}
};
var detectGestures = function (el, target) {
var interaction = null,
fingers = 0,
lastTouchStart = null,
startTouches = null,
setInteraction = function (newInteraction, event) {
if (interaction !== newInteraction) {
if (interaction && !newInteraction) {
switch (interaction) {
case "zoom":
target.handleZoomEnd(event);
break;
case 'drag':
target.handleDragEnd(event);
break;
}
}
switch (newInteraction) {
case 'zoom':
target.handleZoomStart(event);
break;
case 'drag':
target.handleDragStart(event);
break;
}
}
interaction = newInteraction;
},
updateInteraction = function (event) {
if (fingers === 2) {
setInteraction('zoom');
} else if (fingers === 1 && target.canDrag()) {
setInteraction('drag', event);
} else {
setInteraction(null, event);
}
},
targetTouches = function (touches) {
return Array.prototype.slice.call(touches).map(function (touch) {
return {
x: touch.pageX,
y: touch.pageY
};
});
},
getDistance = function (a, b) {
var x, y;
x = a.x - b.x;
y = a.y - b.y;
return Math.sqrt(x * x + y * y);
},
calculateScale = function (startTouches, endTouches) {
var startDistance = getDistance(startTouches[0], startTouches[1]),
endDistance = getDistance(endTouches[0], endTouches[1]);
return endDistance / startDistance;
},
cancelEvent = function (event) {
event.stopPropagation();
event.preventDefault();
},
detectDoubleTap = function (event) {
var time = (new Date()).getTime();
if (fingers > 1) {
lastTouchStart = null;
}
if (time - lastTouchStart < 300) {
cancelEvent(event);
target.handleDoubleTap(event);
switch (interaction) {
case "zoom":
target.handleZoomEnd(event);
break;
case 'drag':
target.handleDragEnd(event);
break;
}
}
if (fingers === 1) {
lastTouchStart = time;
}
},
firstMove = true;
el.addEventListener('touchstart', function (event) {
if(target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});
el.addEventListener('touchmove', function (event) {
if(target.enabled) {
if (firstMove) {
updateInteraction(event);
if (interaction) {
cancelEvent(event);
}
startTouches = targetTouches(event.touches);
} else {
switch (interaction) {
case 'zoom':
target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));
break;
case 'drag':
target.handleDrag(event);
break;
}
if (interaction) {
cancelEvent(event);
target.update();
}
}
firstMove = false;
}
});
el.addEventListener('touchend', function (event) {
if(target.enabled) {
fingers = event.touches.length;
updateInteraction(event);
}
});
};
return PinchZoom;
};
if (typeof define !== 'undefined' && define.amd) {
define(['jquery'], function ($) {
return definePinchZoom($);
});
} else {
window.RTP = window.RTP || {};
window.RTP.PinchZoom = definePinchZoom(window.$);
}
}).call(this);
pc 端 滚轮缩放图片 1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } body { background: -webkit-linear-gradient(top, transparent 99px, #f1f1f1 99px), -webkit-linear-gradient(left, transparent 99px, #f1f1f1 99px); background-size: 100px 100px; } .container { width: 600px; position: relative; height: 400px; border: 1px solid red; margin-top: 200px; margin-left: 300px; background: -webkit-linear-gradient(top, transparent 99px, #ccc 99px), -webkit-linear-gradient(left, transparent 99px, #ccc 99px); background-size: 100px 100px; } .container img { position: absolute; top: 0; left: 0; width: 300px; height: 200px; object-fit: cover; transform-origin: 0% 0%; opacity: 0.8; } .lo77g { position: absolute; top: 20px; right: 20px; width: 200px; height: 100px; } .red { position: absolute; top: 0; left: 0; width: 6px; height: 6px; background-color: red; border-radius: 6px; z-index: 888; } </style> </head> <body> <div class="container"> <img id="img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"> <div class="red"></div> </div> <div> <p>思路</p> <p>开始位置为p1(200,100)，</p> <p>放大两倍后 位置为p2(400,200)，</p> <p>我们再将p2移动到p1，就完成了位置的修正，</p> <p>实现了以鼠标为中心缩放</p> <p>参考链接：https://juejin.cn/post/7296692047417737226</p> </div> <div class="lo77g"></div> <script> let scale = 1 //缩放倍率 let lasts = 1 let minL = 0.5 let maxL = 10; const lo77g = document.querySelector('.lo77g'); const img = document.getElementById('img') const red = document.querySelector('.red'); var container = document.querySelector('.container'); function getElementCenter(element) { const rect = element.getBoundingClientRect(); const centerX = rect.left + (rect.width / 2); const centerY = rect.top + (rect.height / 2); return { centerX, centerY }; } function wheelZoom(img) { container.addEventListener('mousewheel', function(e) { var clientX = e.clientX; var clientY = e.clientY; var d = e.deltaY < 0 ? 0.1 : -0.1; var ratio = 1 + d; scale = scale * ratio; scale = Math.min(Math.max(minL, scale), maxL); //console.log("e.target.tagName", img.style.top) var sourceTop = +img.style.top.slice(0, -2) var sourceLeft = +img.style.left.slice(0, -2) var rect = container.getBoundingClientRect() //不是图片滚轮 默认鼠标位置 放在图片中心点上 if (e.target.tagName.toLowerCase() !== "img") { clientX = getElementCenter(img).centerX; clientY = getElementCenter(img).centerY; //console.log("假设在 图片中心点", clientX, clientY, "re22ct", getElementCenter(img)) } var x = clientX - rect.left; var y = clientY - rect.top; lo77g.innerHTML = "clientX" + clientX + "<br>clientY" + clientY + "<br>image 的origin x" + x + "<br>image 的origin Y" + y; //缩放前，鼠标位置相对图片缩放为1时的位置 var origin = getSourePosition(img, lasts, x, y) var x2 = origin.x2; var y2 = origin.y2; lo77g.innerHTML = "<br>e.clientX" + clientX.toFixed(2) + "<br>e.clientY" + clientY.toFixed(2) + "<br>原始 的origin x" + x.toFixed(2) + "<br>原始 的origin Y" + y.toFixed(2) // 缩放后，图片需要的位移 var nowPos = getXY(scale, x, y, x2, y2) var x4 = nowPos.x4; var y4 = nowPos.y4; //设置位置 setPosition(img, x4, y4, scale); lasts = scale }) } // 图片加载完成后再绑定事件 img.addEventListener('load', function() { img.style.left = img.width / 2 + "px" img.style.top = img.height / 2 + "px" wheelZoom(img) drag(img) }); //缩放前，鼠标位置相对图片缩放为1时的位置 function getSourePosition(el, scale, x, y) { var sourceTop = +el.style.top.slice(0, -2) var sourceLeft = +el.style.left.slice(0, -2) var x2 = (x - sourceLeft) / scale; var y2 = (y - sourceTop) / scale; red.style.left = x2 + 'px'; red.style.top = y2 + 'px'; red.innerHTML = x2.toFixed(2) + "<br>" + y2.toFixed(2) return { x2, y2 } } // 缩放后，图片需要的位移 function getXY(scale, x, y, x2, y2) { // 缩放后的位置 var x3 = x2 * scale var y3 = y2 * scale // 缩放后的位置移动到鼠标位置，需要的位移 var x4 = x - x3 var y4 = y - y3 console.log("缩放后，原先x", x, "缩放后的位置x3", x3, "差值x4", x4) return { x4, y4 } } // 设置图片位置 const setPosition = (el, x4, y4, scale) => { el.style.left = `${x4}px` el.style.top = `${y4}px` el.style.transform = `scale(${scale})` } // 拖拽查看 function drag(image) { // 绑定 pointerdown image.addEventListener('mousedown', function(e) { //console.log("mousedown", e.clientX, e.clientY) var offsetx = e.clientX - image.offsetLeft; var offsety = e.clientY - image.offsetTop; document.addEventListener('mousemove', move2, false); document.addEventListener('mouseup', up2, false); function move2(e) { var x = e.clientX - offsetx; var y = e.clientY - offsety; image.style.transform = 'scale(' + scale + ')'; image.style.left = x + 'px'; image.style.top = y + 'px'; } function up2(e) { move2(e) // 绑定 pointermove document.removeEventListener('mousemove', move2, false); // 绑定 pointerup document.removeEventListener('mouseup', up2, false); } e.stopPropagation && e.stopPropagation(); e.preventDefault && e.preventDefault(); return false; }); } </script> </body> </html>
pc 端 滚轮缩放图片 2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } body { background: -webkit-linear-gradient(top, transparent 99px, #f1f1f1 99px), -webkit-linear-gradient(left, transparent 99px, #f1f1f1 99px); background-size: 100px 100px; } .container { width: 400px; height: 400px; overflow: hidden; position: relative; border: 1px solid red; margin-top: 200px; margin-left: 300px; } .image { width: 100%; height: 100%; transition: transform .3s; transform-origin: 0 0; } img { width: auto; height: auto; max-width: 100%; } </style> <div class="container"> <div class="image"> <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" /> </div> </div> <script> const container = document.querySelector('.container'); const image = document.querySelector('.image'); let size = { w: image.offsetWidth, h: image.offsetHeight }; let pos = { x: 0, y: 0 }; let target = { x: 0, y: 0 }; let pointer = { x: 0, y: 0 }; let scale = 1; drag(image) window.addEventListener('wheel', event => { event.preventDefault(); pointer.x = event.pageX - container.offsetLeft; pointer.y = event.pageY - container.offsetTop; target.x = (pointer.x - pos.x) / scale; target.y = (pointer.y - pos.y) / scale; scale += -1 * Math.max(-1, Math.min(1, event.deltaY)) * 0.5 * scale; scale = Math.max(1, Math.min(5, scale)); pos.x = -target.x * scale + pointer.x; pos.y = -target.y * scale + pointer.y; // if (pos.x > 0) pos.x = 0; // if (pos.x + size.w * scale < size.w) pos.x = -size.w * (scale - 1); // if (pos.y > 0) pos.y = 0; // if (pos.y + size.h * scale < size.h) pos.y = -size.h * (scale - 1); image.style.transform = `translate(${pos.x}px,${pos.y}px) scale(${scale},${scale})`; }, { passive: false }); function getTransLate(transform) { let tx = 0, ty = 0 if (transform === '') { return { tx, ty } } else { tx = transform.split(' ')[0].replaceAll('translate(', '').replaceAll('px,', '') ty = transform.split(' ')[1].replaceAll('px)', '') return { tx, ty } } } // 拖拽查看 function drag(image) { // 绑定 pointerdown image.addEventListener('mousedown', function(e) { console.log("mousedown", e.clientX, e.clientY) var trs = getTransLate(image.style.transform) // var offsetx = e.clientX - image.offsetLeft; // var offsety = e.clientY - image.offsetTop; var offsetx = e.clientX - trs.tx; var offsety = e.clientY - trs.ty; image.style.transition = "null"; document.addEventListener('mousemove', move2, false); document.addEventListener('mouseup', up2, false); function move2(e) { var x = e.clientX - offsetx; var y = e.clientY - offsety; //image.style.transform = 'scale(' + scale + ')'; // image.style.left = x + 'px'; // image.style.top = y + 'px'; image.style.transform = `translate(${x}px,${y}px) scale(${scale},${scale})`; pos.x = x; pos.y = y } function up2(e) { move2(e) // 绑定 pointermove document.removeEventListener('mousemove', move2, false); // 绑定 pointerup document.removeEventListener('mouseup', up2, false); image.style.transition = "transform .3s"; } e.stopPropagation && e.stopPropagation(); e.preventDefault && e.preventDefault(); return false; }); } </script> </body> </html>
pc 端 滚轮缩放图片 3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } body { background: -webkit-linear-gradient(top, transparent 99px, #f1f1f1 99px), -webkit-linear-gradient(left, transparent 99px, #f1f1f1 99px); background-size: 100px 100px; } .container { width: 700px; position: relative; height: 500px; border: 1px solid red; margin-top: 200px; margin-left: 300px; background: -webkit-linear-gradient(top, transparent 99px, #ccc 99px), -webkit-linear-gradient(left, transparent 99px, #ccc 99px); background-size: 100px 100px; } .container img { position: absolute; top: 0; left: 0; width: 300px; height: 200px; object-fit: cover; transform-origin: 0% 0%; opacity: 0.8; z-index: 9; } .p1 { position: absolute; top: 0; left: 0; color: #333; border-radius: 6px; z-index: 188; font-size: 12px; height: 14px; line-height: 14px; padding-left: 6px; } .p1:before { content: ""; position: absolute; top: 3px; left: 0; width: 4px; height: 4px; background-color: #333; border-radius: 4px; } .p2 { position: absolute; top: 0; left: 0; color: red; border-radius: 6px; z-index: 288; font-size: 12px; height: 14px; line-height: 14px; padding-left: 6px; } .p2:before { content: ""; position: absolute; top: 3px; left: 0; width: 4px; height: 4px; background-color: red; border-radius: 4px; } .start { position: absolute; top: 0; left: 0; width: 300px; height: 200px; opacity: 0.3; background-color: #999; } </style> </head> <body> <div class="container"> <img id="img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"> <div class="p1"></div> <div class="start"></div> <div class="p2"></div> </div> <div> <p>思路</p> <p>开始位置为p1(200,100)，</p> <p>放大两倍后 位置为p2(400,200)，</p> <p>我们再将p2移动到p1，就完成了位置的修正，</p> <p>实现了以鼠标为中心缩放</p> <p>参考链接：https://juejin.cn/post/7296692047417737226</p> </div> <script> var scale = 1 //缩放倍率 var minL = 0.2 var maxL = 10; var speed = 0.2; var nowPos = { x: 0, y: 0 } var pointPos = { x: 0, y: 0 } var size = { w: 0, h: 0 }; const img = document.getElementById('img') const p1 = document.querySelector('.p1'); const p2 = document.querySelector('.p2'); var container = document.querySelector('.container'); function getElementCenter(element) { const rect = element.getBoundingClientRect(); const centerX = rect.left + (rect.width / 2); const centerY = rect.top + (rect.height / 2); //console.log("rect", rect) return { centerX, centerY, rect }; } function wheelZoom(img) { container.addEventListener('mousewheel', function(e) { var clientX = e.clientX; var clientY = e.clientY; //不是图片滚轮 默认鼠标位置 放在图片中心点上 if (e.target.tagName.toLowerCase() !== "img") { var imgCenter = getElementCenter(img); clientX = imgCenter.centerX; clientY = imgCenter.centerY; //console.log("假设在 图片中心点", clientX, clientY, "--imgCenter", imgCenter) } pointPos.x = clientX - container.offsetLeft; pointPos.y = clientY - container.offsetTop; //缩放前，鼠标位置相对图片缩放为1时的位置 var x2 = (pointPos.x - nowPos.x) / scale; var y2 = (pointPos.y - nowPos.y) / scale; showLog(p1, 1, x2, y2) //scale += -1 * Math.max(-1, Math.min(1, e.deltaY)) * speed * scale; var d = e.deltaY < 0 ? speed : -speed; var ratio = 1 + d; scale = scale * ratio; scale = Math.max(minL, Math.min(maxL, scale)); // 缩放后，图片需要的位移 nowPos.x = -x2 * scale + pointPos.x; nowPos.y = -y2 * scale + pointPos.y; showLog(p2, 2, x2 * scale, y2 * scale) //设置位置 img.style.transition = "transform .3s"; img.style.transform = `translate(${nowPos.x}px,${nowPos.y}px) scale(${scale},${scale})`; e.stopPropagation && e.stopPropagation(); e.preventDefault && e.preventDefault(); return false; }) } // 图片加载完成后再绑定事件 img.addEventListener('load', function() { size = { w: img.offsetWidth, h: img.offsetHeight }; nowPos.x = container.offsetWidth / 2 - img.width / 2 nowPos.y = container.offsetHeight / 2 - img.height / 2 // console.log("load", x, y) img.style.transition = "none"; img.style.transform = `translate(${nowPos.x}px,${nowPos.y}px) scale(${scale},${scale})`; wheelZoom(img) drag(img) }); function showLog(ele, num, x2, y2) { var p2 = ele; var num = num || 1 p2.style.left = x2 + 'px'; p2.style.top = y2 + 'px'; p2.innerHTML = "P" + num + " (" + x2.toFixed(0) + "," + y2.toFixed(0) + ")"; } function getTransLate(transform) { let tx = 0, ty = 0 if (transform) { tx = transform.split(' ')[0].replaceAll('translate(', '').replaceAll('px,', '') ty = transform.split(' ')[1].replaceAll('px)', '') } return { tx, ty } } // 拖拽查看 function drag(image) { // 绑定 pointerdown image.addEventListener('mousedown', function(e) { //console.log("mousedown", e.clientX, e.clientY) var trs = getTransLate(image.style.transform) // var offsetx = e.clientX - image.offsetLeft; // var offsety = e.clientY - image.offsetTop; var offsetx = e.clientX - trs.tx; var offsety = e.clientY - trs.ty; image.style.transition = "none"; document.addEventListener('mousemove', move2, false); document.addEventListener('mouseup', up2, false); function move2(e) { var x = e.clientX - offsetx; var y = e.clientY - offsety; nowPos.x = x; nowPos.y = y; image.style.transform = `translate(${x}px,${y}px) scale(${scale},${scale})`; } function up2(e) { move2(e) // 绑定 pointermove document.removeEventListener('mousemove', move2, false); // 绑定 pointerup document.removeEventListener('mouseup', up2, false); //image.style.transition = "transform .3s"; } e.stopPropagation && e.stopPropagation(); e.preventDefault && e.preventDefault(); return false; }); } </script> </body> </html>
