/** * dom元素放大缩小、拖拽工具类 */ interface ZoomConfig { maxSize?: number; minSize?: number; } interface DragOffset { x: number; y: number; } interface ZoomCallbacks { onScaleChange?: (scale: number) => void; onDragOffsetChange?: (offset: DragOffset) => void; } declare class XYZoom { private static instance; private dragging; private scale; private originScale; private dragOffset; private maxSize; private minSize; private innerDOM; private outerDOM; private pageX; private pageY; private pageX2; private pageY2; private callbacks; private enableDrag; private enableZoom; private initialWidth; private initialHeight; private initialX; private initialY; private scaleRatio; private resizeObserver; private onResizeChange; private onMouseMove; private onMouseDown; private onMouseUp; private onMouseWheel; private onTouchStart; private onMouseLeave; private constructor(); static getInstance(config?: ZoomConfig): XYZoom; /** * 初始化 * * @param { HTMLElement } innerDOM - 需要进行缩放和拖拽操作的目标元素 * @param { HTMLElement } outerDOM - 限制缩放和拖拽范围的容器元素 * @param { ZoomCallbacks } callbacks - 缩放比例和拖拽位置变化时的回调函数 * * @returns { this } 返回当前实例,支持链式调用 */ init(innerDOM: HTMLElement, outerDOM: HTMLElement, options?: ZoomCallbacks & { scale?: number; dragOffset?: { x: number; y: number; }; enableZoom?: boolean; enableDrag?: boolean; }): this; private handleResize; /** * 销毁 */ destroy(): void; /** * 处理鼠标按下事件 * * @param e * @param innerDOM * @param outerDOM */ private handleMouseDown; /** * 处理触摸开始事件 * * @param e * @param innerDOM * @param outerDOM */ private handleTouchStart; /** * 处理触摸移动事件 * * @param e * @returns */ private handleMouseMove; /** * 处理触摸结束事件 */ private handleMouseUp; private getInitialRect; /** * 滚轮缩放/mac两指拖动 */ private handleMouseWheel; /** * 更新放大缩小倍数,位置居中 * 备注:此方法不限制缩放大小 * * @param { number } scale - 缩放倍数 */ updateZoomScale(scale: number): void; /** * 拖拽 * * @param { number } offsetX * @param { number } offsetY */ private onDrag; /** * 计算拖拽的边界限制 * * @param { HTMLElement } innerDOM - 需要进行缩放和拖拽操作的目标元素 * @param { HTMLElement } outerDOM - 限制缩放和拖拽范围的容器元素 * @param { number } offsetX - 拖拽的x轴偏移量 * @param { number } offsetY - 拖拽的y轴偏移量 * @param { number } scale - 当前缩放倍数 * @returns */ private calculateDragBoundary; /** * 处理放大、缩小倍数 * * @private */ private handleZoomScale; /** * 处理鼠标离开事件 * 当鼠标移出outerDOM时触发 * @param e */ private handleMouseLeave; } declare const zoom: XYZoom; export { zoom, XYZoom };