如何在vue-panzoom中实现zoomIn和zoomout

Question

我正在尝试实现 vue-panzoom 的手动缩放选项。 panzoom 是父库，

这里演示的默认缩放是我想要实现的 https://timmywil.com/panzoom/demo/#Panning%20and%20zooming

根据原始库(panzoom)，有zoom、zoomIn和zoomOut函数，

但实例没有这些方法

到目前为止我能找到的唯一方法是使用平滑缩放功能，但我不确定如何使用它

this.$refs.panZoom.$panZoomInstance.smoothZoom(2.2);

这是我迄今为止尝试过的方法

https://codesandbox.io/s/poc-zoompan-dz70x?file=/src/App.vue:737-793 请看一下，任何建议都会有所帮助。

Answer 1

你可以在这里看到一个简单的实现 timmywil panzoom library 你可以轻松地使用 props 和 slots 来创建你自己的组件，可在你的所有项目中重用

<template>
    <div>
        <div class="command">
            <button @click="zoom(1)">ZoomIn</button>
            <button @click="zoom(-1)">ZoomOut</button>
        </div>
        <div style="overflow: hidden;">
            <div id="panzoom-element">
                <img src="https://picsum.photos/300">
            </div>
        </div>
    </div>
</template>
<script>
import Panzoom from '@panzoom/panzoom'

export default {
    props: {
        options: {type: Object, default: () => {}},
    },
    mounted() {
        this.panzoom = Panzoom(document.getElementById('panzoom-element'), {
            maxScale: 5
        })
    },
    methods : {
        zoom(level){
            level === -1 ? this.panzoom.zoomOut() : this.panzoom.zoomIn()
        }
    }
}

如何在vue-panzoom中实现zoomIn和zoomout

How to implement zoomIn and zoomout in vue-panzoom

javascript

zooming

vue.js

panzoom