<!DOCTYPE html>
<html>
<head>
<title>图片缩放</title>
<meta 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">
<style type="text/css">
html,body,.scale,.scale img {margin: 0;padding: 0;}
html,body {width: 100%;height: 100%;}
.scale {background: #54a; overflow: hidden;width: 100%; height: 50%;font-size: 0;}
.scale img {
pointer-events: none;
}
.flexrow {
display: flex;
justify-content: space-around;
/* space-around 两端对齐包含首尾留空 | space-between 两端对齐仅之间留空*/
/* flex-flow: column; */
flex-wrap: wrap;
/*换行*/
align-content: space-around;
/*对齐轴线 上下*/
align-items: center;
/*行对齐 上下*/
}
</style>
<script src="hammer.min.js"></script>
</head>
<body>
<div class="scale flexrow">
<div id="img1"><img src="img.jpg"></img></div>
</div>
<div class="scale flexrow">
<div id="img2"><img src="img.jpg"></img></div>
</div>
<script type="text/javascript">
function point2D(x, y) {
return { x: x, y: y };
}
var reqAnimationFrame = (function () {
return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function touchbox(el, con) {
var tMatrix = [2, 0, 0, 2, 0, 0]//x缩放，无，无，y缩放，x平移，y平移
var initScale = 1;//初始化scale
var mc = new Hammer.Manager(el)
var ticking = false
var poscenter = point2D(0, 0);//缓存双指的中心坐标
var duration = '';//设置过渡效果，用于双击缩放效果
var lastTranslate = point2D(0, 0);//记录上次的偏移值
var lastcenter = point2D(el.offsetWidth / 2, el.offsetHeight / 2)//图像的中心点，用于对比双指中心点
var center = lastcenter
mc.add(new Hammer.Pan({ threshold: 0, pointers: 1 }))
mc.add(new Hammer.Pinch({ threshold: 0, enable: true }))
mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }));
mc.on("panmove", onPan);//单手指移动时事件
mc.on("panstart", onPanStart);//单手指按下时事件
mc.on("pinchmove", onPinch);//手指缩放时触发
mc.on("pinchstart", onPinchStart);//手指缩放开始时触发
mc.on("doubletap", onDoubleTap);//双击
mc.on("pinchend", onPinchEnd);//手指缩放结束后触发
function onPanStart(ev) {
lastTranslate = point2D(tMatrix[4], tMatrix[5])//缓存上一次的偏移值
}
function onPan(ev) {
duration = ''
el.className = ''
tMatrix[4] = lastTranslate.x + ev.deltaX
tMatrix[5] = lastTranslate.y + ev.deltaY
touchArea()
requestElementUpdate('onpan');
}
//缩放
function onPinchStart(ev) {
duration = '';
lastTranslate = point2D(tMatrix[4], tMatrix[5])//记录上一次的偏移值
initScale = tMatrix[0] || 1;
poscenter = point2D(ev.center.x, ev.center.y)
lastcenter = point2D(center.x + lastTranslate.x, center.y + lastTranslate.y)//重新计算放大后的中心坐标
poscenter = point2D(ev.center.x - lastcenter.x, ev.center.y - lastcenter.y)
console.log("center", lastcenter.x, lastcenter.y)
requestElementUpdate('onpinchStart');
}
function onPinch(ev) {
var nowScale = tMatrix[0] = tMatrix[3] = initScale * ev.scale;
var composscal = (1 - ev.scale)
// tMatrix[4] = poscenter.x - ((poscenter.x - lastcenter.x) * ev.scale + lastcenter.x) + lastTranslate.x//最后加上上一次的偏移值
// tMatrix[5] = poscenter.y - ((poscenter.y - lastcenter.y) * ev.scale + lastcenter.y) + lastTranslate.y
tMatrix[4] = (1 - ev.scale) * poscenter.x + lastTranslate.x
tMatrix[5] = (1 - ev.scale) * poscenter.y + lastTranslate.y
touchArea()
requestElementUpdate('onpinch');
}
function onPinchEnd(ev) {
var nowScale = tMatrix[0];
//最大放大倍数
var maxScale = 4;
var minScale = 0.5;
//如果现在放大倍数大于最大放大倍数
if (nowScale > maxScale) {
tMatrix[0] = tMatrix[3] = maxScale
} else if(nowScale < minScale){
tMatrix[0] = tMatrix[3] = minScale
}
touchArea()
requestElementUpdate('pinchend');
}
function onDoubleTap(ev) {
duration = ".3s ease all";
var nowScale = tMatrix[0];
if (nowScale != 1 || tMatrix[4] != 0) {
//scale不等于1，要重回1
tMatrix[0] = tMatrix[3] = 1;
tMatrix[4] = tMatrix[5] = 0;
} else {
var pointer = ev.center
var scale = 2
tMatrix[0] = tMatrix[3] = scale
//var last = point2D
//tMatrix[4] = pointer.x - ((pointer.x-lastcenter.x) * scale + lastcenter.x);
//tMatrix[5] = pointer.y - ((pointer.y-lastcenter.y) * scale + lastcenter.y);
tMatrix[4] = (1 - scale) * (pointer.x - center.x)
tMatrix[5] = (1 - scale) * (pointer.y - center.y)
}
requestElementUpdate('doubleTap');
}
function updateElementTransform() {
el.style.transition = duration
var tmp = tMatrix.join(',')
console.log(tmp)
el.style.transform = 'matrix(' + tmp + ')';
ticking = false;
}
function requestElementUpdate() {
arguments && console.log(arguments[0])
if (!ticking) {
reqAnimationFrame(updateElementTransform);
ticking = true;
}
}
function touchArea() {
//限制拖拽区域
var xx = (tMatrix[0] * el.offsetWidth - con.clientWidth) * .5
if (tMatrix[0] * el.offsetWidth < con.clientWidth) {
tMatrix[4] = 0;
} else if (tMatrix[4] > xx) {
tMatrix[4] = xx;
} else if (tMatrix[4] < -xx) {
tMatrix[4] = -xx;
}
var yy = (tMatrix[3] * el.offsetHeight - con.clientHeight) * .5
if (tMatrix[3] * el.offsetHeight < con.clientHeight) {
tMatrix[5] = 0;
} else if (tMatrix[5] > yy) {
tMatrix[5] = yy;
} else if (tMatrix[5] < -yy) {
tMatrix[5] = -yy;
}
}
requestElementUpdate();
}
new touchbox(document.getElementById("img1"), document.querySelectorAll(".scale")[0])
new touchbox(document.getElementById("img2"), document.querySelectorAll(".scale")[1])
</script>
</body>
</html>来自：https://blog.csdn.net/qq_29729735/article/details/88578949
Comments | NOTHING