[英]How to implement zoomIn and zoomout in vue-panzoom
我正在尝试实现vue-panzoom的手动缩放选项。 panzoom 是父库和
这里很好演示的默认缩放是我想要实现的https://timmywil.com/panzoom/demo/#Panning%20and%20zooming
根据原始库( panzoom ),有 zoom、zoomIn 和 zoomOut 函数,
但实例没有这些方法
到目前为止我能找到的唯一方法是使用平滑缩放 function,我不知道如何使用它
this.$refs.panZoom.$panZoomInstance.smoothZoom(2.2);
这是我到目前为止所尝试的
https://codesandbox.io/s/poc-zoompan-dz70x?file=/src/App.vue:737-793请看一下,任何建议都会有所帮助。
您可以在这里看到timmywil panzoom 库的简单实现,您可以轻松地使用 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()
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.