From c5a861f4fe1a248d8c7aa06654b71aafb66dff38 Mon Sep 17 00:00:00 2001 From: tyBrave Date: Fri, 25 Oct 2024 22:51:18 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=8E=A5=E5=8F=A3=E5=9B=9E?= =?UTF-8?q?=E8=B0=83=E4=BF=A1=E6=81=AF=E7=9A=84README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: tyBrave --- CHANGELOG.md | 4 ++++ README.md | 36 +++++++++++++++++++++++++++++++++++- README_zh.md | 36 +++++++++++++++++++++++++++++++++++- library/oh-package.json5 | 2 +- 4 files changed, 75 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fcaf96b..cfe310e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 3.2.0-rc.1 +- Added callback information for image loading +- Added the interface for obtaining the upper limit and size of the current cache and the number of images corresponding to the current cache + ## 3.2.0-rc.0 - Rollback the old version V1 decorator. V2 decorator will be provided in version 4.x - The sub-thread network request is changed to asynchronous, thereby increasing the number of concurrent sub-thread network requests diff --git a/README.md b/README.md index c1a3ab4..16f35bb 100644 --- a/README.md +++ b/README.md @@ -264,6 +264,36 @@ ImageKnifeAnimatorComponent({ },animatorOption:this.animatorOption }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` + +#### 11.Load the image callback information data +``` +ImageKnifeComponent({ ImageKnifeOption: = new ImageKnifeOption({ + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadStart: (req) => { + let startCallBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadFailed: (res, req) => { + let failedBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + }, + onLoadSuccess: (data, imageData, req) => { + let successBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadCancel: (res, req) => { + let cancelBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + } + }, + border: { radius: 50 }, + onComplete: (event) => { + if (event && event.loadingStatus == 0) { + let render_success = JSON.stringify(Date.now()) + } + } + }) +}).width(100).height(100) +``` + #### Reuse Scenario Clear the component content in the **aboutToRecycle** lifecycle and trigger image loading through watch observeration. ## Available APIs @@ -307,7 +337,7 @@ Clear the component content in the **aboutToRecycle** lifecycle and trigger imag | transformation | PixelMapTransformation | Image transformation. Optional. | | drawingColorFilter | ColorFilter | Drawing color filter. Optional. | | onComplete | (event:EventImage \| undefined)=>void | Callback for image loading completion. Optional. | -| onLoadListener | onLoadStart:()=>void,onLoadSuccess:(data:string\|Pixelmap)=>void | Callback for image loading events. Optional. | +| onLoadListener | onLoadStart?: (req?: ImageKnifeRequest) => void,onLoadSuccess?: (data: string \| PixelMap \| undefined, imageData: ImageKnifeData, req?: ImageKnifeRequest) => void,onLoadFailed?: (err: string, req?: ImageKnifeRequest) => void,onLoadCancel?: (res: string, req?: ImageKnifeRequest) => void | Callback for image loading events. Optional. | ### ImageKnife @@ -325,6 +355,10 @@ Clear the component content in the **aboutToRecycle** lifecycle and trigger imag | putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | Writes to the memory disk cache. | | removeMemoryCache | url: string | Removes an entry from the memory cache. | | removeFileCache | url: string | Removes an entry from the file cache. | +| getCacheLimitSize | cacheType?: CacheStrategy | Gets the upper limit size of the specified cache | +| getCurrentCacheNum | cacheType?: CacheStrategy | Gets the number of images currently cached in the specified cache | +| getCurrentCacheSize | cacheType?: CacheStrategy | Gets the current size of the specified cache | + ### Graphics tRansformation Types (GPUImage Dependency Required) | Type | Description | diff --git a/README_zh.md b/README_zh.md index 53bed8f..a01aac5 100644 --- a/README_zh.md +++ b/README_zh.md @@ -264,6 +264,35 @@ ImageKnifeAnimatorComponent({ },animatorOption:this.animatorOption }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` +#### 11.加载图片回调信息数据 示例 +``` +ImageKnifeComponent({ ImageKnifeOption: = new ImageKnifeOption({ + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadStart: (req) => { + let startCallBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadFailed: (res, req) => { + let failedBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + }, + onLoadSuccess: (data, imageData, req) => { + let successBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadCancel: (res, req) => { + let cancelBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + } + }, + border: { radius: 50 }, + onComplete: (event) => { + if (event && event.loadingStatus == 0) { + let render_success = JSON.stringify(Date.now()) + } + } + }) +}).width(100).height(100) +``` + #### 复用场景 在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。 ## 接口说明 @@ -307,7 +336,7 @@ ImageKnifeAnimatorComponent({ | transformation | PixelMapTransformation | 图片变换（可选） | | drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） | | onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） | -| onLoadListener | onLoadStart: () => void，onLoadSuccess: (data: string、PixelMap、undefined) => void，onLoadFailed: (err: string) => void | 监听图片加载成功与失败 | +| onLoadListener | onLoadStart?: (req?: ImageKnifeRequest) => void,onLoadSuccess?: (data: string \| PixelMap \| undefined, imageData: ImageKnifeData, req?: ImageKnifeRequest) => void,onLoadFailed?: (err: string, req?: ImageKnifeRequest) => void,onLoadCancel?: (res: string, req?: ImageKnifeRequest) => void | 监听图片加载成功与失败 | ### ImageKnife接口 @@ -328,6 +357,11 @@ ImageKnifeAnimatorComponent({ | putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 | | removeMemoryCache | url: string | ImageKnifeOption | 清理指定内存缓存 | | removeFileCache | url: string | ImageKnifeOption | 清理指定磁盘缓存 | +| getCacheLimitSize | cacheType?: CacheStrategy | 获取指定缓存的上限大小 | +| getCurrentCacheNum | cacheType?: CacheStrategy | 获取指定缓存的当前缓存图片个数 | +| getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | + + ### 图形变换类型（需要为GPUImage添加依赖项） | 类型 | 相关描述 | diff --git a/library/oh-package.json5 b/library/oh-package.json5 index 4d5208b..5b0a79b 100644 --- a/library/oh-package.json5 +++ b/library/oh-package.json5 @@ -14,7 +14,7 @@ "main": "index.ets", "repository": "https://gitee.com/openharmony-tpc/ImageKnife", "type": "module", - "version": "3.2.0-rc.0", + "version": "3.2.0-rc.1", "dependencies": { "@ohos/gpu_transform": "^1.0.2" },