鸿蒙便捷生活类行业实践——关键场景实例

场景介绍

电影选座是便捷生活类应用中的典型场景之一，如用户在购票选座时，会点击、取消以及确认选座。

本示例主要基于Canvas组件来绘制影院座位分布，根据点击位置计算出座位号，调用CanvasRenderingContext2D的fillStyle属性和fillRect方法为每个座位绘制相应的颜色，以实现电影选座功能。

效果预览

实现思路

1. 为Canvas画布绑定点击事件，根据点击位置计算座位号。

   Canvas(this.context)
   .onClick((e: ClickEvent) => {
   this.handleClick(e)
   })
   handleClick(e: ClickEvent) {
   // 计算出用户点击的座位号
   let x: number = Math.floor((e.displayX - StyleConstants.CANVAS_LEFT_MARGIN) / StyleConstants.RECT_INDEX)
   let y: number =
   Math.floor((e.displayY - StyleConstants.CANVAS_Y - this.getUIContext().px2vp(this.topRectHeight)) /
   StyleConstants.RECT_INDEX)
   }

2. 调用CanvasRenderingContext2D的fillStyle属性和fillRect方法为座位绘制相应颜色。

   drawRect(x: number, y: number, id: number) {
   // 根据不同的id值，绘制相应的颜色
   if (id === 0) {
   this.context.fillStyle = StyleConstants.DEFAULT_COLOR
   this.context.fillRect(StyleConstants.RECT_INDEX * x, StyleConstants.RECT_INDEX * y, StyleConstants.RECT_SIZE,
   StyleConstants.RECT_SIZE)
   }
   }

约束与限制

• 本示例支持API Version 16 Release及以上版本。
• 本示例支持HarmonyOS 5.0.4 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。

工程目录

├──entry/src/main/ets // 代码区
│ ├──components
│ │ ├──CinemaInfo.ets // 电影院选座组件
│ │ ├──CustomDialogExample.ets // 弹窗组件
│ │ └──MovieInfo.ets // 电影信息组件
│ ├──constants
│ │ ├──StyleConstants.ets // 常量
│ │ └──CanvasData.ets // 常量
│ ├──entryability
│ │ └──EntryAbility.ets
│ └──pages
│ └──CanvasPage.ets // 主页
└──entry/src/main/resources // 应用资源目录

加入下方链接班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日