鸿蒙开发案例：七巧板
作者：zhongcx
- 2024-11-07 广东
本文字数：5238 字
阅读完需：约 17 分钟
【1】引言（完整代码在最后面）
本文介绍的拖动七巧板游戏是一个简单的益智游戏，用户可以通过拖动和旋转不同形状的七巧板块来完成拼图任务。整个游戏使用鸿蒙 Next 框架开发，利用其强大的 UI 构建能力和数据响应机制，实现了流畅的用户体验。
【2】环境准备
电脑系统：windows 10
开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI
【3】关键技术点
1. TangramBlock 类定义 游戏的核心在于 TangramBlock 类的定义，它封装了每个七巧板块的属性和行为。类中包含了宽度、高度、颜色、初始和当前偏移量、旋转角度等属性，并提供了重置数据的方法。这为后续的数据绑定和 UI 渲染奠定了基础。
2. 数据绑定与响应式更新 在鸿蒙 Next 中，使用 @ObservedV2 和 @Trace 装饰器可以轻松实现数据的观察和响应式更新。每当 TangramBlock 实例中的属性发生变化时，UI 会自动更新以反映最新的状态。这种机制极大地简化了数据同步的工作，使得开发者可以专注于逻辑实现而无需担心 UI 更新的问题。
3. UI 构建与布局管理 鸿蒙 Next 提供了丰富的 UI 组件和布局工具，使得构建复杂的用户界面变得简单。在这个项目中，我们使用了 Column、Stack、Polygon 等组件来构建七巧板块的布局。通过嵌套这些组件，我们可以灵活地控制每个板块的位置和大小。
4. 手势处理与交互 为了实现拖动和旋转功能，我们使用了 PanGesture 和 rotate 方法来处理用户的触摸和手势操作。当用户拖动板块时，通过更新 initialOffsetX 和 initialOffsetY 属性，可以实时反映板块的位置变化。同样，通过增加或减少 rotationAngle 属性，可以实现板块的旋转效果。
5. 动画与过渡 鸿蒙 Next 内置了丰富的动画和过渡效果，使得用户交互更加自然。在本项目中，我们使用了 animateTo 方法来平滑地更新板块的状态，从而提升了用户体验。
5.1 旋转动画属性
.rotate({ angle: block.rotationAngle,})
复制代码
5.2 翻转动画属性
.rotate({ x: 0, y: 1, z: 0, angle: block.flipAngle, centerX: block.width / 2, // 中心点X坐标 centerY: block.height / 2, // 中心点Y坐标})
复制代码
5.3 平移动画属性
.translate({ x: block.initialOffsetX, y: block.initialOffsetY, z: 0 })
复制代码
【完整代码】
@ObservedV2 // 监听数据变化的装饰器class TangramBlock { // 定义七巧板类 width: number; // 宽度 height: number; // 高度 points: Array<[number, number]>; // 点坐标数组 color: string; // 颜色 @Trace initialOffsetX: number; // 初始X偏移量 @Trace initialOffsetY: number; // 初始Y偏移量 @Trace currentOffsetX: number; // 当前X偏移量 @Trace currentOffsetY: number; // 当前Y偏移量 @Trace rotationAngle: number; // 旋转角度 @Trace flipAngle: number = 0; // 翻转角度，默认为0 @Trace rotateValue: number; // 旋转值 defaultInitialOffsetX: number; // 默认初始X偏移量 defaultInitialOffsetY: number; // 默认初始Y偏移量 defaultRotationAngle: number; // 默认旋转角度
constructor(color: string, width: number, height: number, initialOffsetX: number, initialOffsetY: number, rotationAngle: number, points: Array<[number, number]>) { this.initialOffsetX = this.currentOffsetX = this.defaultInitialOffsetX = initialOffsetX; // 初始化X偏移量 this.initialOffsetY = this.currentOffsetY = this.defaultInitialOffsetY = initialOffsetY; // 初始化Y偏移量 this.rotationAngle = this.rotateValue = this.defaultRotationAngle = rotationAngle; // 初始化旋转角度 this.color = color; // 设置颜色 this.width = width; // 设置宽度 this.height = height; // 设置高度 this.points = points; // 设置点坐标数组 }
resetData() { // 重置数据方法 this.flipAngle = 0; // 重置翻转角度 this.initialOffsetX = this.currentOffsetX = this.defaultInitialOffsetX; // 重置初始X偏移量 this.initialOffsetY = this.currentOffsetY = this.defaultInitialOffsetY; // 重置初始Y偏移量 this.rotationAngle = this.rotateValue = this.defaultRotationAngle; // 重置旋转角度 }}
const baseUnitLength: number = 80; // 基本单位长度
@Entry // 入口组件@Component // 定义组件export struct Index { // 主组件 @State selectedBlockIndex: number = -1; // 当前选中位置 @State blocks: TangramBlock[] = [// 七巧板数组 // 小直角等腰三角形 new TangramBlock("#fed8e5", baseUnitLength, baseUnitLength, -33.58, -58.02, 135, [[0, 0], [baseUnitLength, 0], [0, baseUnitLength]]), new TangramBlock("#0a0bef", baseUnitLength, baseUnitLength, 78.76, 54.15, 45, [[0, 0], [baseUnitLength, 0], [0, baseUnitLength]]), // 中直角等腰三角形 new TangramBlock("#ff0d0c", baseUnitLength * Math.sqrt(2), baseUnitLength * Math.sqrt(2), -33.16, -1.43, -90, [[0, 0], [baseUnitLength * Math.sqrt(2), 0], [0, baseUnitLength * Math.sqrt(2)]]), // 大直角等腰三角形 new TangramBlock("#ffa60a", baseUnitLength * 2, baseUnitLength * 2, 22.46, -172, -135, [[0, 0], [baseUnitLength * 2, 0], [0, baseUnitLength * 2]]), new TangramBlock("#3da56a", baseUnitLength * 2, baseUnitLength * 2, 135.65, -59.34, -45, [[0, 0], [baseUnitLength * 2, 0], [0, baseUnitLength * 2]]), // 正方形 new TangramBlock("#ffff0b", baseUnitLength, baseUnitLength, 23.07, -1.84, -45, [[0, 0], [baseUnitLength, 0], [baseUnitLength, baseUnitLength], [0, baseUnitLength]]), // 平行四边形 new TangramBlock("#5e0b9b", baseUnitLength * 2, baseUnitLength, -61.53, -85.97, 45, [[0, 0], [baseUnitLength, 0], [baseUnitLength * 2, baseUnitLength], [baseUnitLength, baseUnitLength]]) ];
build() { // 构建方法 Column({ space: 30 }) { // 创建垂直布局 Stack() { // 创建堆叠布局 ForEach(this.blocks, (block: TangramBlock, index: number) => { // 遍历七巧板数组 Stack() { // 创建堆叠布局 Polygon({ width: block.width, height: block.height })// 绘制多边形 .points(block.points)// 设置多边形顶点坐标 .fill(block.color)// 填充颜色 .draggable(false)// 长按不可拖动 .rotate({ angle: block.rotationAngle }) // 旋转角度 } .rotate({ // 旋转 x: 0, y: 1, z: 0, angle: block.flipAngle, centerX: block.width / 2, // 中心点X坐标 centerY: block.height / 2, // 中心点Y坐标 }) .width(block.width) // 设置宽度 .height(block.height) // 设置高度 .onTouch(() => { // 触摸事件 this.selectedBlockIndex = index; // 设置选中索引 }) .draggable(false) // 长按不可拖动 .translate({ x: block.initialOffsetX, y: block.initialOffsetY, z: 0 }) // 平移 .gesture( // 手势操作 PanGesture()// 拖动手势 .onActionUpdate((event: GestureEvent | undefined) => { // 更新事件 if (event) { block.initialOffsetX = block.currentOffsetX + event.offsetX; // 更新X偏移量 block.initialOffsetY = block.currentOffsetY + event.offsetY; // 更新Y偏移量 } }) .onActionEnd((event: GestureEvent | undefined) => { // 结束事件 if (event) { block.currentOffsetX = block.initialOffsetX; // 更新当前X偏移量 block.currentOffsetY = block.initialOffsetY; // 更新当前Y偏移量 } }) ) .zIndex(this.selectedBlockIndex == index ? 1 : 0) // 设置层级 .borderWidth(2) // 边框宽度 .borderStyle(BorderStyle.Dashed) // 边框样式 .borderColor(this.selectedBlockIndex == index ? "#80a8a8a8" : Color.Transparent) // 边框颜色 }) }.width('100%').height('750lpx') // 设置宽高 .backgroundColor("#e4f2f5") // 背景颜色
// 旋转角度计数器 Column({ space: 5 }) { // 创建垂直布局，设置间距 Text(`旋转角度(间隔5)`).fontColor(Color.Black) // 显示旋转角度文本，设置字体颜色 Counter() { // 创建计数器组件 Text(`${this.selectedBlockIndex != -1 ? this.blocks[this.selectedBlockIndex].rotationAngle : '-'}`)// 显示当前选中七巧板的旋转角度或占位符 .fontColor(Color.Black) // 设置字体颜色 } .width(300) // 设置计数器宽度 .onInc(() => { // 增加按钮的点击事件 if (this.selectedBlockIndex != -1) { animateTo({}, () => { this.blocks[this.selectedBlockIndex].rotationAngle += 5; // 增加旋转角度 }) } }).onDec(() => { // 减少按钮的点击事件 if (this.selectedBlockIndex != -1) { animateTo({}, () => { this.blocks[this.selectedBlockIndex].rotationAngle -= 5; // 减少旋转角度 }) } }); }
// 旋转角度计数器 Column({ space: 5 }) { // 创建垂直布局，设置间距 Text(`旋转角度(间隔45)`).fontColor(Color.Black) // 显示旋转角度文本，设置字体颜色 Counter() { // 创建计数器组件 Text(`${this.selectedBlockIndex != -1 ? this.blocks[this.selectedBlockIndex].rotationAngle : '-'}`)// 显示当前选中七巧板的旋转角度或占位符 .fontColor(Color.Black) // 设置字体颜色 } .width(300) // 设置计数器宽度 .onInc(() => { // 增加按钮的点击事件 if (this.selectedBlockIndex != -1) { animateTo({}, () => { this.blocks[this.selectedBlockIndex].rotationAngle += 45; // 增加旋转角度 }) } }).onDec(() => { // 减少按钮的点击事件 if (this.selectedBlockIndex != -1) { animateTo({}, () => { this.blocks[this.selectedBlockIndex].rotationAngle -= 45; // 减少旋转角度 }) } }); }
// 翻转按钮 Row() { // 创建水平布局 Button('向左翻转').onClick(() => { // 左翻转按钮点击事件 animateTo({}, () => { if (this.selectedBlockIndex != -1) { this.blocks[this.selectedBlockIndex].flipAngle -= 180; // 减少翻转角度 } }); });
Button('向右翻转').onClick(() => { // 右翻转按钮点击事件 animateTo({}, () => { if (this.selectedBlockIndex != -1) { this.blocks[this.selectedBlockIndex].flipAngle += 180; // 增加翻转角度 } }); }); }.width('100%').justifyContent(FlexAlign.SpaceEvenly) // 设置宽度和内容对齐方式
// 重置和隐藏边框按钮 Row() { // 创建水平布局 Button('重置').onClick(() => { // 重置按钮点击事件 animateTo({}, () => { for (let i = 0; i < this.blocks.length; i++) { this.blocks[i].resetData(); // 重置七巧板数据 } this.selectedBlockIndex = -1; // 重置选中索引 }); });
Button('隐藏边框').onClick(() => { // 隐藏边框按钮点击事件 this.selectedBlockIndex = -1; // 重置选中索引 }); }.width('100%').justifyContent(FlexAlign.SpaceEvenly) // 设置宽度和内容对齐 }.width('100%').height('100%') }}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
zhongcx
关注
还未添加个人签名 2024-09-27 加入
还未添加个人简介
评论