Harmonyos5应用开发实战——图片拼图功能实现（part1）

文章概要

本文聚焦于HarmonyOS Next平台上图片拼图功能的开发实践。详细介绍了拼图页面的搭建，包括页面初始化、图片加载、界面布局、图片拼接方式选择以及订单确认等核心功能，为开发者在HarmonyOS Next环境下实现类似的图片处理功能提供了详细的参考。

核心功能及代码实现

1. 页面初始化与数据获取

在页面即将显示时，从页面路由参数中获取要拼接的图片的URI，并调用 loadImage 函数加载图片。代码如下：

async aboutToAppear(): Promise<void> {
  this.selectImg = (this.pageRouter.getParamByName(RouteMap.PIC_STITCH)[0] as RouterParams).imageUri
  this.loadImage()
}

2. 图片加载与缩放

loadImage 函数负责加载两张图片，并根据拼接区域的大小对图片进行缩放处理。代码如下：

async loadImage() {
  this.pixelItemLeft.pixelMap = await getPixelMapByUri(this.selectImg[0])
  this.pixelItemRight.pixelMap = await getPixelMapByUri(this.selectImg[1])
  if (!this.pixelItemLeft.pixelMap || !this.pixelItemRight.pixelMap) {
    return
  }
  this.leftInfo = await this.pixelItemLeft.pixelMap.getImageInfo()
  this.rightInfo = await this.pixelItemRight.pixelMap.getImageInfo()
  let leftScale = componentUtils.getRectangleById(STITCH_AREA_ID).size.width / this.leftInfo.size.width
  let rightScale = componentUtils.getRectangleById(STITCH_AREA_ID).size.width / this.rightInfo.size.width
  this.pixelItemRight.pixelMap.scaleSync(rightScale, rightScale)
  this.pixelItemLeft.pixelMap.scaleSync(leftScale, leftScale)
  this.leftInfo = await this.pixelItemLeft.pixelMap.getImageInfo()
  this.rightInfo = await this.pixelItemRight.pixelMap.getImageInfo()
}