HarmonyOS 如何实现九宫格解锁自定义样式

// CustomPatternLockByCanvas.ets
export interface Point {
  x: number;
  y: number;
}
export interface Position {
  x: number;
  y: number;
  width: number;
  height: number;
  centerX: number;
  centerY: number;
  radius: number;
  circleRadius: number;
}

@ObservedV2
export class PatternLockItemViewModel {
  @Trace id: number;
  @Trace selected: boolean;
  @Trace position: Position;

  constructor(id: number, selected: boolean, position: Position) {
    this.id = id;
    this.selected = selected;
    this.position = position;
  }
}

@ObservedV2
export class PatternLockItemArrayViewModel extends Array<PatternLockItemViewModel> {
}

export enum DotStatus {
  NORMAL,
  SELECTED,
  ERROR
}

export enum DrawStep {
  FIRST_DRAW,
  SECOND_DRAW
}

export enum DrawState {
  DEFAULT,
  START,
  MOVING,
  END
}

function isPointInPosition(point: Point, position: Position): boolean {
  let d = Math.pow(point.x - position.centerX, 2) + Math.pow(point.y - position.centerY, 2)
  return d <= Math.pow(position.circleRadius, 2);
}

const UNSELECTED_DOT_COLOR = '#aacdf3';
const SELECTED_DOT_COLOR = '#1379fe';
const SELECTED_DOT_CIRCLE_COLOR = '#a5b4c3';
const PATH_LINE_COLOR = '#e3efff'
const PATH_LINE_WIDTH = 5

