From 0f478b1533ca9c2cbf8c19f59d8c2692a088c122 Mon Sep 17 00:00:00 2001 From: yeyedeshen Date: Thu, 2 Nov 2023 10:39:01 +0800 Subject: [PATCH] =?UTF-8?q?GamePuzzle=E3=80=81Image=E3=80=81ImageShow=20RE?= =?UTF-8?q?ADME=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: yeyedeshen --- media/GamePuzzle/README.md | 60 +++++++++++++++++++++++++------------- media/Image/README.md | 39 ++++++++++++++++++++----- media/Image/README_zh.md | 1 + media/ImageShow/README.md | 10 +++---- 4 files changed, 78 insertions(+), 32 deletions(-) diff --git a/media/GamePuzzle/README.md b/media/GamePuzzle/README.md index 4eb59b8b..637fbf54 100644 --- a/media/GamePuzzle/README.md +++ b/media/GamePuzzle/README.md @@ -2,34 +2,54 @@ ### Introduction -This puzzle game app is developed based on the **\** component. It uses the `Image` and `MediaLibrary` APIs to obtain and crop images. Below shows the sample app. - -![running](screenshot/devices/change.jpeg) - -### Concepts - -`ImagePacker`: a class that provides APIs to pack images. Before calling any API in `ImagePacker`, you must use `createImagePacker` to create an `ImagePacker` instance. - -`MediaLibrary`: a class that provides APIs to access and modify media data such as audios, videos, images, and documents. +This example uses the [@ohos.multimedia.image](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-image-0000001477981401-V3) and [@ohos.multimedia.mediaLibrary](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-medialibrary-0000001478061921-V3) interfaces to obtain images and perform image cropping and segmentation functions. + +### Effect Preview +|home page| run | +|---|--------------------------------------------| +|![running](screenshot/devices/running.jpeg)| ![running](screenshot/devices/change.jpeg) | + +Instructions for use： +1. After taking photos with the preset camera, start the application. The application homepage will read the image file inside the device and display the first image obtained. If there are no images, the image position will be blank； +2. After clicking Start, the countdown will begin. If the puzzle is not completed within the specified time, the game will end. In the game, players click Restart to reset the game； +3. After clicking to start the game, players can move around the gray grid images based on the large image above. After clicking, the images and gray grids exchange positions, and finally assemble a complete image； +4. When not in the game, players can click on the large image above and choose a custom image to play the puzzle game。 + +### project directory +``` +VideoComponent/src/main/ets/components +|---common +| |---ImagePicker.ets // Picture selection +|---model +| |---GameRules.ts // Game Rules +| |---ImageModel.ts // Image operation +| |---Logger.ts // log +| |---PictureItem.ts // Decomposed images +|---pages +| |---Index.ets // home page +``` + +### Specific implementation ++ The effect of image cropping and segmentation in the game is implemented in ImageModel，source code reference [ImageModel](entry/src/main/ets/model/ImageModel.ts): + + Get local images：First, use getMediaLibrary to obtain a media library instance，then use the getFileAssets method to obtain file resources，finally, use getAllObject to retrieve all the file assets in the search results for easy display； + + Crop Image Preparation：Cropping images requires the use of [@ohos.multimedia.image](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-image-0000001477981401-V3) interface，before cropping, you need to apply for image editing permission，using [requestPermissionsFromUser](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-abilityaccessctrl-0000001478341361-V3#ZH-CN_TOPIC_0000001478341361__requestpermissionsfromuser9) + apply for，source code reference [Index.ets](entry/src/main/ets/pages/Index.ets); + + Image editing：First, use createImagePacker to create an ImagePacker instance，then use fileAsset. open to open the file，calling the createImageSource interface to create an image source instance facilitates image manipulation，next, use the getImageInfo method to obtain the image size for easy segmentation，finally, use the createPixelMap method to pass in the size parameters of each copy to complete image cropping。 ### Required Permissions -ohos.permission.READ_MEDIA - -### Usage - -1. The sample app reads the image files on the local device and displays the first image it obtains. If there is no image on the local device, a blank is displayed. +[ohos.permission.READ_MEDIA](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/permission-list-0000001281480750) -2. Touch **Start**, and the countdown begins. If you fail to finish the puzzle within the specified time, the game ends. You can touch **Restart** to play the game again. +[ohos.permission.MEDIA_LOCATION](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/permission-list-0000001281480750) -3. When the game is in progress, you can touch any image around the gray grid to swap the position of the image and highlighted grid cell, until you get a complete image. +### Dependency -4. When the game is not in progress, you can touch the large image on the top and select another image for the game. +N/A ### Constraints -1. This sample can only be run on standard-system devices. +1. This sample only supports running on standard systems and supports devices such as Huawei phones or Huawei phone emulators running on DevEco Studio. -2. This sample demonstrates the stage model, which supports only API version 10. +2. This sample is the Stage model, which is supported starting from API version 9. -3. This sample requires DevEco Studio 3.1 Canary1 (Build Version: 3.1.0.100) to compile and run. +3. DevEco Studio 3.1 Beta2 (Build Version：3.1.0.400) must be used. diff --git a/media/Image/README.md b/media/Image/README.md index 90a7cee9..40286b9c 100644 --- a/media/Image/README.md +++ b/media/Image/README.md @@ -6,6 +6,11 @@ This sample demonstrates the image processing function. In this sample, [\