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

Question

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

默认缩放在这里得到了很好的演示，这就是我试图实现 https://timmywil.com/panzoom/demo/#Panning%20and%20zooming

根据原始库（panzoom），有缩放，缩放和缩放输出功能，

但实例没有这些方法

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

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

这是我迄今为止尝试过的

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

Answer 1

您可以在这里看到timmywil panzoom库的简单实现，您可以轻松地使用道具和插槽来创建自己的组件，可在所有项目中重复使用<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="command">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="zoom(1)">ZoomIn</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button @click="zoom(-1)">ZoomOut</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div style="overflow: hidden;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="panzoom-element">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://picsum.photos/300">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></template><script>import Panzoom from '@panzoom/panzoom'export default {&nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; &nbsp; options: {type: Object, default: () => {}},&nbsp; &nbsp; },&nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; this.panzoom = Panzoom(document.getElementById('panzoom-element'), {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxScale: 5&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; },&nbsp; &nbsp; methods : {&nbsp; &nbsp; &nbsp; &nbsp; zoom(level){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; level === -1 ? this.panzoom.zoomOut() : this.panzoom.zoomIn()&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}