app端缩放图片

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、下载Hammer
• 二、使用步骤
  • npm install --save hammerjs
  • html界面
  • script
  • style
• 总结

app端缩放图片

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、下载Hammer

npm install --save hammerjs

二、使用步骤

1.写入html

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

2.写入scirpt

代码如下（示例）：

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() {

    },



}

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>

---

总结

图片缩放。