From e475dcd30ad4212965a54e7e40621d67e1e14852 Mon Sep 17 00:00:00 2001 From: zgf Date: Thu, 28 Nov 2024 19:54:00 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ImageKnifeComponent=E7=BB=84?= =?UTF-8?q?=E4=BB=B6pixel=20Map=E5=88=9D=E5=A7=8B=E5=80=BC=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E4=BF=AE=E5=A4=8D=E5=A4=9A=E5=BC=A0=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E5=9B=BE=E4=B8=8D=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zgf --- CHANGELOG.md | 1 + entry/src/main/ets/pages/Index.ets | 10 ++ .../main/ets/pages/MultipleImageCallBack.ets | 151 ++++++++++++++++++ .../main/ets/pages/SingleImageCallBack.ets | 126 +++++++++++++++ .../main/resources/base/element/string.json | 8 + .../resources/base/profile/main_pages.json | 4 +- .../main/resources/zh_CN/element/string.json | 8 + library/src/main/ets/ImageKnifeDispatcher.ets | 2 +- .../ets/components/ImageKnifeComponent.ets | 4 +- 9 files changed, 311 insertions(+), 3 deletions(-) create mode 100644 entry/src/main/ets/pages/MultipleImageCallBack.ets create mode 100644 entry/src/main/ets/pages/SingleImageCallBack.ets diff --git a/CHANGELOG.md b/CHANGELOG.md index b8fbd35..ec06963 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## 3.2.0-rc.5 - Enhance: ImageFit.Auto support adaptive height after component width change - Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0) +- Change the initial value of the PixelMap component of ImageKnife to ImageContent EMPTY ## 3.2.0-rc.4 - Support ICO format images diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 8e6b366..664eb38 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -50,6 +50,16 @@ struct Index { uri: 'pages/SetMaxRequestPage', }); }) + Button($r('app.string.Single_CallBack')).margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/SingleImageCallBack', + }); + }) + Button($r('app.string.Multiple_CallBack')).margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/MultipleImageCallBack', + }); + }) Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{ router.push({ uri: 'pages/TestCommonImage', diff --git a/entry/src/main/ets/pages/MultipleImageCallBack.ets b/entry/src/main/ets/pages/MultipleImageCallBack.ets new file mode 100644 index 0000000..c052a5a --- /dev/null +++ b/entry/src/main/ets/pages/MultipleImageCallBack.ets @@ -0,0 +1,151 @@ +/* + * Copyright (C) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'; +import { CommonDataSource } from './model/CommonDataSource' + +@Entry +@Component +struct MultipleImageCallBack { + @State hotCommendList: CommonDataSource = new CommonDataSource([]) + @State componentIndex: number = 0 + @State startIndex: number = 0 + @State successIndex: number = 0 + @State failIndex: number = 0 + @State cancelJobIndex: number = 0 + @State cancelLoadIndex: number = 0 + @State memoryIndex: number = 0 + @State fileCacheIndex: number = 0 + @State netIndex: number = 0 + @State checkText: string = '' + private data: Array = [] + + aboutToAppear(): void { + for (let index = 0; index < 100; index++) { + this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`) + } + this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data) + } + + build() { + Column() { + Row() { + Column() { + Text('图片总数：' + this.componentIndex) + Text('开始回调：' + this.startIndex) + Text('成功回调：' + this.successIndex) + Text('失败回调：' + this.failIndex) + Text('队列取消回调：' + this.cancelJobIndex) + Text('加载取消回调：' + this.cancelLoadIndex) + Text('内存数量：' + this.memoryIndex) + Text('文件数量：' + this.fileCacheIndex) + Text('网络数量：' + this.netIndex) + }.width('50%') + Column() { + Button('check') + .onClick(()=>{ + this.checkText = '' + if (this.componentIndex !== this.startIndex + this.cancelJobIndex) { + this.checkText = this.checkText + '图片总数！=开始+队列取消，' + } + if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) { + this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，' + } + if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) { + this.checkText = this.checkText + '成功回调！=内存+文件+网络，' + } + if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) { + this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，' + } + if(this.checkText == '') { + this.checkText = 'check正确' + } + }) + Text(this.checkText) + }.width('50%') + }.width('100%') + Column() { + WaterFlow() { + LazyForEach(this.hotCommendList, (item: string,index: number) => { + FlowItem() { + Column() { + Text(index + '') + ImageComponent({ + imageKnifeOption: { + loadSrc: item, + placeholderSrc: $r('app.media.loading'), + errorholderSrc: $r('app.media.failed'), + onLoadListener: { + onLoadStart:()=>{ + this.startIndex++ + console.log('image load multiple loadStart:' + this.startIndex) + }, + onLoadSuccess:(pixelmap,imageData,request)=>{ + this.successIndex++ + let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0 + let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0 + let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0 + memory = memory - fileCache + fileCache = fileCache - net + this.memoryIndex = this.memoryIndex + memory + this.fileCacheIndex = this.fileCacheIndex + fileCache + this.netIndex = this.netIndex + net + console.log('image load multiple loadSuccess:' + this.successIndex) + }, + onLoadFailed:()=>{ + this.failIndex++ + console.log('image load multiple loadFail:' + this.failIndex) + }, + onLoadCancel:(message,request)=>{ + let flag = request?.imageKnifeData?.type ? true : false + if (flag) { + this.cancelLoadIndex++ + } else { + this.cancelJobIndex++ + } + console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex) + } + } + },index:this.componentIndex + }).width('50%').height(160) + } + }.height(200) + .backgroundColor('#95efd2') + }, (item: string) => item) + } + .cachedCount(0) + .columnsTemplate('1fr 1fr') + .columnsGap(10) + .rowsGap(5) + .backgroundColor(0xFAEEE0) + .width('100%') + } + .height('80%') + }.width('100%') + .height('100%') + } +} +@Component +struct ImageComponent { + @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption() + @Link index: number + aboutToAppear(): void { + this.index++ + } + build() { + ImageKnifeComponent({ + imageKnifeOption: this.imageKnifeOption + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/SingleImageCallBack.ets b/entry/src/main/ets/pages/SingleImageCallBack.ets new file mode 100644 index 0000000..d4ce535 --- /dev/null +++ b/entry/src/main/ets/pages/SingleImageCallBack.ets @@ -0,0 +1,126 @@ +/* + * Copyright (C) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'; +import { CommonDataSource } from './model/CommonDataSource' + +@Entry +@Component +struct SingleImageCallBack { + @State hotCommendList: CommonDataSource = new CommonDataSource([]) + @State componentIndex: number = 0 + @State startIndex: number = 0 + @State successIndex: number = 0 + @State failIndex: number = 0 + @State cancelJobIndex: number = 0 + @State cancelLoadIndex: number = 0 + @State memoryIndex: number = 0 + @State fileCacheIndex: number = 0 + @State netIndex: number = 0 + @State checkText: string = '' + build() { + Column() { + Row() { + Column() { + Text('图片总数：' + this.componentIndex) + Text('开始回调：' + this.startIndex) + Text('成功回调：' + this.successIndex) + Text('失败回调：' + this.failIndex) + Text('队列取消回调：' + this.cancelJobIndex) + Text('加载取消回调：' + this.cancelLoadIndex) + Text('内存数量：' + this.memoryIndex) + Text('文件数量：' + this.fileCacheIndex) + Text('网络数量：' + this.netIndex) + }.width('50%') + Column() { + Button('check') + .onClick(()=>{ + this.checkText = '' + if (this.componentIndex !== this.startIndex + this.cancelJobIndex) { + this.checkText = this.checkText + '图片总数！=开始+队列取消，' + } + if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) { + this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，' + } + if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) { + this.checkText = this.checkText + '成功回调！=内存+文件+网络，' + } + if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) { + this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，' + } + if(this.checkText == '') { + this.checkText = 'check正确' + } + }) + Text(this.checkText) + }.width('50%') + }.width('100%') + Column() { + ImageComponent({ + imageKnifeOption: { + loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', + placeholderSrc: $r('app.media.loading'), + errorholderSrc: $r('app.media.failed'), + onLoadListener: { + onLoadStart: () => { + this.startIndex++ + console.log('image load multiple loadStart:' + this.startIndex) + }, + onLoadSuccess: (pixelmap, imageData, request) => { + this.successIndex++ + let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0 + let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0 + let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0 + memory = memory - fileCache + fileCache = fileCache - net + this.memoryIndex = this.memoryIndex + memory + this.fileCacheIndex = this.fileCacheIndex + fileCache + this.netIndex = this.netIndex + net + console.log('image load multiple loadSuccess:' + this.successIndex) + }, + onLoadFailed: () => { + this.failIndex++ + console.log('image load multiple loadFail:' + this.failIndex) + }, + onLoadCancel: (message,request) => { + let flag = request?.imageKnifeData?.type ? true : false + if (flag) { + this.cancelLoadIndex++ + } else { + this.cancelJobIndex++ + } + console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex) + } + } + },index:this.componentIndex + }).width(300).height(300) + } + .height('80%') + }.width('100%') + .height('100%') + } +} +@Component +struct ImageComponent { + @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption() + @Link index: number + aboutToAppear(): void { + this.index++ + } + build() { + ImageKnifeComponent({ + imageKnifeOption: this.imageKnifeOption + }) + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index fd82d59..b246b61 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -655,6 +655,14 @@ { "name": "Auto_ImageFit", "value": "ImageFit.Auto:Auto ImageFit Height" + }, + { + "name": "Single_CallBack", + "value": "Single image callback" + }, + { + "name": "Multiple_CallBack", + "value": "Multiple image callback" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index aa1e15f..c8be797 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -38,6 +38,8 @@ "pages/TestImageKnifeCallbackPage", "pages/TestListImageKnifeCallbackPage", "pages/DownSamplePage", - "pages/AutoImageFit" + "pages/AutoImageFit", + "pages/SingleImageCallBack", + "pages/MultipleImageCallBack" ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index 2990179..cea7589 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -651,6 +651,14 @@ { "name": "Auto_ImageFit", "value": "ImageFit.Auto:自适用图片高度" + }, + { + "name": "Single_CallBack", + "value": "单个图片回调" + }, + { + "name": "Multiple_CallBack", + "value": "多张图片回调" } ] } \ No newline at end of file diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index 593e7e4..e585ee6 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -373,7 +373,7 @@ export class ImageKnifeDispatcher { } if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) { - + requestWithSource.request.requestState = ImageKnifeRequestState.PROGRESS if (this.showFromMemomry(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc, ImageKnifeRequestSource.ERROR_HOLDER) === false) { this.getAndShowImage(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc, diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 248bdf9..7953a88 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -24,7 +24,7 @@ import { DefaultEngineKey } from '../key/DefaultEngineKey'; @Component export struct ImageKnifeComponent { @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; - @State pixelMap: PixelMap | string | ImageContent | undefined = undefined + @State pixelMap: PixelMap | string | ImageContent | undefined = ImageContent.EMPTY @State syncLoad: boolean = false @State adaptiveWidth: Length = '100%' @State adaptiveHeight: Length = '100%' @@ -150,6 +150,8 @@ export struct ImageKnifeComponent { return //针对reuse场景，不显示历史图片 } this.pixelMap = pixelMap + LogUtil.debug('image load showPixelMap:' + this.request?.imageKnifeOption.loadSrc + ', componentId = ' + + this.getUniqueId() + ',size:' + JSON.stringify(size)) if (typeof this.pixelMap !== 'string') { if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) { this.adaptiveHeight = this.currentWidth * size.height / size.width