From ddbff75a7d7cd1117a2d10c1502cd476e273e6ba Mon Sep 17 00:00:00 2001 From: zgf Date: Wed, 28 Aug 2024 16:27:47 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9ETask=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E6=8A=A5=E9=94=9910200006=E6=A0=B7=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zgf --- .../main/ets/pages/TestTaskResourcePage.ets | 82 +++++++++++++++++++ .../resources/base/profile/main_pages.json | 3 +- 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 entry/src/main/ets/pages/TestTaskResourcePage.ets diff --git a/entry/src/main/ets/pages/TestTaskResourcePage.ets b/entry/src/main/ets/pages/TestTaskResourcePage.ets new file mode 100644 index 0000000..fc0db3a --- /dev/null +++ b/entry/src/main/ets/pages/TestTaskResourcePage.ets @@ -0,0 +1,82 @@ +/* + * 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" + +@ComponentV2 +export struct ZuImage { + @Param src: PixelMap | ResourceStr | string | undefined + @Param radius: BorderRadiuses | Length | LocalizedBorderRadiuses | undefined + @Param placeholderSrc: PixelMap | ResourceStr | string | undefined + @Param errorholderSrc: PixelMap | ResourceStr | string | undefined + + build() { + if (this.src) { + //当前版本存在bug + ImageKnifeComponent({ + imageKnifeOption: new ImageKnifeOption({ + loadSrc: this.src, + placeholderSrc: this.placeholderSrc, + errorholderSrc: this.errorholderSrc ?? this.placeholderSrc, + border: { radius: this.radius }, + objectFit: ImageFit.Cover + }) + }) + } else { + Image(this.placeholderSrc) + .border({ radius: this.radius }) + .objectFit(ImageFit.Cover) + } + } +} + + +@Entry +@ComponentV2 +struct TestTaskResourcePage { + @Local stateMenus: Array = [ + "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB", + 'https://img-blog.csdnimg.cn/20191215043500229.png', + 'https://img-blog.csdn.net/20140514114029140', + 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp', + ] + @Builder + _buildItem(item: string) { + Column({ space: 8 }) { + ZuImage({ + src: item, + placeholderSrc: $r("app.media.loading") + }).width(44) + .height(44) + } + } + build() { + + Grid() { + ForEach(this.stateMenus, (item: string) => { + GridItem() { + this._buildItem(item) + } + }) + }.width("100%") + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsGap(24) + .padding({ + top: 24, + bottom: 24, + left: 24, + right: 24 + }) + } +} \ 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 42b571c..de593dd 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -22,6 +22,7 @@ "pages/TestCommonImage", "pages/ImageAnimatorPage", "pages/TestSetCustomImagePage", - "pages/TestErrorHolderPage" + "pages/TestErrorHolderPage", + "pages/TestTaskResourcePage" ] } \ No newline at end of file From 0c8a777c822c518c6c423f1ad3bafe5a4004752e Mon Sep 17 00:00:00 2001 From: zgf Date: Wed, 28 Aug 2024 17:00:43 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=96=B0=E5=A2=9ETask=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E6=8A=A5=E9=94=9910200006=E6=A0=B7=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zgf --- entry/src/main/ets/pages/Index.ets | 5 +++++ entry/src/main/ets/pages/TestTaskResourcePage.ets | 9 +++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index e3e5074..f6d2a5e 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -36,6 +36,11 @@ struct Index { uri: 'pages/TestCommonImage', }); }) + Button("测试占位图Task报错").margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/TestTaskResourcePage', + }); + }) Button("测试HSP场景预加载").margin({top:10}).onClick(()=>{ router.push({ uri: 'pages/TestHspPreLoadImage', diff --git a/entry/src/main/ets/pages/TestTaskResourcePage.ets b/entry/src/main/ets/pages/TestTaskResourcePage.ets index fc0db3a..0578bca 100644 --- a/entry/src/main/ets/pages/TestTaskResourcePage.ets +++ b/entry/src/main/ets/pages/TestTaskResourcePage.ets @@ -16,10 +16,9 @@ import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife" @ComponentV2 export struct ZuImage { - @Param src: PixelMap | ResourceStr | string | undefined - @Param radius: BorderRadiuses | Length | LocalizedBorderRadiuses | undefined - @Param placeholderSrc: PixelMap | ResourceStr | string | undefined - @Param errorholderSrc: PixelMap | ResourceStr | string | undefined + @Param @Require src: PixelMap | ResourceStr | string | undefined + @Param @Require placeholderSrc: PixelMap | ResourceStr | string | undefined + @Local errorholderSrc: PixelMap | ResourceStr | string | undefined build() { if (this.src) { @@ -29,13 +28,11 @@ export struct ZuImage { loadSrc: this.src, placeholderSrc: this.placeholderSrc, errorholderSrc: this.errorholderSrc ?? this.placeholderSrc, - border: { radius: this.radius }, objectFit: ImageFit.Cover }) }) } else { Image(this.placeholderSrc) - .border({ radius: this.radius }) .objectFit(ImageFit.Cover) } } From 587d35f085c206ba35b107f764afb6625a0eb934 Mon Sep 17 00:00:00 2001 From: Madixin Date: Fri, 30 Aug 2024 11:56:11 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=95=B4=E7=90=86imagekn?= =?UTF-8?q?ifecomponent=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Madixin --- library/src/main/ets/ImageKnifeDispatcher.ets | 2 +- .../ets/components/ImageKnifeComponent.ets | 95 +++++++++---------- 2 files changed, 45 insertions(+), 52 deletions(-) diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index 55e1c92..d9b6c4c 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -67,6 +67,7 @@ export class ImageKnifeDispatcher { if (memoryCache !== undefined) { + LogUtil.log("ImageKnife_DataTime_showFromMemomry.end_true:" + request.imageKnifeOption.loadSrc) // 画主图 if (request.requestState === ImageKnifeRequestState.PROGRESS) { // 回调请求开始 @@ -89,7 +90,6 @@ export class ImageKnifeDispatcher { request.requestState = ImageKnifeRequestState.ERROR } } - LogUtil.log("ImageKnife_DataTime_showFromMemomry.end_true:" + request.imageKnifeOption.loadSrc) return true } LogUtil.log("ImageKnife_DataTime_showFromMemomry.end_false:" + request.imageKnifeOption.loadSrc) diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 29a2b20..1232ba3 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -36,52 +36,62 @@ export struct ImageKnifeComponent { private componentVersion: number = 0 private currentContext: common.UIAbilityContext | undefined = undefined @Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption(); + @Monitor('imageKnifeOption', "imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit") watchImageKnifeOption() { - if (this.request !== undefined) { - this.request.requestState = ImageKnifeRequestState.DESTROY - } - this.request = undefined + this.clearLastRequest() this.componentVersion++ + this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit + LogUtil.log("watchImageKnifeOption execute request:width=" + this.currentWidth + " height= " + this.currentHeight + + " loadSrc = " + this.request?.imageKnifeOption.loadSrc + + " placeholderSrc = " + this.request?.imageKnifeOption.placeholderSrc + + " errorholderSrc = " + this.request?.imageKnifeOption.errorholderSrc) ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) } + aboutToAppear(): void { - //闪动问题失效，注释相应代码后续修复 - if(this.syncLoad) { + this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit + + if(this.syncLoad) { //针对部分消息列表最新消息的图片闪动问题，建议使用同步方式在aboutToAppear时加载图片 let engineKey: IEngineKey = new DefaultEngineKey(); let memoryCacheSrc: ImageKnifeData | undefined = ImageKnife.getInstance() .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) if (memoryCacheSrc !== undefined){ - LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) - //画主图 + LogUtil.log("aboutToAppear success load loadSrc from memory cache for loadSrc = "+ this.imageKnifeOption.loadSrc) this.pixelMap = memoryCacheSrc.source; - }else { - let memoryCachePlace: ImageKnifeData | undefined = ImageKnife.getInstance() - .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.placeholderSrc!,ImageKnifeRequestSource.PLACE_HOLDER,this.imageKnifeOption)) - if (memoryCachePlace !== undefined){ - LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) - //画主图 - this.pixelMap = memoryCachePlace.source; + }else{ + LogUtil.log("aboutToAppear fail load loadSrc from memory cache for loadSrc = "+ this.imageKnifeOption.loadSrc) + if (this.imageKnifeOption.placeholderSrc !== undefined){ + let memoryCachePlace: ImageKnifeData | undefined = ImageKnife.getInstance() + .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.placeholderSrc!,ImageKnifeRequestSource.PLACE_HOLDER,this.imageKnifeOption)) + if (memoryCachePlace !== undefined){ + LogUtil.log("aboutToAppear success load placeholderSrc from memory cache for placeholderSrc = " + this.imageKnifeOption.placeholderSrc) + this.pixelMap = memoryCachePlace.source; + }else{ + LogUtil.log("aboutToAppear fail load placeholderSrc from memory cache for placeholderSrc = " + this.imageKnifeOption.placeholderSrc) + } } } } - this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit } aboutToDisappear(): void { - if (this.request !== undefined) { - this.request.requestState = ImageKnifeRequestState.DESTROY - this.request = undefined - } + this.clearLastRequest() } aboutToRecycle() { + this.clearLastRequest() + } + + /** + * 对已DESTROY的组件不再发起请求 + */ + private clearLastRequest(){ if (this.request !== undefined) { this.request.requestState = ImageKnifeRequestState.DESTROY this.request = undefined } - this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit } build() { @@ -99,14 +109,15 @@ export struct ImageKnifeComponent { this.currentHeight = newValue.height as number this.lastWidth = oldValue.width as number this.lastHeight = oldValue.height as number - if (this.currentWidth <= 0 || this.currentHeight <= 0) { - // 存在宽或者高为0,此次重回无意义,无需进行request请求 - } else { - // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制 - if (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) { - LogUtil.log("execute request:width=" + this.currentWidth + " height= " + this.currentHeight) - ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) - } + + // 条件1: 宽高值均有效,值>0. 条件2：当前宽高与上一次宽高不同 + if (this.currentWidth > 0 && this.currentHeight > 0 && + (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth)) { + LogUtil.log("onSizeChange execute request:width=" + this.currentWidth + " height= " + this.currentHeight + + " loadSrc = " + this.request?.imageKnifeOption.loadSrc + + " placeholderSrc = " + this.request?.imageKnifeOption.placeholderSrc + + " errorholderSrc = " + this.request?.imageKnifeOption.errorholderSrc) + ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) } }) } @@ -132,24 +143,10 @@ export struct ImageKnifeComponent { return //针对reuse场景，不显示历史图片 } this.pixelMap = pixelMap - if (typeof this.pixelMap !== 'string') { - if (this.imageKnifeOption.objectFit === ImageFit.Auto) { - let info = await this.pixelMap.getImageInfo() - - this.adaptiveWidth = this.currentWidth - this.adaptiveHeight = info.size.height * this.currentWidth / info.size.width - - // if (this.currentWidth / this.currentHeight > info.size.width / info.size.height) { - // this.adaptiveWidth = this.currentWidth - // this.adaptiveHeight = info.size.height * this.currentWidth / this.currentHeight - // } - // else { - // this.adaptiveWidth = info.size.width * this.currentWidth / this.currentHeight - // this.adaptiveHeight = this.currentHeight - // } - } - } else { - //console.info("KKKKKKKKKKK:" + pixelMap) + if (typeof this.pixelMap !== 'string' && this.imageKnifeOption.objectFit === ImageFit.Auto) { //针对静态图高度自适应 + let info = await this.pixelMap.getImageInfo() + this.adaptiveWidth = this.currentWidth + this.adaptiveHeight = info.size.height * this.currentWidth / info.size.width } if (requestSource == ImageKnifeRequestSource.SRC) { @@ -168,8 +165,4 @@ export struct ImageKnifeComponent { return this.request } -} - -interface KeyCanvas { - keyId: string } \ No newline at end of file