pan-zoom-control

PanZoomControl

概览

由于最近工作开发需要，故开发了一个可以将 HTML 元素变为可缩放和可拖动对象工具类，就像我们平时对图像进行缩放、拖动一样

特点

• 使用鼠标滚轮进行平滑缩放，以光标为中心。
• 可拖动功能，允许使用鼠标移动元素。
• 自动边界限制，在缩放和拖动时保持元素在其容器内。

示例

使用方式

npm i pan-zoom-control --save

import PanZoomControl from 'PanZoomControl';

document.addEventListener('DOMContentLoaded', () => {
  const mydiv = document.getElementById('mydiv') as HTMLElement;
  const container = document.getElementById('container') as HTMLElement;

  const zoomDrag = new PanZoomControl({
    scaleElement: mydiv;
    container: container;
    maximum: 0.2;
    minimum: 6;
    deltaScale: 0.2
  });
  // 现在 `mydiv` 可在 `container` 内缩放和拖动。

  // 之后清理：
  // zoomDrag.destroy();
});

options参数