移动端手势操作库pinchzoom，图片捏合放大缩小

需求：移动端项目，实现图片根据手指的捏合来放大缩小图片。

插件地址：https://github.com/manuelstofer/pinchzoom

代码实现：

本例是结合vant轮播图实现：

高度固定，宽度自适应，也可根据pad 的宽高来计算，实现图片等比例缩放

核心是要在初始化pinchzoom之前，要先给图片加载成功之后设置固定的宽高。

import PinchZoom from "pinch-zoom-js";




padW: window.screen.width,
padH: window.screen.height - 840,

 <van-swipe :loop="false" :show-indicators="false"
                           @change="handleChange"
                           ref="mySwipe"
                           class="ams-swipe">
                    <van-swipe-item v-for="(item,index) in upList" :key="index">
                        <div class="list">
                            <div class="image_room" style="width: 100%;height:335px">
                                <img
                                    @load="calcTiffImg($event,item)"
                                    style="width: auto;height: 100%;object-fit: contain"
                                    :src="url + item.filePath" alt="">
                            </div>
                        </div>
                    </van-swipe-item>
       </van-swipe>

calcTiffImg(event, item) {
            // let imgDom = event.path[0]
            // let image_room = event.path[1]
            // let imgH = event.path[0].height
            // let imgW = event.path[0].width
            // let widthScale = Math.round(imgW / this.padW * 100) / 100
            // let heightScale = Math.round(imgH / this.padH * 100) / 100
            // let scale = widthScale > heightScale ? widthScale : heightScale
            // imgDom.style.height = Math.floor(imgH / scale) + 'px'
            // image_room.style.height = this.padH + 'px'
            // imgDom.style.width = Math.floor(imgW / scale) + 'px'
            new PinchZoom(event.path[0], {
                draggableUnzoomed: false,  //当图片有缩放时不允许滑动
                setOffsetsOnce: true        // 当视口发生变化时不重新计算
            })
        },