如何在vue-panzoom中实现zoomIn和缩放
如何在vue-panzoom中实现zoomIn和缩放
提问于 2020-05-08 02:45:44
我正在尝试实现vue-panzoom的手动缩放选项。panzoom是父库，
默认缩放，这里演示得很好，这就是我想要获得的https://timmywil.com/panzoom/demo/#Panning%20and%20zooming
根据原始库(panzoom)，有缩放、zoomIn和zoomOut函数，
但是实例没有这些方法。
到目前为止，我能找到的唯一方法就是使用平滑缩放功能，但我不确定如何使用它
this.$refs.panZoom.$panZoomInstance.smoothZoom(2.2);这就是我到目前为止一直在尝试的
https://codesandbox.io/s/poc-zoompan-dz70x?file=/src/App.vue:737-793请看一下，任何建议都会很有帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-08 07:05:44
您可以在这里看到一个简单的timmywil panzoom library实现，您可以很容易地使用props和slot来创建您自己的可在所有项目中重用的组件
<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()
}
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61665427
复制相关文章
相似问题
腾讯云开发者
