import { fabric } from 'fabric'; interface InitOptions { canvas: HTMLCanvasElement; background_color: string; brush_color: string; brush_width: number; mode: DrawMode; back_event: (history: string[]) => void; zoom_change: (zoom: number) => void; drag_event: (status: boolean) => void; } interface MousePosInfo { x: number; y: number; } export declare enum DrawMode { SELECT = "select", LINE = "line", PEN = "pen", RECT = "rect", CIRCLE = "circle", TEXT = "text", CUSTOM = "custom" } interface SetTextOtions { left: number; top: number; width: number; text: string[]; edit: boolean; color: string; font_size: number; angle: number; } interface SetImgOptions { src: string; angle: number; catch: (src: string) => void; finish: (src: string) => void; } interface DrawPathOptions { path: string; stroke: string; fill: string; stroke_width: number; } interface CustomDrawFunc { name: string; type: 'path' | 'text'; get_draw_path_options?: (from: MousePosInfo, to: MousePosInfo, width: number, zoom: number) => Partial; get_draw_text_options?: (size: number, zoom: number) => Partial; event: 'move' | 'up'; enable: boolean; } export default class { /** 用于控制绘画频率 */ private draw_rate; /** 窗口中页面的当前显示大小(缩放系数) */ private window_zoom; /** canvas zoom */ private canvas_zoom; private canvas_min_zoom; private canvas_max_zoom; /** canvas element */ canvas: HTMLCanvasElement; /** fabric.Canvas 画板对象 */ fCanvas: fabric.Canvas; /** 当前是否正在绘制中 */ private in_drawing; /** 当前是否正在拖拽中 */ private in_dragging; /** 移动图像的坐标 */ private drag_last_posx; private drag_last_posy; /** 存储鼠标 xy pos 信息 */ private from_mouse_info; private to_mouse_info; /** 绘制模式 */ private draw_mode; /** 笔刷样式 */ private brush_color; private brush_width; private font_size; /** 当前正在绘制的 obj */ private current_draw_obj; /** 当前正在输入文本 */ private current_text_obj; /** 历史记录 */ private history; /** 事件 */ private back_event; private zoom_change; private drag_event; /** 自定义绘制 */ private custom_draw_store; /** 获取适配后的鼠标 from/to pos */ private get_fix_mouse_info; constructor(options: Partial); /** * 清空画板 * state: 是否会清空历史记录 */ clear(state?: boolean): void; /** * destroy */ destroyed(): void; /** * 初始化事件 */ private init_event; /** * 初始化画板样式 */ private init_style; /** * 设置笔刷属性 */ set_brush({ color, width, }: { color?: string; width?: number; }): void; set_min_zoom(zoom: number): void; set_max_zoom(zoom: number): void; set_font_size(size: number): void; /** * 设置绘制模式 */ set_mode(mode: DrawMode): void; /** * 可选择模块 */ enable_select(): void; /** * 删除选中的元素 */ delete_selected(): void; /** * 撤销 */ back(): void; /** img to base64 */ to_img(zoom?: number): string; /** 设置文本 */ set_text(options: Partial, state?: boolean): void; /** 设置背景图片 */ set_bg_img({ src, angle, catch: catchfn, finish: finishfn, }: Partial, state?: boolean): void; /** * 获取鼠标的坐标信息 */ private save_mouse_info; /** * 存储当前状态 */ private save_state; /** 绘制方法 - mouse move */ private draw_in_move; /** 绘制方法 - mouse up */ private draw_in_up; /** 绘制-矩形 */ private draw_rect; /** 绘制-直线 */ private draw_line; /** 绘制-画笔 */ private draw_pen; /** 绘制-圆 */ private draw_circle; /** 绘制-文本 */ private draw_text; /** 绘制自定义图形 */ private draw_path; /** 获取可调用的自定义绘制函数 */ private call_custom_draw_funcs; /** 注册自定义绘制函数 */ register_custom_draw_func({ name, type, get_draw_path_options, get_draw_text_options, event, enable, }: Partial): void; /** 切换自定义绘制函数 */ set_custom_draw_func_enable(names: string[]): void; /** 设置缩放比例 */ set_zoom(z: number, dont_trigger_change_event?: boolean, set_origin?: boolean): void; /** 判断鼠标是在在图片范围内 */ private check_mouse_is_in_draw_area; } export {};