修改README文件

Signed-off-by: tyBrave <tianyong21@h-partners.com>
This commit is contained in:
tyBrave 2024-10-23 17:06:15 +08:00
parent 2d0b6ace7b
commit 3b60b9dc74
4 changed files with 107 additions and 38 deletions

View File

@ -1,3 +1,6 @@
## 3.1.1-rc.1
- 新增图片加载的回调信息
- 新增获取当前缓存的上限、大小及其当前对应缓存图片的个数的接口
## 3.1.1-rc.0
- 重构代码抽取ImageKnifeDispatcher子线程requestJob相关代码到ImageKnifeLoader中降低函数复杂度

View File

@ -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: (data) => {
let startCallBackData = JSON.stringify(data);
},
onLoadFailed: (res, err) => {
let failedBackData = res + ";" + JSON.stringify(err);
},
onLoadSuccess: (data, imageData) => {
let successBackData = JSON.stringify(imageData);
},
onLoadCancel: (res, cel) => {
let cancelBackData = res + ";" + JSON.stringify(cel);
}
},
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: (call?: ImageKnifeData) => void、onLoadSuccess: (data: string \| PixelMap \| undefined,call?: ImageKnifeData) => void、onLoadFailed: (err: string,errorInfo?: ErrorInfo) => void | Callback for image loading events. Optional. |
### ImageKnife
@ -325,6 +355,9 @@ 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. |
| getCacheUpperLimit | cacheType?: CacheStrategy | Gets the upper limit size of the specified cache |
| getCurrentPicturesNum | 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 |

View File

@ -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: (data) => {
let startCallBackData = JSON.stringify(data);
},
onLoadFailed: (res, err) => {
let failedBackData = res + ";" + JSON.stringify(err);
},
onLoadSuccess: (data, imageData) => {
let successBackData = JSON.stringify(imageData);
},
onLoadCancel: (res, cel) => {
let cancelBackData = res + ";" + JSON.stringify(cel);
}
},
border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
let render_success = JSON.stringify(Date.now())
}
}
})
}).width(100).height(100)
```
#### 复用场景
在aboutToRecycle生命周期清空组件内容通过watch监听触发图片的加载。
## 接口说明
@ -288,7 +317,7 @@ ImageKnifeAnimatorComponent({
### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
|-----------------------|-------------------------------------------------------|-----------------|
|-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
| loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示(可选) |
| errorholderSrc | PixelMap、Resource | 错误图展示(可选) |
@ -305,14 +334,14 @@ ImageKnifeAnimatorComponent({
| signature | String | 自定义缓存关键字(可选) |
| headerOption | Array<HeaderOptions> | 设置请求头(可选) |
| transformation | PixelMapTransformation | 图片变换(可选) |
| drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换(可选) |
| onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果(可选) |
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
| drawingColorFilter | ColorFilter \| drawing.ColorFilter | 图片变换(可选) |
| onComplete | (event:EventImage \| undefined) => voi | 颜色滤镜效果(可选) |
| onLoadListener | onLoadStart: (call?: ImageKnifeData) => void、onLoadSuccess: (data: string \| PixelMap \| undefined,call?: ImageKnifeData) => void、onLoadFailed: (err: string,errorInfo?: ErrorInfo) => void | 监听图片加载成功与失败 |
### ImageKnife接口
| 参数名称 | 入参内容 | 功能简介 |
|------------------|-------------------------------------------------------------------------------------------------------|---------------|
|------------------|-------------------------------------------------------------------------------------------------------|------------------|
| initMemoryCache | newMemoryCache: IMemoryCache | 自定义内存缓存策略 |
| initFileCache | context: Context, size: number, memory: number | 初始化文件缓存数量和大小 |
| preLoadCache | loadSrc: string I ImageKnifeOption | 预加载并返回文件缓存路径 |
@ -323,8 +352,12 @@ ImageKnifeAnimatorComponent({
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 |
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 |
| removeMemoryCache| url: string | ImageKnifeOption | 清理指定内存缓存 |
| removeFileCache | url: string | ImageKnifeOption | 清理指定磁盘缓存 |
| removeMemoryCache| url: string \| ImageKnifeOption | 清理指定内存缓存 |
| removeFileCache | url: string \| ImageKnifeOption | 清理指定磁盘缓存 |
| getCacheUpperLimit | cacheType?: CacheStrategy | 获取指定缓存的上限大小 |
| getCurrentPicturesNum | cacheType?: CacheStrategy | 获取指定缓存的当前缓存图片个数 |
| getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 |
### 图形变换类型需要为GPUImage添加依赖项
| 类型 | 相关描述 |

View File

@ -327,7 +327,7 @@ export class ImageKnife {
* @param cacheType
* @returns
*/
getCurrentPicturesNum(cacheType: CacheStrategy): number | undefined {
getCurrentPicturesNum(cacheType?: CacheStrategy): number | undefined {
if (cacheType == undefined || cacheType == CacheStrategy.Default) {
cacheType = CacheStrategy.Memory;
}
@ -347,7 +347,7 @@ export class ImageKnife {
* @param cacheType
* @returns
*/
getCurrentCacheSize(cacheType: CacheStrategy): number | undefined {
getCurrentCacheSize(cacheType?: CacheStrategy): number | undefined {
if (cacheType == undefined || cacheType == CacheStrategy.Default) {
cacheType = CacheStrategy.Memory;
}