3.1.6 • Published 3 years ago
tang-pano v3.1.6
一个环物展示包
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 git@github.com:xiaomingTang/tang-pano.git
yarn
yarn start
todos / features
- (环物展示最基本的)旋转(单指拖拽 / 鼠标左键点击并拖拽)
- 缩放(双指捏合 / 滚动鼠标中键)
- 拖拽平移(双指平移 / 鼠标中键点击并拖拽)
- 由于缩放时 需要频繁获取 鼠标相对于 canvas 视口左上角的坐标, 出于多方面(MouseEvent.offsetX 有兼容性问题, getBoundingClientWidth 会引起重绘导致性能问题)考虑, 如果 canvas 位置不在视口左上角, 可以手动调用 pano.InteractiveElement.updateRect() 方法, 刷新该坐标(注意, 每次 canvas 相对于视口左上角的坐标发生变动, 均需手动调用该方法)
- 支持多层图片(叠加)
- 当图片宽高比与 canvas 比例不相同时, 可选择是否保持图片比例(默认保持图片比例)
3.1.6
3 years ago
3.1.4
3 years ago
3.1.3
3 years ago
3.1.2
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.3
4 years ago
3.0.2
4 years ago
3.0.1
4 years ago
3.0.0
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.9.1
4 years ago
1.9.0
4 years ago
1.8.1
4 years ago
1.7.2
4 years ago
1.7.1
4 years ago
1.8.3
4 years ago
1.7.0
4 years ago
1.6.1
4 years ago
1.6.0
4 years ago
1.5.0
4 years ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago