图片裁剪完成拼图，有人知道怎么处理吗？

图片裁剪完成拼图

HarmonyOS

社恐的小美

2024-05-21 22:10:37

浏览

回答 1

待解决

回答 1

按赞同

按时间

克里斯蒂东

使用预置相机拍照后启动应用通过@ohos.multimedia.image和@ohos.multimedia.mediaLibrary接口实现获取图片，完成图片裁剪，在拼接功能

使用的核心API

@ohos.multimedia.image

@ohos.multimedia.mediaLibrary

核心代码解释

获取本地图片：首先使用getMediaLibrary获取媒体库实例，然后使用getFileAssets方法获取文件资源，最后使用getAllObject获取检索结果中的所有文件资产方便展示

async getAllImg() { 
  let fileKeyObj = mediaLibrary.FileKey 
  let fetchOp = { 
    selections: fileKeyObj.MEDIA_TYPE + '=?', 
    selectionArgs: [`${mediaLibrary.MediaType.IMAGE}`], 
  } 
  let mediaList: Array<mediaLibrary.FileAsset> = [] 
  //使用getFileAssets方法获取文件资源 
  const fetchFileResult = await this.media.getFileAssets(fetchOp) 
  Logger.info(TAG, `queryFile getFileAssetsFromType fetchFileResult.count = ${fetchFileResult.getCount()}`) 
  if (fetchFileResult.getCount() > 0) { 
    //使用getAllObject获取检索结果中的所有文件资产方便展示 
    mediaList = await fetchFileResult.getAllObject() 
  } 
  return mediaList 
}

图片编辑：首先使用createImagePacker创建ImagePacker实例，然后使用fileAsset.open打开文件，调用createImageSource接口创建图片源实例方便操作图片，接下来使用getImageInfo方法获取图片大小便于分割，最后使用createPixelMap方法传入每一份的尺寸参数完成图片裁剪。

async splitPic(index: number) { 
  let imagePixelMap: PictureItem[] = [] 
  let imgDatas: Array<mediaLibrary.FileAsset> = await this.getAllImg() 
  //首先使用createImagePacker创建ImagePacker实例 
  let imagePackerApi = image.createImagePacker() 
  //使用fileAsset.open打开文件 
  let fd = await imgDatas[index].open('r') 
  //调用createImageSource接口创建图片源实例方便操作图片 
  let imageSource = image.createImageSource(fd) 
  //接下来使用getImageInfo方法获取图片大小便于分割 
  let imageInfo = await imageSource.getImageInfo() 
  Logger.info(TAG, `sizeImg createImageSource ${JSON.stringify(imageSource)}`) 
  let height = imageInfo.size.height / SPLIT_COUNT 
  for (let i = 0; i < SPLIT_COUNT; i++) { 
    for (let j = 0; j < SPLIT_COUNT; j++) { 
      let picItem 
      if (i === SPLIT_COUNT - 1 && j === SPLIT_COUNT - 1) { 
        picItem = new PictureItem(9, undefined) 
        imagePixelMap.push(picItem) 
      } else { 
        Logger.info(TAG, `sizeImg x = ${imageInfo.size.width / SPLIT_COUNT} y = ${height}`) 
        let decodingOptions: image.DecodingOptions = { 
          desiredRegion: { 
            size: { 
              height: height, width: imageInfo.size.width / SPLIT_COUNT 
            }, x: j * imageInfo.size.width / SPLIT_COUNT, y: i * height 
          } 
        } 
        //使用createPixelMap方法传入每一份的尺寸参数完成图片裁剪。 
        picItem = await imageSource.createPixelMap(decodingOptions) 
        imagePixelMap.push({ 
          index: i * SPLIT_COUNT + j, pixelMap: picItem 
        }) 
      } 
    } 
  }

点击开始后随机排布裁剪后的图片，点击图片交换位置

/点击图片，交换位置，完成游戏 
gameBegin(pictures: PictureItem[]) { 
  AppStorage.Set<boolean>('isGameStart', true); 
  let len = pictures.length 
  let index, temp 
  while (len > 0) { 
    index = Math.floor(Math.random() * len) 
    temp = pictures[len-1] 
    pictures[len-1] = pictures[index] 
    pictures[index] = temp 
    len-- 
  } 
  return pictures 
}

拼图完成，结束游戏

gameOver() { 
  let count = 0 
  for (let i = 0;i < 7; i++) { 
    if (this.numArray[i].index == i) { 
      count++ 
    } else { 
      count = 0 
      break 
    } 
  } 
  if (count === 7) { 
    this.isGameStart = false 
    AlertDialog.show({ message: $r('app.string.congratulations') }) 
    clearInterval(this.timer) 
    this.gameTime = GAME_TIME 
  } 
}

实现效果