Как реализовать увеличение и уменьшение масштаба в vue -panzoom

Question

Я пытаюсь реализовать опцию ручного масштабирования vue -panzoom . panzoom - это родительская библиотека, а масштабирование по умолчанию

, которое хорошо продемонстрировано, вот что я пытаюсь добиться https://timmywil.com/panzoom/demo/#Panning% 20и% 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 вы можете легко использовать реквизит и слот для создания собственного компонента, который можно многократно использовать во всем вашем проекте

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