canvas-select

import Rect from './shape/Rect'; import Polygon from './shape/Polygon'; import Dot from './shape/Dot'; import EventBus from './EventBus'; import Line from './shape/Line'; import Circle from './shape/Circle'; import Grid from './shape/Grid'; import Brush from './shape/Brush'; import Eraser from './shape/Eraser'; export type Point = [number, number]; export type AllShape = Rect | Polygon | Dot | Line | Circle | Grid | Brush | Eraser; declare enum Shape { None = 0, Rect = 1, Polygon = 2, Dot = 3, Line = 4, Circle = 5, Grid = 6, Brush = 7, Eraser = 8 } export default class CanvasSelect extends EventBus { /** 当前版本 */ version: string; /** 只读模式，画布不允许任何交互 */ lock: boolean; /** 只读模式，仅支持查看 */ readonly: boolean; /** 最小矩形宽度 */ MIN_WIDTH: number; /** 最小矩形高度 */ MIN_HEIGHT: number; /** 最小圆形半径 */ MIN_RADIUS: number; /** 边线颜色 */ strokeStyle: string; /** 填充颜色 */ fillStyle: string; /** 边线宽度 */ lineWidth: number; /** 当前选中的标注边线颜色 */ activeStrokeStyle: string; /** 当前选中的标注填充颜色 */ activeFillStyle: string; /** 控制点边线颜色 */ ctrlStrokeStyle: string; /** 控制点填充颜色 */ ctrlFillStyle: string; /** 控制点半径 */ ctrlRadius: number; /** 是否隐藏标签 */ hideLabel: boolean; /** 标签背景填充颜色 */ labelFillStyle: string; /** 标签字体 */ labelFont: string; /** 标签文字颜色 */ textFillStyle: string; /** 标签字符最大长度，超出使用省略号 */ labelMaxLen: number; /** 画布宽度 */ WIDTH: number; /** 画布高度 */ HEIGHT: number; /** XY十字坐标 */ crossX: Line; crossY: Line; crossStroke: string; /** 开启十字辅助 */ showCross: boolean; /** 开启矩形旋转控制点 */ showRotation: boolean; canvas: HTMLCanvasElement | undefined; ctx: CanvasRenderingContext2D | null | undefined; /** 所有标注数据 */ dataset: AllShape[]; offScreen: HTMLCanvasElement | undefined; offScreenCtx: CanvasRenderingContext2D | null | undefined; magnifierCanvas: HTMLCanvasElement | undefined; magnifierCtx: CanvasRenderingContext2D | undefined; isMagnifierVisible: boolean; magnifierPosition: Point | 'auto'; /** 记录锚点距离 */ remmber: number[][]; /** 记录鼠标位置 */ mouse: Point; /** 记录背景图鼠标位移 */ remmberOrigin: number[]; /** 0 不创建，1 矩形，2 多边形，3 点，4 折线，5 圆，6 网格 */ createType: Shape; /** 控制点索引 */ ctrlIndex: number; /** 背景图片 */ image: HTMLImageElement; /** 图片原始宽度 */ IMAGE_ORIGIN_WIDTH: number; /** 图片缩放宽度 */ IMAGE_WIDTH: number; /** 图片原始高度 */ IMAGE_ORIGIN_HEIGHT: number; /** 图片缩放高度 */ IMAGE_HEIGHT: number; /** 原点x */ originX: number; /** 原点y */ originY: number; /** 缩放步长 */ scaleStep: number; /** 滚动缩放 */ scrollZoom: boolean; private timer; /** 最小touch双击时间 */ dblTouch: number; /** 记录touch双击开始时间 */ dblTouchStore: number; /** 这个选项可以帮助浏览器进行内部优化 */ alpha: boolean; /** 专注模式 */ focusMode: boolean; /** 触控缩放时记录上一次两点距离 */ scaleTouchStore: number; /** 当前是否为双指触控 */ isTouch2: boolean; isMobile: boolean; /** 向上展示label */ labelUp: boolean; private isCtrlKey; /** 自定义ctrl快捷键 KeyboardEvent.code */ ctrlCode: string; /** 网格右键菜单 */ gridMenuEnable: boolean; /** 网格选中背景填充颜色 */ gridSelectedFillStyle: string; /** 画笔大小 */ brushSize: number; /** 画笔颜色 */ brushStokeStyle: string; /** 橡皮擦大小 */ eraserSize: number; /** 标注坐标 (以背景图片左上角为原点) */ position: number[]; /** * @param el Valid CSS selector string, or DOM * @param src image src */ constructor(el: HTMLCanvasElement | string, src?: string | HTMLImageElement); /** 当前当前选中的标注 */ get activeShape(): any; /** 当前缩放比例 */ get scale(): number; /** 图片最小边尺寸 */ get imageMin(): number; /** 图片原始最大边尺寸 */ get imageOriginMax(): number; /** 创建放大镜容器 */ createMagnifierCanvas(): void; /** 创建放大镜 */ createMagnifier(x: number, y: number): void; /** 更新放大镜 */ updateMagnifier(x: number, y: number): void; /** 销毁放大镜 */ private destroyMagnifier; getImageDataFromCanvas(canvas: HTMLCanvasElement, [x, y, width, height]: [number, number, number, number]): ImageData | undefined; /** 合成事件 */ mergeEvent(e: TouchEvent | MouseEvent): { mouseX: number; mouseY: number; mouseCX: number; mouseCY: number; altKey: boolean; button: number; buttons: number; clientX: number; clientY: number; ctrlKey: boolean; layerX: number; layerY: number; metaKey: boolean; movementX: number; movementY: number; offsetX: number; offsetY: number; pageX: number; pageY: number; relatedTarget: EventTarget | null; screenX: number; screenY: number; shiftKey: boolean; x: number; y: number; getModifierState(keyArg: string): boolean; initMouseEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null): void; detail: number; view: Window | null; which: number; initUIEvent(typeArg: string, bubblesArg?: boolean, cancelableArg?: boolean, viewArg?: Window | null, detailArg?: number): void; bubbles: boolean; cancelBubble: boolean; cancelable: boolean; composed: boolean; currentTarget: EventTarget | null; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; returnValue: boolean; srcElement: EventTarget | null; target: EventTarget | null; timeStamp: DOMHighResTimeStamp; type: string; composedPath(): EventTarget[]; initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void; preventDefault(): void; stopImmediatePropagation(): void; stopPropagation(): void; NONE: 0; CAPTURING_PHASE: 1; AT_TARGET: 2; BUBBLING_PHASE: 3; } | { mouseX: number; mouseY: number; mouseCX: number; mouseCY: number; altKey: boolean; changedTouches: TouchList; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean; targetTouches: TouchList; touches: TouchList; detail: number; view: Window | null; which: number; initUIEvent(typeArg: string, bubblesArg?: boolean, cancelableArg?: boolean, viewArg?: Window | null, detailArg?: number): void; bubbles: boolean; cancelBubble: boolean; cancelable: boolean; composed: boolean; currentTarget: EventTarget | null; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; returnValue: boolean; srcElement: EventTarget | null; target: EventTarget | null; timeStamp: DOMHighResTimeStamp; type: string; composedPath(): EventTarget[]; initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void; preventDefault(): void; stopImmediatePropagation(): void; stopPropagation(): void; NONE: 0; CAPTURING_PHASE: 1; AT_TARGET: 2; BUBBLING_PHASE: 3; }; private handleLoad; private handleContextmenu; private handleMousewheel; private handleMouseDown; private handleMouseMove; private handleMouseUp; private handleDblclick; private handleKeydown; private handleKeyup; /** 初始化配置 */ initSetting(): void; /** 初始化事件 */ initEvents(): void; /** * 添加/切换图片 * @param source 图片链接或图片对象 */ setImage(source: string | HTMLImageElement): void; /** * 设置数据 * @param data Array */ setData(data: AllShape[]): void; /** * 判断是否在标注实例上 * @param mousePoint 点击位置 * @returns */ hitOnShape(mousePoint: Point): [number, AllShape]; /** * 判断鼠标是否在背景图内部 * @param e MouseEvent * @returns 布尔值 */ isInBackground(e: MouseEvent | TouchEvent): boolean; /** * 判断是否在矩形内 * @param point 坐标 * @param coor 区域坐标 * @returns 布尔值 */ isPointInRect(point: Point, coor: Point[]): boolean; /** * 判断是否在多边形内 * @param point 坐标 * @param coor 区域坐标 * @returns 布尔值 */ isPointInPolygon(point: Point, coor: Point[]): boolean; /** * 判断是否在圆内 * @param point 坐标 * @param center 圆心 * @param r 半径 * @param needScale 是否为圆形点击检测 * @returns 布尔值 */ isPointInCircle(point: Point, center: Point, r: number): boolean; /** * 判断是否在折线内 * @param point 坐标 * @param coor 区域坐标 * @returns 布尔值 */ isPointInLine(point: Point, coor: Point[]): boolean; /** * 绘制矩形 * @param shape 标注实例 * @returns */ drawRect(shape: Rect, sub?: Record<string, any>): void; /** * 绘制多边形 * @param shape 标注实例 */ drawPolygon(shape: Polygon): void; /** * 绘制点 * @param shape 标注实例 */ drawDot(shape: Dot): void; /** * 绘制圆 * @param shape 标注实例 */ drawCirle(shape: Circle): void; /** * 绘制折线 * @param shape 标注实例 */ drawLine(shape: Line): void; /** * 绘制网格 * @param shape 标注实例 * @returns */ drawGrid(shape: Grid): void; /** * 绘制画笔路径 * @param shape 形状 */ drawBrushPath(shape: Brush): void; /** * 绘制橡皮擦路径 * @param coor 折线坐标 * @param shape 形状 */ drawEraserPath(shape: Eraser): void; /** 清除画布 */ clearBrush(): void; /** * 绘制控制点 * @param point 坐标 */ drawCtrl(point: Point, color?: string): void; /** * 绘制控制点列表 * @param shape 标注实例 */ drawCtrlList(shape: Rect | Polygon | Line): void; /** * 绘制label * @param point 位置 * @param label 文本 */ drawLabel(point: Point, shape: AllShape): void; /** * 更新画布 */ update(): void; /** * 通过索引删除指定形状 * @param index number */ deleteByIndex(index: number): void; /** * 通过uuid删除指定形状 * @param index string */ deleteByUuid(uuid: string): void; /** * 计算缩放步长 */ calcStep(flag?: string): void; /** * 缩放 * @param type true放大5%，false缩小5% * @param center 缩放中心 center|mouse * @param pure 不绘制 */ setScale(type: boolean, byMouse?: boolean, pure?: boolean): void; /** * 适配背景图 */ fitZoom(): void; /** * 设置专注模式 * @param type {boolean} */ setFocusMode(type: boolean): void; /** * 销毁 */ destroy(): void; /** * 重新设置画布大小 */ resize(): void; } export {};