使用hammer.js实现图片手势缩放及算法解释

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29729735/article/details/88578949

关于图片缩放,大家可能会想到的是使用transform:scale(x,y)进行对元素的缩放。
但是对于手势缩放的过程中,我们需要在进行缩放的同时,并且要保证双指之间的中心点一直保持在原来的位置,这是我们需要配合使用translate(x,y)来进行位置的调整。但如何计算得到translate(x,y)中的值呢?

其实除去translate,scale的 transform 属性外,我们还可以通过 矩阵matrix(a,b,c,d,e,f) 进行2D转换。具体可以参考张鑫旭老师的博客理解 CSS3 transform中的Matrix(矩阵)

根据老师的博客,可以知道matrix(a,b,c,d,e,f) 中的参数a、d分别代表水平方向(x)和垂直方向(y)的放大倍数 相当于scale(a,d) ,e、f分别表示水平方向(x)和垂直方向(y)的偏移值 相当于translate(e,f) ,b、c本篇没有用到,不作解释。

元素中的某个点 (x,y) 通过matrix(a,b,c,d,e,f)转换后,新的坐标为 (ax+cy+e, bx+dy+f)

值得注意的是,元素的变换会根据某个原点来进行变换,而这个原点可以根据transform-origin来设置,默认是元素的正中心,即元素的X轴和Y轴的50%。

为了方便计算,我们把元素铺满整个屏幕。

元素的变换过程:
第一次变换:
1、初始化矩阵matrix(1,0,0,1,0,0),分别对应matrix(a,b,c,d,e,f)
2、获取元素中心的 center(x,y)
3、获取双指的中心point(x,y)
4、双指滑动,然后获取缩放倍数scale(这个scale是双指当前在屏幕坐标之间的距离d1与第一次触碰屏幕时的距离d2的比,即d1/d2,这个hammer.js已经帮你算好了)
5、缩放后,原来双指的中心点会偏移,新坐标与原点在x轴上的距离是(point.x-center.x) * scale,同理新坐标与原点在y轴上距离为(point.y-center.y)*scale,由于原点在屏幕上的坐标并不是(0,0),所以新的坐标必须加上原点的偏移值,新的坐标newpoint(x,y):

newpoint.x = scale * (point.x-center.x) + 0 * (point.y-center.y) + 0 + center.x  
           = scale * point.x - scale * center.x + center.x
           = scale * point.x - (scale - 1) * center.x
newpoint.y = 0 * (point.x-center.x) + scale * (point.y-center.y) + 0 +  center.y
           = scale * point.y - scale * center.y + center.y
           = scale * point.y - (scale - 1) * center.y

6、缩放后,如果想要新的坐标回到最初的位置,需要计算偏移值,point(x,y) - newpoint(x,y),通过以下计算可以知道缩放后,如果想要新的坐标回到起初的位置,需要水平偏移(1 - 缩放倍数)* 起初位置与原点的水平距离 同理,垂直方向偏移(1 - 缩放倍数)* 起初位置与原点的垂直距离

point.x - newpoint.x = point.x - [scale * point.x - (scale - 1) * center.x]
                     = point.x - scale * point.x + (scale - 1) * center.x
                     = (1 - scale) * point.x + (scale - 1) * center.x
                     = (1 - scale) * (point.x - center.x)
同理
point.y - newpoint.y = (1 - scale) * (point.y - center.y)

7、通过矩阵变换

matrix( scale, 0, 0, scale,  (1 - scale) * (point.x - center.x),  (1 - scale) * (point.y - center.y) )
其中  
     a = d = scale,
     e = (1 - scale) * (point.x - center.x) ,
     f = (1 - scale) * (point.y - center.y)
     

配上图,自己意会。
在这里插入图片描述
第一次变换比较简单,第二次之后就要考虑前边的缩放,还有偏移值了。
第二次之后的变换,要注意三点:
1、实际的缩放倍数是:当前操作的倍数乘以上一次操作后的倍数。
2、作为变换依据的原点也偏移了,偏移值为上一次操作后的偏移值。
3、新的偏移值:当前操作后的偏移值要加上上一次操作后的偏移值。
4、在触摸屏幕(touchstart)一瞬间记录一些初始值:lastScale(上一轮操作缩放倍数),nowCenter(新的变换依据点坐标),poscenter(当前触摸中心点与新的依据点的水平和垂直距离)。
5、缩放过程中,当前的实际倍数是当前倍数操作倍数(双指当前在屏幕坐标之间的距离d1与第一次触碰屏幕时的距离d2的比 scale) 乘以 上一轮操作缩放倍数(lastScale)。
6、需要偏移的值:(1 - 当前操作倍数) * 新的触摸中心点与新的中心原点的距离 + 上一轮的偏移值。

第二次之后变换:

我们把matrix看成一个数组
tMatrix = [a, b, c, d, e, f]

lastScale = tMatrix[0]  //上一次的缩放倍数
lastTranslate = { x : tMatrix[4], y : tMartix[5] } //上一次的偏移值
nowCenter = { x : center.x +lastTranslate.x ,  y : center.y + lastTranslate.y } //重新计算后当前操作的依据点
nowScale = lastScale * scale //当前实际倍数为上次的倍数乘以当前操作的倍数(如果表达不清楚请见谅)

poscenter = { x : ev.center.x - nowCenter .x,  y :  ev.center.y - nowCenter .y} //触摸中心点到新的依据点的水平和垂直距离

newX = (1 - scale) * poscenter.x + lastTranslate.x //新的水平偏移值
newY = (1 - scale) * poscenter.y + lastTranslate.y //新的垂直偏移值

最后tMatrix的值
tMatrix = [nowScale, 0, 0, nowScale, newX, newY ]

总结

最后的公式为:

tMatrix = [a, b, c, d, e, f]

nowScale表示当前缩放倍数
lastScale表示上一次缩放操作的次数(初次操作时1)
lastTranslate表示上一次元素的偏移值,初次是(0,0)
p表示当前单指触摸的坐标或者双指触摸点之间的中心坐标
c表示初始时图像或内容框的中心坐标

a = b = nowScale * lastScale
e = ( 1 - nowScale ) * (p.x - ( c.x + lastTranslate.x ) + lastTranslate.x
f = ( 1 - nowScale ) * (p.y - ( c.x + lastTranslate.y ) + lastTranslate.y
Matrix = [a, b, 0, 0, e, f],通过矩阵变换


缩放操作完成后
lastTranslate.x = e
lastTranslate.y = f
lastScale = a

代码如下,源码放在

<!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{
			height:100%;
			width:100%;
			margin:0;
			padding:0;
		}
		#scale{
			position:absolute;
			background:#54a;
			overflow: hidden;
			top:0;
			bottom:0;
			left:0;
			right:0;
		}
		#scale img{
			transition: 0s ease all;
			position:absolute;
			top:0;
		}
	</style>
	 <script src="./Script/hammer.js"></script>
</head>
<body>
<div id="scale">
	<img id="img1" src="timg1.jpg" alt="">
</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);
    };
})();


var tMatrix = [1,0,0,1,0,0]//x缩放,无,无,y缩放,x平移,y平移

var initScale = 1;//初始化scale
var el =  document.getElementById("img1");//获取元素
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 }))
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);

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
		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
	requestElementUpdate('onpinch');	
}

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;
    }
}

/**
初始化设置
*/

requestElementUpdate();

</script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页