手机端图片放大，双指放大，元素的双指缩放

偏执的太偏执、 2022-05-20 03:08 246阅读 0赞

在做webapp时候，遇到一个需要做双指放大的功能，需求是：一张带有坐标的图片上有固定的点，需要点击这些坐标上的点进入相应的商品，并且需要对这一块进行双指可以缩放，双击缩放；

一开始是自己写监听touch事件进行处理，但是再缩放的时候，偶尔出现卡顿闪烁，用户体验不很好，后来采用插件

pinch-zoom GitHub地址： [https://github.com/manuelstofer/pinchzoom][https_github.com_manuelstofer_pinchzoom]

所以就简单写了一个demo；用于测试一下，顺便练习一下；

需要使用的图片 图片w:800px,h:560px;

![70][]

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<meta name="apple-mobile-web-app-capable" content="yes" />
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		<script src="../js/mui.min.js"></script>
    		<script type="text/javascript" src="../js/pinch-zoom.umd.js"></script>
    		<style type="text/css">
    			.img_box {
    				width: 100%;
    				height: 400px;
    				overflow: auto;
    				background: grey;
    			}
    			.imga{
    				position: relative
    			}
    			.clickBox{
    				position: absolute;
    				top: 239px;
    				left: 435px;
    				z-index: 2;
    				width: 30px;
    				height: 30px;
    				background: red;
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<div class="mui-content">
    			<div class="img_box">
    				<div id="imga">
    					<img src="图片地址"   />
    					<div class="clickBox" onclick="fn1()"></div>
    				</div>
    			</div>
    
    		</div>
    
    		<script type="text/javascript">
    			var el = document.getElementById("imga");
    			new PinchZoom.default(el, {});
    			var imga = document.getElementById("imga");
    			imga.onclick = function(event) {
    				console.log(event)
    				var e = event || window.event;
    				console.log(e.screenX)
    			}
    
    			var img_url = '图片地址'
    			// 创建对象
    			var img = new Image()
    			// 改变图片的src
    			img.src = img_url
    			// 判断是否有缓存
    			if(img.complete) {
    				// 打印
    				console.log('from:complete : width:' + img.width + ',height:' + img.height)
    			} else {
    				// 加载完成执行
    				img.onload = function() {
    					// 打印
    					console.log('width:' + img.width + ',height:' + img.height)
    				}
    			}
    			function fn1(){
    				alert(6666)
    			}
    		</script>
    
    	</body>
    
    </html>

图上红块为点击点，固定坐标，使用插件，方便处就是不用处理定位的块；它会随着缩放自动变换，这样就可以绑定事件进行一系列的操作；

![70 1][]

事件点击后

![70 2][]

附上

pinch-zoom.umd.js

[https_github.com_manuelstofer_pinchzoom]: https://github.com/manuelstofer/pinchzoom
[70]: /images/20220520/daa592ac6c854e66b50ace67f6adf532.png
[70 1]: /images/20220520/d20add54594a4936a8f2bf608c760da4.png
[70 2]: /images/20220520/8ac9421a26bb40c6adeaa4d203e9df75.png