@ComponentV2
export struct CustomPatternLockByCanvas {
  dotItems: PatternLockItemArrayViewModel = [];
  private contextSetting: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.contextSetting);
  @Local canvasArea: Area | undefined = undefined;
  drawState: DrawState = DrawState.DEFAULT;
  drawStep: DrawStep = DrawStep.FIRST_DRAW;
  // 存储路径
  curPaths: PatternLockItemArrayViewModel = [];
  firstConfirmPath: PatternLockItemArrayViewModel = [];
  secondConfirmPath: PatternLockItemArrayViewModel = [];
  minDot: number = 5;
  @Local tipMessage: string = '';
  onFirstDrawFinish: () => void = () => {
  };
  onSecondDrawFinish: () => void = () => {
  };

  @Monitor('canvasArea')
  onCanvasAreaChange(monitor: IMonitor) {
    monitor.dirty.forEach((path: string) => {
      let areaChange = monitor.value<Area>(path);
      let canvasWith = this.length2Number(areaChange?.now.width);
      let canvasHeight = this.length2Number(areaChange?.now.height);
      if (!areaChange || !areaChange.now || !canvasWith || !canvasHeight) {
        return;
      }
      console.log(`tag ${path} onCanvasAreaChange from ${areaChange.before} to ${areaChange.now}`);
      let width = canvasWith / 3;
      let height = canvasHeight / 3;
      for (let index = 0; index < 9; index++) {
        let x = index % 3 * width;
        let y = Math.floor(index / 3) * height;
        console.log(`tag ${index} ${x} ${y} ${width} ${height}`);
        let dotPosition: Position = {
          x: x,
          y: y,
          width: width,
          height: height,
          centerX: x + width / 2,
          centerY: y + height / 2,
          radius: 0.06 * width,
          circleRadius: 0.3 * width
        };
        this.dotItems.push(new PatternLockItemViewModel(index, false, dotPosition));
      }
      this.drawDotItems();
    })
  }

  length2Number(len?: Length): number | undefined {
    if (typeof len === 'string') {
      return Number(len);
    } else if (typeof len === 'number') {
      return len;
      // todo only check Resource
    } else if (len && typeof len === 'object') {
      return getContext().resourceManager.getNumber(len.id);
    } else {
      return undefined;
    }
  }

  drawDot(dotItem: PatternLockItemViewModel) {
    let dotRadius = dotItem.position.radius;
    let dotFillColor = dotItem.selected ? SELECTED_DOT_COLOR : UNSELECTED_DOT_COLOR;
    this.context.beginPath();
    this.context.arc(dotItem.position.centerX, dotItem.position.centerY, dotRadius, 0, 2 * Math.PI, false);
    this.context.fillStyle = dotFillColor;
    this.context.fill();
    this.context.closePath();
    if (dotItem.selected) {
      let dotCircleRadius = dotItem.position.circleRadius;
      this.context.beginPath();
      this.context.arc(dotItem.position.centerX, dotItem.position.centerY, dotCircleRadius, 0, 2 * Math.PI, false);
      this.context.lineWidth = 1;
      this.context.strokeStyle = SELECTED_DOT_CIRCLE_COLOR;
      this.context.stroke();
      this.context.closePath();
    }
  }

  drawDotItems() {
    if (this.dotItems.length === 0) {
      return;
    }
    this.dotItems.forEach((item) => {
      this.drawDot(item);
    })
  }

  drawPaths() {
    if (this.curPaths.length <= 1) {
      return;
    }
    let start = this.curPaths[0];
    this.context.beginPath();
    this.context.strokeStyle = PATH_LINE_COLOR;
    this.context.lineWidth = PATH_LINE_WIDTH;
    this.context.moveTo(start.position.centerX, start.position.centerY);
    this.curPaths.forEach((item, index) => {
      if (index === 0) {
        return;
      }
      this.context.lineTo(item.position.centerX, item.position.centerY);
      this.context.stroke();
    })
    this.context.closePath();
  }

  getPatternLockItemByPointInCanvas(point: Point): PatternLockItemViewModel | undefined {
    for (let i = 0; i < this.dotItems.length; i++) {
      let dotItem = this.dotItems[i];
      if (dotItem.selected) {
        continue;
      }
      let inPosition = this.isPositionInPatternLockItem(dotItem, point);
      if (inPosition) {
        return dotItem;
      }
    }
    return undefined;
  }

  isPositionInPatternLockItem(item: PatternLockItemViewModel, point: Point): boolean {
    return isPointInPosition(point, item.position);
  }

  clearCanvas() {
    this.context.clearRect(0, 0, this.context.width, this.context.height);
  }

  resetPatternLock() {
    this.clearCanvas();
    this.dotItems.forEach((item, index) => {
      item.selected = false;
    })
    this.curPaths = [];
    this.drawDotItems();
    this.drawState = DrawState.DEFAULT;
  }

  isSameNotEmptyPath(path1: PatternLockItemArrayViewModel, path2: PatternLockItemArrayViewModel): boolean {
    if (path1.length !== path2.length || path1.length === 0) {
      return false;
    }
    let len = path1.length;
    for (let index = 0; index < len; index++) {
      if (path1[index] !== path2[index]) {
        return false;
      }
    }
    return true;
  }

  onGestureActionUpdateDrawPatternLock(event: GestureEvent) {
    let curX = event.fingerList[0].localX;
    let curY = event.fingerList[0].localY;
    let patternLockItem = this.getPatternLockItemByPointInCanvas({ x: curX, y: curY });
    console.log(`tag onActionUpdate: curX: ${curX} curY: ${curY} item:${patternLockItem?.id}`);
    if (!patternLockItem) {
      return;
    }
    if (this.drawState === DrawState.DEFAULT) {
      this.drawState = DrawState.START;
      patternLockItem.selected = true;
      this.drawDot(patternLockItem);
      this.curPaths.push(patternLockItem);
    } else if (this.drawState === DrawState.START) {
      let existInPath = this.curPaths.some(item => item.id === patternLockItem?.id);
      if (!existInPath) {
        patternLockItem.selected = true;
        this.curPaths.push(patternLockItem);
        this.clearCanvas();
        this.drawPaths();
        this.drawDotItems();
      }
    }
  }

  onGestureActionEndDrawPatternLock(event: GestureEvent) {
    if (this.curPaths.length < this.minDot) {
      this.tipMessage = `手势密码绘制点数需大于${this.minDot}个点`;
      // todo 先绘制红色轨迹和路径，等待200ms左右再恢复九宫格
      this.resetPatternLock();
      return;
    }
    if (this.drawStep === DrawStep.FIRST_DRAW) {
      this.tipMessage = '请再次绘制';
      this.firstConfirmPath = this.curPaths;
      this.drawStep = DrawStep.SECOND_DRAW;
      this.resetPatternLock();
      return;
    }
    if (this.drawStep === DrawStep.SECOND_DRAW) {
      // 比较两次
      let isSame = this.isSameNotEmptyPath(this.firstConfirmPath, this.curPaths);
      if (isSame) {
        this.tipMessage = '完成绘制';
        this.secondConfirmPath = this.curPaths;
      } else {
        this.tipMessage = '二次绘制不一致，请重新绘制';
        this.resetPatternLock();
      }
    } else {
      console.warn(`unexpected error, ${this.drawStep} ${this.drawState}`)
    }
  }

  build() {
    Column() {
      Text(this.tipMessage)
        .fontColor(Color.Red)
        .height(30)
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .borderWidth(1)
        .onReady(() => {
          console.log('tag onReady')
        })
        .onAreaChange((oldValue: Area, newValue: Area) => {
          console.log('tag onAreaChange' + JSON.stringify(newValue))
          this.canvasArea = newValue;
        })
        .gesture(PanGesture({ fingers: 1 }).onActionStart((event: GestureEvent) => {
          console.log('tag onActionStart:' + JSON.stringify(event));
        }).onActionUpdate((event: GestureEvent) => {
          this.onGestureActionUpdateDrawPatternLock(event);
        }).onActionEnd((event: GestureEvent) => {
          this.onGestureActionEndDrawPatternLock(event);
        }).onActionCancel(() => {
          console.log('tag onActionCancel');
        }))
    }
  }
}

// index.ets
import { CustomPatternLockByCanvas } from '../component/CustomPatternLockByCanvas';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Stack() {
      CustomPatternLockByCanvas()
        .width(300)
        .height(300)
    }
    .height('100%')
    .width('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.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.