鸿蒙开发之如何实现手势解锁、图案解锁

思路：

使用鸿蒙提供的绘图工具：Canvas，

固定放置9个button，使用stack使画布在button上面然后设置透明背景，

在onTouch方法处理移动的坐标点。

如何清除轨迹：由于只能按矩形删，所以采用全部清空的策略，记录已连接的点，每移动一下，重新绘制一遍。

实现效果：待插入视频

图案解锁的效果演示视频

实现代码：

.ets文件


import window from '@ohos.window';

import UIAbility from '@ohos.app.ability.UIAbility';
import router from '@ohos.router';
import prompt from '@ohos.prompt';
import ArrayList from '@ohos.util.ArrayList';



//声明frame
class RectYYY{
  x:number = 0;
  y:number = 0;
  w:number = 0;
  h:number = 0;
}
//声明point
class PointYYY{
  x:number = 0;
  y:number = 0;
}
//判断点是不是在矩形里
function pointInRect(pointX:number,pointY:number, rectX:number,rectY:number,rectW:number,rectH:number) {
  if (pointX >= rectX && pointX <= (rectX + rectW)  && pointY >= rectY && pointY <= (rectY +rectH)) {
    return 1;
  }else {
    return 0;
  }
}
//获取矩形中心坐标点
function getCenter( rect:RectYYY) {
  let center = new PointYYY();
  center.x = rect.x + (rect.w/2.0);
  center.y = rect.y + rect.h/2.0;
  return(center);
}



@Entry
@Component
struct Index {



  private settings: RenderingContextSettings = new RenderingContextSettings(true)

  private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  rect1 :RectYYY = new RectYYY();
  rect2 :RectYYY = new RectYYY();
  rect3 :RectYYY = new RectYYY();
  rect4 :RectYYY = new RectYYY();
  rect5 :RectYYY = new RectYYY();
  rect6 :RectYYY = new RectYYY();
  rect7 :RectYYY = new RectYYY();
  rect8 :RectYYY = new RectYYY();
  rect9 :RectYYY = new RectYYY();

  //是否从圆开始
  isStart :boolean = false;

  //所有的圆坐标
  arrRect : Array = [];

  //已经连上的圆坐标
  arrRectTouched : ArrayList = new ArrayList();

  //上一个圆坐标
  lastRect:RectYYY = new RectYYY();


 onTouchEvent(event: TouchEvent) {

    switch (event.type) {

    //按下
      case TouchType.Down:
        //必须从一个圆开始绘制
        for (let i = 0 ; i < 9 ; i++){
          let rect = this.arrRect[i];
          if (pointInRect(event.touches[0].x,event.touches[0].y,rect.x,rect.y,rect.w,rect.h)) {
            this.isStart = true;
            //记录已连接的圆
            this.arrRectTouched.add(rect);
          }
        }
        break;

    //移动
      case TouchType.Move:
        
        //如果第一笔从非圆区域则不绘制
        if(this.isStart === false){
          break;
        }

        //清空画布
        this.context2D.clearRect(0,0,600, 600)


        //把未连过的点加入数组
        for (let i = 0 ; i < 9 ; i++){
          let rect = this.arrRect[i];
          if (pointInRect(event.touches[0].x, event.touches[0].y, rect.x, rect.y, rect.w, rect.h)) {
            //记录点
            if(this.arrRectTouched.has(rect)){

            }else {
              this.arrRectTouched.add(rect);
            }
          }
        }


        for (let i = 0 ; i < this.arrRectTouched.length ; i++) {
          let rect = this.arrRectTouched.convertToArray()[i];
          let point: PointYYY = getCenter(rect)

          if (this.arrRectTouched.length > 1) {

            //把之前已选中的点按顺序重新连线
            if (i > 0) {
              this.context2D.beginPath();
              this.context2D.moveTo(getCenter(this.lastRect).x,  getCenter(this.lastRect).y);
              this.context2D.lineTo(point.x, point.y);
              this.context2D.stroke();
            }

        }

          this.lastRect = rect;
        }

        //随手移动的
        this.context2D.beginPath();
        let center2:PointYYY = getCenter(this.lastRect)
        this.context2D.moveTo(center2.x, center2.y);
        this.context2D.lineTo(event.touches[0].x, event.touches[0].y);
        this.context2D.stroke();

        break;


    //抬起
      case TouchType.Up:
        this.context2D.clearRect(0,0,600, 600)
        this.arrRectTouched.clear()
        this.isStart = false;

      default:
        break;
    }
  }


 build() {
    Row() {
      Column() {
        Stack() {
          //第一排
          Button()
            .position({x:0,y:0})
            .width(50)
            .height(50)

          Button()
            .position({x:160,y:0})
            .width(50)
            .height(50)

          Button()
            .position({x:330,y:0})
            .width(50)
            .height(50)

          //第二排
          Button()
            .position({x:0,y:200})
            .width(50)
            .height(50)

          Button()
            .position({x:160,y:200})
            .width(50)
            .height(50)

          Button()
            .position({x:330,y:200})
            .width(50)
            .height(50)
          //第3排
          Button()
            .position({x:0,y:400})
            .width(50)
            .height(50)

          Button()
            .position({x:160,y:400})
            .width(50)
            .height(50)

          Button()
            .position({x:330,y:400})
            .width(50)
            .height(50)


          Canvas(this.context2D)
            .width('100%')
            .height('70%')
            .backgroundColor('#00FFFFFF')
            .backgroundColor(Color.Pink)
            .backgroundColor(`rgba(250,224,123,0.5)`)
            .onReady(() => {
              //画笔粗细
              this.context2D.lineWidth = 10;
            })
            .onTouch((e) => {
              this.onTouchEvent(e);
            })


        }
        }
        .width('100%')


    }
   .height('100%')
  }
 aboutToAppear(){

    this.rect1.x = 0;
    this.rect1.y = 0;
    this.rect1.w = 50;
    this.rect1.h = 50;

    this.rect2.x = 160;
    this.rect2.y = 0;
    this.rect2.w = 50;
    this.rect2.h = 50;

    this.rect3.x = 330;
    this.rect3.y = 0;
    this.rect3.w = 50;
    this.rect3.h = 50;
//2
    this.rect4.x = 0;
    this.rect4.y = 200;
    this.rect4.w = 50;
    this.rect4.h = 50;

    this.rect5.x = 160;
    this.rect5.y = 200;
    this.rect5.w = 50;
    this.rect5.h = 50;

    this.rect6.x = 330;
    this.rect6.y = 200;
    this.rect6.w = 50;
    this.rect6.h = 50;
//3
    this.rect7.x = 0;
    this.rect7.y = 400;
    this.rect7.w = 50;
    this.rect7.h = 50;

    this.rect8.x = 160;
    this.rect8.y = 400;
    this.rect8.w = 50;
    this.rect8.h = 50;

    this.rect9.x = 330;
    this.rect9.y = 400;
    this.rect9.w = 50;
    this.rect9.h = 50;
    this.arrRect = [this.rect1,this.rect2,this.rect3,this.rect4,this.rect5,this.rect6,this.rect7,this.rect8,this.rect9,];
    
  }