panzoom怎么手动设定缩放比例？

  • Z时代
  • 2024-02-23
  • 分类：IT

不是@panzoom/panzoom
是anvaka/panzoom https://github.com/anvaka/pan...

panzoom怎么手动设定缩放比例？
鼠标滚动是可以缩放的，但是还需要一个设置值进行缩放

或者说如何重置为初始状态，我就可以先重置再设置了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows:  1fr 1fr 1fr;
        }
        header {background: #caccd1;}
    </style>
</head>
<body>
    <div id="container">
        <div>
            <header>
                缩放比例倍数：
                <select v-model="multiple" @change="setMultiple">
                    <option value="0.5">50%</option>
                    <option value="1">100%</option>
                    <option value="2">200%</option>
                    <option value="3">500%</option>
                </select>
            </header>
            <div class="grid" id="mainContainer">
                <div v-for="item in list">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"></script>
    <script type="text/javascript">
        new Vue({
          data: () => {
              return {
                  multiple: 1,
                  pan: null,
                  list: [1,2,3,4,5,6,7,8,9]
              }
          },
          mounted() {
              const mainContainer = document.getElementById('mainContainer')
                this.pan = panzoom(mainContainer, {
                smoothScroll: false,
                bounds: true,
                zoomDoubleClickSpeed: 1,
                //设置滚动缩放的组合键，默认不需要组合键
                beforeWheel: (e) => {
                  return false // 是否禁止缩放
                },
                beforeMouseDown: function (e) {
                  const shouldIgnore = e.ctrlKey
                  return shouldIgnore
                },
              })
          },
          methods: {
              // 设置倍数
              setMultiple () {
                  // 这么写感觉不对，多点几次就发现缩小是基于当前大小缩小,而不是默认比例缩小
                  this.pan.zoomTo(0, 0, this.multiple) 
                  // console.log(this.multiple)
              }
          }
        }).$mount('#container')
    </script>
</body>
</html>

回答：

let container = document.querySelector('#scene');
let rect = container.getBBox();
let cx = rect.x + rect.width/2;
let cy = rect.y + rect.height/2;
pz.moveTo(0,0)
pz.smoothZoomAbs(cx,cy,1)

看着官网是这样说的

以上是 panzoom怎么手动设定缩放比例？ 的全部内容， 来源链接： utcz.com/p/932995.html

回到顶部