HarmonyOS 关于自定义绘制组件Canvas的使用异常

参考demo如下：

DrawCanvas.ets

import DrawInvoker from '../draw/DrawInvoker';
import DrawPath from '../draw/DrawPath';
import { IBrush } from '../draw/IBrush';
import NormalBrush from '../draw/NormalBrush';
import Paint from '../draw/Paint';

@Entry
@Component
export struct DrawCanvas {
  @State @Watch('createDraw') isDrawing: boolean = false //标识是否可以绘制
  @State unDoDraw: boolean = false; //撤销操作
  @State redoDraw: boolean = false; //重做操作
  @State drawHeight: number = 0;
  @State drawWidth: number = 0;
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private drawInvoker: DrawInvoker = new DrawInvoker();
  private path2Db: Path2D = new Path2D()
  private mPaint: Paint = new Paint(); //画笔对象
  private mPath: DrawPath = new DrawPath(); //绘制路径
  private mBrush: IBrush = new NormalBrush(); //笔触对象

  /**
   * 默认为黑色
   */
  async aboutToAppear() {
    this.mPaint = new Paint();
    this.mPaint.setStrokeWidth(3);
    this.mPaint.setColor(Color.Blue)
    this.mBrush = new NormalBrush();
  }

  /**
   * 添加一条绘制路径
   * @param path
   */
  add(path: DrawPath): void {
    this.drawInvoker.add(path);
  }


  /**
   * 撤销上一步
   */
  unDo() {
    this.drawInvoker.undo();
    this.isDrawing = true
  }

  /**
   * 是否可以撤销
   */
  canUnDo(): boolean {
    return this.drawInvoker.canUndo();
  }


  createDraw() {
    //绘制背景
    if (this.isDrawing) {
      //从新绘制画板颜色，从而到达重新绘制效果
      this.context.fillStyle = '#ffff00'
      this.context.fillRect(0, 0, this.context.width, this.context.height);
      this.drawInvoker.execute(this.context)
      this.isDrawing = false;
    }
  }

  onTouchListener(event: TouchEvent) {
    if (event.type === TouchType.Down) {
      this.mPath = new DrawPath();
      this.mPath.paint = this.mPaint;
      console.info('onTouchListener DrawPath == ' + this.mPath.paint.strokeStyle)
      this.mPath.path = new Path2D();
      this.mBrush.down(this.mPath.path, event.touches[0].x, event.touches[0].y)
    }
    if (event.type === TouchType.Up) {
      this.mBrush.up(this.mPath.path, event.touches[0].x, event.touches[0].y)
      //添加路径
      this.add(this.mPath);
      this.isDrawing = true;
      this.redoDraw = false;
      this.unDoDraw = true;
    }
    if (event.type === TouchType.Move) {
      this.mBrush.move(this.mPath.path, event.touches[0].x, event.touches[0].y)
    }
  }

  /**
   * 正常笔触
   */
  drawBrushNormal() {
    this.mBrush = new NormalBrush();
  }

  /**
   * 撤销操作
   */
  drawOperateUndo() {
    this.unDo();
    if (!this.canUnDo()) {
      this.unDoDraw = false
    }
    this.redoDraw = true;
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onTouch(this.onTouchListener.bind(this))
        .width('100%')
        .layoutWeight(1)
      Column() {
        Row() {
          Button('撤销', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(8)
            .backgroundColor(0x317aff)
            .height(60)
            .margin({ right: 4 })
            .enabled(this.unDoDraw)
            .layoutWeight(1)
            .onClick(async () => {
              this.drawOperateUndo();
            })
        }
        .width('90%')
        .margin({ top: 4, bottom: 8 })
        .alignItems(VerticalAlign.Center)
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.

entry-》src-》main-》ets-》draw文件夹

DrawInvoker.ets

import List from '@ohos.util.List';
import DrawPath from './DrawPath';

export default class DrawInvoker {

  //绘制列表
  private drawPathList:List<DrawPath> = new List<DrawPath>();

  //重做列表
  private redoList:List<DrawPath> = new List<DrawPath>();

  /**
   * 添加绘制路径
   */
  add(command:DrawPath):void{
    this.redoList.clear();
    this.drawPathList.add(command);
  }

  /**
   * 撤销上一步命令
   */
  undo() :void{
    if(this.drawPathList.length > 0) {
      let undo:DrawPath = this.drawPathList.get(this.drawPathList.length -1);
      this.drawPathList.removeByIndex(this.drawPathList.length-1);
      //撤销
      undo.unDo();
      this.redoList.add(undo);
    }
  }

  //执行命令
  execute(context: CanvasRenderingContext2D) {
    //进行绘制
    if(this.drawPathList != null) {
      this.drawPathList.forEach(element => {
        element.draw(context)
      });
    }
  }

  /**
   * 是否可以撤销
   */
  canUndo() {
    return this.drawPathList.length > 0;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.

都是在draw文件夹下面，DrawPath.ets

import { IDraw } from './IDraw';
import Paint from './Paint';

/**
 * 绘制的路径
 */
export default class DrawPath implements IDraw {
  public paint: Paint = new Paint();
  //绘制画笔
  public path: Path2D = new Path2D();

  //绘制的路径

  draw(context: CanvasRenderingContext2D) {
    context.lineWidth = this.paint.lineWidth;
    console.info('DrawPath == ' + this.paint.strokeStyle)
    context.strokeStyle = this.paint.strokeStyle
    context.stroke(this.path)
  }

  unDo() {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

IBrush.ets

export interface IBrush {

  /**
   * 触电接触时
   */
  down(path:Path2D,x:number,y:number):void;

  /**
   * 触电移动时
   */
  move(path:Path2D,x:number,y:number):void;

  /**
   * 触点停止时
   * @param x
   * @param y
   */
  up(path:Path2D,x:number,y:number):void;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

NormalBrush.ets

import { IBrush } from './IBrush';

export default class NormalBrush  implements IBrush{

  down(path: Path2D, x: number, y: number) {
    path.moveTo(x,y);
  }

  move(path: Path2D, x: number, y: number) {
    path.lineTo(x,y);
  }

  up(path: Path2D, x: number, y: number) {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Paint.ets

export default class Paint {

  public lineWidth:number = 0;

  public strokeStyle:number = 0;

  // public textAlign:CanvasTextAlign = new CanvasTextAlign();

  public font: string = ''

  setStrokeWidth(strokeWidth:number) {
    this.lineWidth = strokeWidth;
  }

  setColor(color:number) {
    this.strokeStyle = color
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.