如果你也对鸿蒙感兴趣，可以加入班级，一起学习鸿蒙开发！

场景介绍

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

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

效果预览

实现思路

1. 为Canvas画布绑定点击事件，根据点击位置计算座位号。
   1. Canvas(this.context)
   2. .onClick((e: ClickEvent) => {
   3. this.handleClick(e)
   4. })
   5. handleClick(e: ClickEvent) {
   6. // 计算出用户点击的座位号
   7. let x: number = Math.floor((e.displayX - StyleConstants.CANVAS_LEFT_MARGIN) / StyleConstants.RECT_INDEX)
   8. let y: number =
   9. Math.floor((e.displayY - StyleConstants.CANVAS_Y - this.getUIContext().px2vp(this.topRectHeight)) /
   10. StyleConstants.RECT_INDEX)
   11. }
2. 调用CanvasRenderingContext2D的fillStyle属性和fillRect方法为座位绘制相应颜色。
   1. drawRect(x: number, y: number, id: number) {
   2. // 根据不同的id值，绘制相应的颜色
   3. if (id === 0) {
   4. this.context.fillStyle = StyleConstants.DEFAULT_COLOR
   5. this.context.fillRect(StyleConstants.RECT_INDEX * x, StyleConstants.RECT_INDEX * y, StyleConstants.RECT_SIZE,
   6. StyleConstants.RECT_SIZE)
   7. }
   8. }

约束与限制

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

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──components
3. │ │ ├──CinemaInfo.ets // 电影院选座组件
4. │ │ ├──CustomDialogExample.ets // 弹窗组件
5. │ │ └──MovieInfo.ets // 电影信息组件
6. │ ├──constants
7. │ │ ├──StyleConstants.ets // 常量
8. │ │ └──CanvasData.ets // 常量
9. │ ├──entryability
10. │ │ └──EntryAbility.ets
11. │ └──pages
12. │ └──CanvasPage.ets // 主页
13. └──entry/src/main/resources // 应用资源目录

参考文档

Canvas

CanvasRenderingContext2D

代码下载

电影选座示例代码