亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 vue-panzoom 中實現 zoomIn 和 zoomout

如何在 vue-panzoom 中實現 zoomIn 和 zoomout

慕萊塢森 2022-08-04 17:08:14
我正在嘗試實現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請看一下，任何建議都會有所幫助。
查看完整描述

1 回答

?
慕勒3428872

TA貢獻1848條經驗 獲得超6個贊

您可以在這里看到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()

        }

    }

}


查看完整回答
反對 回復 2022-08-04
  • 1 回答
  • 0 關注
  • 616 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號