floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

图片加载事件增加请求开始的回调，以及修复有缓存时，没有回调的bug 

Signed-off-by: madixin <madixin@huawei.com>
This commit is contained in:
madixin 2024-05-17 09:00:53 +08:00
parent f26f96fd2f
commit 7acce8276a
5 changed files with 66 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -1,5 +1,6 @@
## 3.0.0-rc.5 ## 3.0.0-rc.5
- 修复可视化代码逻辑 - 图片加载事件增加请求开始的回调,以及修复有缓存时，没有回调的bug
- 修复对已销毁组件不再下发请求的逻辑
## 3.0.0-rc.4 ## 3.0.0-rc.4
- 支持hsp多包图片资源 - 支持hsp多包图片资源

38
README.md
View File

@ -152,25 +152,25 @@ ImageKnifeComponent({ ImageKnifeOption:
### ImageKnifeOption参数列表 ### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 | | 参数名称 | 入参内容 | 功能简介 |
|-----------------------|---------------------------------------------------|-----------------| |-----------------------|-------------------------------------------------------|-----------------|
| loadSrc | string、PixelMap、Resource | 主图展示 | | loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） | | placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） | | errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
| objectFit | ImageFit | 主图填充效果（可选） | | objectFit | ImageFit | 主图填充效果（可选） |
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） | | placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） | | errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) | | writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） | | onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 | | customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
| border | BorderOptions | 边框圆角（可选） | | border | BorderOptions | 边框圆角（可选） |
| priority | taskpool.Priority | 加载优先级（可选） | | priority | taskpool.Priority | 加载优先级（可选） |
| context | common.UIAbilityContext | 上下文（可选） | | context | common.UIAbilityContext | 上下文（可选） |
| progressListener | (progress: number)=>void | 进度（可选） | | progressListener | (progress: number)=>void | 进度（可选） |
| signature | String | 自定义缓存关键字（可选） | | signature | String | 自定义缓存关键字（可选） |
| headerOption | Array<HeaderOptions> | 设置请求头（可选） | | headerOption | Array<HeaderOptions> | 设置请求头（可选） |
| transformation | PixelMapTransformation | 图片变换（可选） | | transformation | PixelMapTransformation | 图片变换（可选） |
| onLoadListener | onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 | | onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
### ImageKnife接口 ### ImageKnife接口

14
entry/src/main/ets/pages/LoadStatePage.ets
View File

@ -18,7 +18,9 @@ import matrix4 from '@ohos.matrix4'
@Entry @Entry
@Component @Component
struct LoadStatePage { struct LoadStatePage {
@State matrix1: object = matrix4.identity().scale({ x: 1, y: 1 })
starTime:number = new Date().getTime()
@State ImageKnifeOption: ImageKnifeOption = { @State ImageKnifeOption: ImageKnifeOption = {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
@ -48,11 +50,15 @@ struct LoadStatePage {
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
onLoadListener: { onLoadListener: {
onLoadStart:()=>{
this.starTime = new Date().getTime()
console.info("Load start: ");
},
onLoadFailed: (err) => { onLoadFailed: (err) => {
console.error("Load Failed Reason: " + err); console.error("Load Failed Reason: " + err + " cost " + (new Date().getTime() - this.starTime) + " milliseconds");
}, },
onLoadSuccess: (data) => { onLoadSuccess: (data) => {
console.info("Load Successful: " + data); console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
return data; return data;
}, },
}, },
@ -63,7 +69,6 @@ struct LoadStatePage {
.margin({ top: 20 }) .margin({ top: 20 })
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200) ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
.transform(this.matrix1)
.margin({ top: 20 }) .margin({ top: 20 })
} }
@ -71,4 +76,5 @@ struct LoadStatePage {
.width('100%') .width('100%')
.height('100%') .height('100%')
} }
} }

35
library/src/main/ets/ImageKnifeDispatcher.ets
View File

@ -67,10 +67,19 @@ export class ImageKnifeDispatcher {
if (memoryCache !== undefined) { if (memoryCache !== undefined) {
// 画主图 // 画主图
if (request.requestState === ImageKnifeRequestState.PROGRESS) { if (request.requestState === ImageKnifeRequestState.PROGRESS) {
// 回调请求开始
if (requestSource === ImageKnifeRequestSource.SRC && request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) {
request.imageKnifeOption.onLoadListener?.onLoadStart()
}
request.ImageKnifeRequestCallback?.showPixelMap(request.componentVersion, memoryCache.source, requestSource) request.ImageKnifeRequestCallback?.showPixelMap(request.componentVersion, memoryCache.source, requestSource)
if (requestSource == ImageKnifeRequestSource.SRC) { if (requestSource == ImageKnifeRequestSource.SRC) {
request.requestState = ImageKnifeRequestState.COMPLETE request.requestState = ImageKnifeRequestState.COMPLETE
// 回调请求开结束
if (request.imageKnifeOption.onLoadListener?.onLoadSuccess !== undefined) {
request.imageKnifeOption.onLoadListener?.onLoadSuccess(memoryCache.source)
}
} else if (requestSource == ImageKnifeRequestSource.ERROR_HOLDER) { } else if (requestSource == ImageKnifeRequestSource.ERROR_HOLDER) {
request.requestState = ImageKnifeRequestState.ERROR request.requestState = ImageKnifeRequestState.ERROR
} }
@ -147,19 +156,28 @@ export class ImageKnifeDispatcher {
}); });
} }
// 回调请求开始
requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => {
if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) {
requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart()
}
});
taskpool.execute(task).then((res: Object) => { taskpool.execute(task).then((res: Object) => {
let requestJobResult = res as RequestJobResult let requestJobResult = res as RequestJobResult
let pixelmap = requestJobResult === undefined ? undefined : requestJobResult.pixelMap let pixelmap = requestJobResult === undefined ? undefined : requestJobResult.pixelMap
if (pixelmap === undefined) { if (pixelmap === undefined) {
if (currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadFailed && requestJobResult.loadFail) {
currentRequest.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail);
}
if (requestList !== undefined) { if (requestList !== undefined) {
requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => { requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => {
if (requestWithSource.source === ImageKnifeRequestSource.SRC && currentRequest.imageKnifeOption.errorholderSrc !== undefined) { // 回调请求失败
if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadFailed !== undefined && requestJobResult.loadFail){
requestWithSource.request.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail);
}
if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) {
if (this.showFromMemomry(currentRequest, currentRequest.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) === false) { if (this.showFromMemomry(currentRequest, requestWithSource.request.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) === false) {
this.getAndShowImage(currentRequest, currentRequest.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) this.getAndShowImage(currentRequest, requestWithSource.request.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER)
} }
} }
}); });
@ -206,8 +224,9 @@ export class ImageKnifeDispatcher {
if (requestWithSource.source == ImageKnifeRequestSource.SRC) { if (requestWithSource.source == ImageKnifeRequestSource.SRC) {
requestWithSource.request.requestState = ImageKnifeRequestState.COMPLETE requestWithSource.request.requestState = ImageKnifeRequestState.COMPLETE
if (currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess) { if (requestWithSource.request.imageKnifeOption.onLoadListener && requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess) {
currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source); // 回调请求成功
requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source);
} }
} else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) { } else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) {
requestWithSource.request.requestState = ImageKnifeRequestState.ERROR requestWithSource.request.requestState = ImageKnifeRequestState.ERROR

8
library/src/main/ets/ImageKnifeOption.ets
View File

@ -65,7 +65,15 @@ export class ImageKnifeOption {
} }
} }
/**
* 请求回调
*/
export interface OnLoadCallBack { export interface OnLoadCallBack {
// 请求开始
onLoadStart?: () => void;
// 请求成功
onLoadSuccess?: (data: string | PixelMap | undefined) => void; onLoadSuccess?: (data: string | PixelMap | undefined) => void;
// 请求结束
onLoadFailed?: (err: string) => void; onLoadFailed?: (err: string) => void;
} }