Panzoom测距仪与我的zoomclick不兼容

Question

我正在为我的一个项目使用panzoom。我有一个范围指示器，它给用户的信息，它是放大到什么程度。

https://timmywil.com/panzoom/demo/

这段代码对我不起作用:我需要修改什么？

const panzoom = Panzoom(elem)
zoomInButton.addEventListener('click', panzoom.zoomIn)
zoomOutButton.addEventListener('click', panzoom.zoomOut)
resetButton.addEventListener('click', panzoom.reset)
rangeInput.addEventListener('input', (event) => {
  panzoom.zoom(event.target.valueAsNumber)
})

Answer 1

如果从您链接和复制代码的panzoom页面查看第一个示例，您将发现以下html：

<div class="live-example">
  <div class="buttons">
    <label>Try me: </label>
    <button>Zoom in</button>
    <button>Zoom out</button>
    <button>Reset</button>
    <input class="range-input" type="range" min="0.1" max="4" step="0.1" value="1">
    <div>
      <input type="checkbox" id="disable-pan" checked="">
      <label for="disable-pan">Enable panning</label>
    </div>
  </div>
  <div class="panzoom-parent" style="overflow: hidden; user-select: none; touch-action: none;">
    <div class="panzoom" style="cursor: move; user-select: none; touch-action: none; transform-origin: 50% 50%; transition: none 0s ease 0s; transform: scale(1.2) translate(0px, 0px);">
      <img width="450" height="450" src="awesome_tiger.svg">
    </div>
  </div>
</div>

因为我找不到像CDN这样的在线解决方案，所以我不能在stack snippet中提供minimal reproducable example。你必须像在panzoom github page上提到的那样，用npm安装panzoom…