@jianghh/canvas-graffiti
Version:
canvas涂鸦库,支持手写、笔写、鼠标,选中元素,并且移动、删除等功能。集成撤销重做操作。
43 lines (42 loc) • 1.43 kB
TypeScript
import type { CacheGraffiti, CanvasGraffiti } from '../';
import { EleGroup } from '../';
export interface ToolOptions {
buffer?: boolean;
pointerdown?: (this: CanvasGraffiti, event: PointerEvent) => void;
pointermove?: (this: CanvasGraffiti, event: PointerEvent) => void;
pointerup?: (this: CanvasGraffiti, event: PointerEvent) => void;
drawEle?: (this: CanvasGraffiti | EleGroup, points: Point[]) => void;
}
/**
* 配置
*/
export interface Options {
el: string | HTMLCanvasElement;
initialTool?: ToolType;
createBufferCanvasStyle?: {
[prop: string]: any;
};
allowType?: AllowType[];
allowButton?: (0 | 1 | 2)[];
width?: number;
height?: number;
lineWidth?: number;
color?: string | CanvasGradient | CanvasPattern;
cacheSize?: number;
devicePixelRatio?: number;
shadowColor?: string;
shadowBlur?: number;
}
export interface CustomizeHandle {
onActionHandle?: (item: CacheGraffiti, revokeSize: number, redoSize: number) => void;
onGroupMoveHandle?: (event: PointerEvent) => void;
onGroupHandle?: (group: EleGroup) => void;
}
export type EventTypes = 'pointerdown' | 'pointermove' | 'pointerup';
export type ToolType = 'Cursor' | 'Marker' | 'Pen' | 'Line' | 'Rect' | 'Arc' | 'Erase';
export type AllowType = 'mouse' | 'touch' | 'pen' | (string & {});
export type Point = {
x: number;
y: number;
pressure?: number;
};