基于Canvas实现选座功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于Canvas组件，构建了一个有关电影院购票选座场景，实现了选座/退座功能。

基于Canvas实现选座功能源码链接

效果预览

使用说明

1.应用启动时展示一个10×10的正方形，每个小正方形相当于一个座位；

2.点击任何一个正方形，该正方形变成黄色，表示该座位被选中，座位号记录下来，选中座位数量增加；

3.点击选中按钮，弹出对话框，显示选中的座位，提示你是否确认支付，如果确认，选中的座位就会 变成红色，如果取消，对话框消失。之后还能正常选择；

4.如果点击清空，所有选中的和确认的座位都变成灰色，恢复到初始状态。

实现思路

1. 使用canvas组件画图，开始进入页面时，画一个10×10的正方形，同时使用seats记录座位是否被选中，默认值0表示没选中。

   Column({ space: 20 }) {
      Canvas(this.context)
        .width('100%')
        .height('70%')
        .onReady(() => {
          this.context.fillStyle = '#ccc'
          for (let i = 0; i < 10; i++) {
            for (let j = 0; j < 10; j++) {
              this.context.fillRect(40 * i, 10 + 40 * j, 30, 30)
            }
          }
        })

  aboutToAppear(): void {
    for (let i = 0; i < this.HEIGHT; i++) {
      this.seats.push([])
      for (let j = 0; j < this.WIDTH; j++) {
        this.seats[i].push(0)
      }
    }
  }

2. 定义drawRect函数，用来画图，id为0画笔是灰色，id为1是黄色，id是2表示红色，同时给canvas画布绑定点击时间，算出点击的座位号，然后把该座位变成黄色，改变seats对应的座位号变成1，记录选中的座位号。

   Canvas(this.context)
        .width('100%')
        .height('70%')
        .onReady(() => {
          this.context.fillStyle = '#ccc'
          for (let i = 0; i < 10; i++) {
            for (let j = 0; j < 10; j++) {
              this.context.fillRect(40 * i, 10 + 40 * j, 30, 30)
            }
          }
        })
        .onClick((e: ClickEvent) => {
          this.handleClick(e)
        })

    handleClick(e: ClickEvent) {
    let x: number = Math.floor(e.displayX / 40)
    let y: number = Math.floor((e.displayY - 10) / 40) - 1
    if (x >= 0 && x < this.HEIGHT && y >= 0 && y < this.WIDTH) {
      if (this.seats[x][y] === 1) {
        promptAction.showToast({
          message: '该座位已经选中，请选择其他座位'
        })
        return
      } else if (this.seats[x][y] === 2) {
        promptAction.showToast({
          message: '该座位已经确认，请选择其他座位'
        })
        return
      } else {
        this.drawRect(x, y, 1)
      }
    }
  }

   drawRect(x: number, y: number, id: number) {
    if (id === 0) {
      this.context.fillStyle = '#ccc'
    } else if (id === 1) {
      this.context.fillStyle = '#ff0'
      this.seats[x][y] = 1
      this.count++
      this.selectedSeats.push([x, y])
    } else {
      this.context.fillStyle = '#f00'
    }
    this.context.fillRect(40 * x, 10 + 40 * y, 30, 30)
  }

3. 点击选中座位按钮，弹出对话框。

     Button(this.count ? `已选中${this.count}个座位` : '没有选中座位')
        .onClick(() => {
          if (this.dialogController != null && this.count !== 0) {
            this.dialogController.open()
          } else if (this.count === 0) {
            promptAction.showToast({
              message: '你还没选择座位，请选择座位'
            })
          }
        })

4. 点击选中座位按钮，弹出对话框。

    confirm() {
    for (let i = 0; i < this.selectedSeats.length; i++) {
      this.drawRect(this.selectedSeats[i][0], this.selectedSeats[i][1], 2)
      this.seats[this.selectedSeats[i][0]][this.selectedSeats[i][1]] = 2
    }
    this.count = 0
    this.selectedSeats = []
     }

5. 点击清空，所有的座位都变成灰色，同时记录也清空。