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

图片裁剪完成拼图

HarmonyOS
2024-05-21 22:10:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Dinkar

使用预置相机拍照后启动应用通过@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 
  } 
}

实现效果

注明适配的版本信息

DevEco Studio Version: 4.0.1.601

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-22 20:44:39
相关问题
SnapShot定位,有人知道怎么处理
414浏览 • 1回复 待解决
有人知道社区怎么预约直播
1379浏览 • 1回复 已解决
图片压缩并保存方法,有人知道
349浏览 • 0回复 待解决
如何对相册图片进行编辑裁剪
738浏览 • 1回复 待解决
有人知道怎么在markdown里面写目录
1243浏览 • 1回复 已解决
有人知道轻量系统上怎么使用MQTT
1354浏览 • 2回复 已解决
怎么压缩一个目录?有人知道
352浏览 • 1回复 待解决
webview组件demo ,有人知道
444浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3212浏览 • 1回复 待解决
taskpool 使用问题,有人知道
424浏览 • 1回复 待解决
有人知道
55浏览 • 1回复 待解决
如何跳出ForEach,有人知道
701浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
177浏览 • 1回复 待解决
如何发送短信,有人知道?
673浏览 • 1回复 待解决
卡片里怎么更换图片知道?
4896浏览 • 1回复 待解决
通知里怎么显示图片知道?
4126浏览 • 2回复 待解决
有人知道关于页demo
419浏览 • 1回复 待解决
如何使用快速修复,有人知道
255浏览 • 1回复 待解决