123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- 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)
- }
- }
- }
- }
|