鸿蒙开发案例：七巧板

【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%')
  }
}