一个环物展示包

usage

yarn add tang-pano

import { Pano } from "tang-pano"

const canvas: HTMLCanvasElement = // ...

const urls: string[][] = [
  // 二维数组, 多层图片的叠加
  [
    "1.png", "2.png", // ...
  ],
]

const pano = new Pano({
  urls,
  canvas,
})

window.addEventListener("resize", () => {
  // canvas resize 时需要手动调用 resize 方法
  pano.resize()
})

function animate() {
  pano.update()
  window.requestAnimationFrame(animate)
}

animate()

程序概览

Entrys:

• development: src/example.ts
• production: src/index.ts

体验

git clone [email protected]:xiaomingTang/tang-pano.git
yarn
yarn start

todos / features

• [x] (环物展示最基本的)旋转(单指拖拽 / 鼠标左键点击并拖拽)
• [x] 缩放(双指捏合 / 滚动鼠标中键)
• [x] 拖拽平移(双指平移 / 鼠标中键点击并拖拽)
• [x] 由于缩放时 需要频繁获取 鼠标相对于 canvas 视口左上角的坐标, 出于多方面(MouseEvent.offsetX 有兼容性问题, getBoundingClientWidth 会引起重绘导致性能问题)考虑, 如果 canvas 位置不在视口左上角, 可以手动调用 pano.InteractiveElement.updateRect() 方法, 刷新该坐标(注意, 每次 canvas 相对于视口左上角的坐标发生变动, 均需手动调用该方法)
• [x] 支持多层图片(叠加)
• [x] 当图片宽高比与 canvas 比例不相同时, 可选择是否保持图片比例(默认保持图片比例)