1.0.1 • Published 10 months ago

pan-zoom-control v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

PanZoomControl

概览

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

特点

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

示例

image

使用方式

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参数

参数说明类型默认值
element应用缩放和拖动功能的 HTML 元素。HTMLElement
container限制目标元素缩放和拖动的容器元素。HTMLElement
maximum最大缩放比例number
minimum最小缩放比例number
deltaScale缩放灵敏度number0.1
1.0.1

10 months ago

1.0.0

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago

0.0.0

1 year ago