app图片缩放

npm install --save hammerjs

  <div style="width: 100%" v-if="pictShow">

        <div class="showImg">

            <div class="setting_box">

          <el-button class="setting_close ha-data-button-red" type="danger" @click="handleClose">关闭</el-button>

        </div>

            <div class="imgWrapPop" ref="activeBox" >

                <img :src="file" alt="" style="width: 300px; height: 600px; object-fit: contain; ">

            </div>

        </div>

    </div>

js文件操作

import Hammer from 'hammerjs';

export default {

    data() {

        return {

            test: '',

            pictShow: false,

            file: '',

            zoom: 1

        }

    },

    computed: {

    },

    components: {

    },

    methods: {

        init(photobox) {

            this.file = photobox

            this.handlePhotoShow(photobox)

        },

        handlePhotoShow(file) {

            console.log('file', file)

            this.file = file

            this.pictShow = true

            this.matrix_box()

            // this.inits()

        },

        handleClose() {

            this.pictShow = false

            // this.test = `transform:scale(1)`

        },

        matrix_box() {

            console.log(123)

            let that = this;

            this.$nextTick(() => {

                let x = 0;

                let y = 0;

                let _node = this.$refs.activeBox; // 获取之前在模板中设置的ref属性

                let hand = new Hammer(_node); // 创建一个新的Hammer实例，传入要进行手势操作的元素

                // 启用pinch手势

                hand.get('pinch').set({ enable: true });

                // 监听pinch手势的不同事件，用于实现缩放功能

                hand.on("pinchmove pinchstart pinchin pinchout", e => {

                    if (e.type == "pinchstart") {

                        this.scaleIndex = this.scaleCount || 1; // 记录当前的缩放比例

                    }

                    this.scaleCount = this.scaleIndex * e.scale; // 计算新的缩放比例

                    _node.style.transform = "scale(" + (this.scaleIndex * e.scale) + ")"; // 应用缩放效果

                });

                // 监听doubletap手势，用于双击重置缩放和位置

                hand.on('doubletap', (e) => {

                    x = 0;

                    y = 0;

                    this.scaleCount = 1; // 重置缩放比例为1

                    _node.style.transform = "translateX(0px) translateY(0px) scale(1)"; // 重置位置和缩放效果

                });

                // 监听pan手势，用于实现拖动功能

                hand.on('panright panleft panup pandown', (e) => {

                    _node.style.transform = "translateX(" + (e.deltaX + x) + "px)" + "translateY(" + (e.deltaY + y) + "px)" + "scale(" + (this.scaleCount * e.scale) + ")"; // 应用拖动和缩放效果

                });

                // 监听panend手势，用于记录拖动的偏移量，以便在下一次拖动时保持连续性

                hand.on('panend', (e) => {

                    x = e.deltaX + x; // 记录水平方向上的偏移量

                    y = e.deltaY + y; // 记录垂直方向上的偏移量

                });

            });

        },

 

    },

    mounted() {

     

    },

 

}

</script>

style样式

<style scoped lang="scss">

.showImg {

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    position: fixed;

    overflow: auto;

    // *position: absolute;

    z-index: 9999;

    margin: 0 auto;

    top: 0;

    left: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    .setting_box {

        width: 100%;

        height: 50px;

        line-height: 50px;

        font-size: 20px;

        background-color: rgba(0, 0, 0, 0);

        position: absolute;

        top: 0;

        z-index: 999;

        .setting_zoom,

        .setting_close {

            position: absolute;

            z-index: 1000;

            top: 20px;

            color: #ffffff;

            opacity: 1;

        }

        .setting_zoom {

            right: 100px;

        }

        .setting_close {

            right: 10px;

        }

    }

}

</style>