canvas-artboard
Version:
* canvas画板 * 兼容移动端touch事件
85 lines (84 loc) • 3.55 kB
TypeScript
/**
* canvas画板
* 兼容移动端touch事件
* ----------传入的参数-----------
* @tag canvas的id
* @historyList 历史纪录的点
* @background 背景色
* @color 画笔颜色
* @size 画笔大小
* ----------提供的方法-----------
* @resetCanvas 清空canvas的方法
* @init 还原所有画笔的画布 options {[{size: Number,color: String,list: [[12,13],[14,15]], {img, x, y, w, h, isCover}}]}
* @after 后一步画布-----code=404没有前一笔, code=200成功
* @front 前一步画布-----code=404没有前一笔, code=200成功
* @getPointList 获取画笔记录
* @setColor 设置颜色 options String
* @setPenSize 设置画笔的大小 options Number
* @eraser 橡皮檫
* @getbase64 获取canvas的base64 options (质量0-1越大越好, 图片类型)
* @drawImg 设置图片 options (图片源, 位置x, 位置y, 图片宽, 图片高, 是否被历史画笔覆盖)
* @downland 下载canvas图片文件 options 文件名字, 质量0-1越大越好, 图片类型
* @getBase64ImgFile 获取canvas图片file类型(区别于base64字符串) options (质量0-1越大越好, 图片类型, 文件名)
* @clearPixel 设置清除像素画笔
* @setNoDraw 特殊场景比如移动元素的情况下不进行绘画
*/
export interface historyType {
size?: number;
color?: CSSStyleDeclaration["color"];
list?: [number, number][];
isClearPixel?: boolean;
img?: CanvasImageSource;
isCover?: boolean;
x?: number;
y?: number;
w?: number;
h?: number;
}
export default class Draw {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
width: number;
height: number;
canvasOffsetTop: number;
canvasOffsetLeft: number;
startPosition: null | [number, number];
isdraw: boolean;
history: historyType[];
isInit: boolean;
currentPen: [number, number][];
drawStep: number;
penSize: number;
penColor: CSSStyleDeclaration["color"];
backGround: CSSStyleDeclaration["color"];
beforeEarserColor: CSSStyleDeclaration["color"] | null;
isEraser: boolean;
isClearPixel: boolean;
noDraw: boolean;
drawCallback?: (e: Draw) => void;
constructor(tag: string, color: CSSStyleDeclaration["color"], size: number, historyList?: [], background?: CSSStyleDeclaration["color"], drawCallback?: (e: Draw) => void);
drawClearPixel(cx: number, cy: number): void;
drawLine(X: number, Y: number): void;
clear(): void;
historyDrawPen(penList?: historyType[]): Promise<void>;
getHistoryPoint(): historyType[];
setColor(color: CSSStyleDeclaration["color"]): void;
setPenSize(size: number): void;
clearPixel(data: boolean): void;
resetCanvas(): void;
init(penList: historyType[]): void;
after(): {
code: number;
msg: string;
};
front(): {
code: number;
msg: string;
};
eraser(data: boolean): void;
setNoDraw(data: boolean): void;
getbase64(quality?: number, type?: string): string;
drawImg(img: CanvasImageSource, x: number, y: number, w: number, h: number, isCover?: boolean): void;
downland(name: string, quality?: number, type?: "image/png" | "image/jpeg"): void;
getBase64ImgFile(quality: number | undefined, type: "image/png" | "image/jpeg" | undefined, name: string): "" | File | null;
}