import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib" export class GraphView extends SCanvasView { // 0 :line 1:area 2:img _type: number = 0; get type(): number { return this._type } set type(v: number) { this._type = v; this.update() } // 线条颜色 private _strokecolor: string = ""; get strokecolor(): string { return this._strokecolor } set strokecolor(v: string) { this._strokecolor = v; this.update() } // 背景颜色 private _bgcolor: string = ""; get bgcolor(): string { return this._bgcolor } set bgcolor(v: string) { this._bgcolor = v; this.update() } //线条类型 private _lineType: string = ""; get lineType(): string { return this._lineType } set lineType(v: string) { this._lineType = v; this.update() } //线条粗细 private _lineWidth: number = 1; get lineWidth(): number { return this._lineWidth } set lineWidth(v: number) { this._lineWidth = v; this.update() } /** 图片dom */ img: CanvasImageSource | undefined; /** 图片地址 */ private _url: string = ""; get url(): string { return this._url; } set url(v: string) { this._url = v; this.img = new Image(); this.img.src = v; this.img.onload = (): void => { this.update(); }; this.img.onerror = (e): void => { this.update(); }; } constructor(id: string) { super(id) } onDraw(canvas: SPainter): void { canvas.clearRect(0, 0, this.width, this.height) canvas.pen.lineWidth = this.lineWidth; if (this.lineType == 'dashed') { canvas.pen.lineDash = [10, 2] } if (this.lineType == 'dotted') { canvas.pen.lineDash = [this.lineWidth, this.lineWidth] } canvas.pen.color = new SColor(this.strokecolor); canvas.brush.color = new SColor(this.bgcolor); if (this.type == 0) { canvas.drawLine(0, 14, 28, 14); } else if (this.type == 1) { canvas.drawRect(0, 0, 28, 28); } else if (this.type == 2) { if (this.img) { console.log(this.img) canvas.drawImage(this.img, 0, 0, 28, 28) } } } }