HarmonyOS 鸿蒙Next 手势密码绘制功能

可以参考图案密码锁组件，是否满足您的需求 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-patternlock-V5#子组件

 

// xxx.ets

import { LengthUnit } from '@kit.ArkUI'

@Entry

@Component

struct PatternLockExample {

  @State passwords: Number[] = []

  @State message: string = 'please input password!'

  private patternLockController: PatternLockController = new PatternLockController()

  build() {

    Column() {

      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)

      PatternLock(this.patternLockController)

        .sideLength(200)

        .circleRadius(9)

        .pathStrokeWidth(18)

        .activeColor('#B0C4DE')

        .selectedColor('#228B22')

        .pathColor('#90EE90')

        .backgroundColor('#F5F5F5')

        .autoReset(true)

        .activateCircleStyle({

          color: '#90EE90',

          radius: { value: 16, unit: LengthUnit.VP },

          enableWaveEffect: true

        })

        .onDotConnect((index: number) => {

          console.log("onDotConnect index: " + index)

        })

        .onPatternComplete((input: Array<number>) => {

          // 输入的密码长度小于5时，提示重新输入

          if (input === null || input === undefined || input.length < 5) {

            this.message = 'The password length needs to be greater than 5, please enter again.'

            return

          }

          // 判断密码长度是否大于0

          if (this.passwords.length > 0) {

            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入

            if (this.passwords.toString() === input.toString()) {

              this.passwords = input

              this.message = 'Set password successfully: ' + this.passwords.toString()

              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT)

            } else {

              this.message = 'Inconsistent passwords, please enter again.'

              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG)

            }

          } else {

            // 提示第二次输入密码

            this.passwords = input

            this.message = "Please enter again."

          }

        })

      Button('Reset PatternLock').margin(30).onClick(() => {

        // 重置密码锁

        this.patternLockController.reset()

        this.passwords = []

        this.message = 'Please input password'

      })

    }.width('100%').height('100%')

  }

}

也可以参考： https://gitee.com/harmonyos_samples/pattern-lock