From 134c687efc32d691a0161afb81197d316c75e405 Mon Sep 17 00:00:00 2001 From: zgf Date: Thu, 6 Jun 2024 19:33:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=B4=E5=83=8F=E8=B6=85?= =?UTF-8?q?=E8=BF=87=E8=AE=BE=E5=A4=87=E9=AB=98=E5=BA=A6=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E9=97=AA=E5=8A=A8=E9=97=AE=E9=A2=98-=E6=B6=88=E6=81=AF?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=BA=95=E9=83=A8=E5=A4=B4=E5=83=8F=E9=97=AA?= =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zgf --- CHANGELOG.md | 1 + README.md | 11 ++++++- entry/src/main/ets/pages/TestImageFlash.ets | 13 +++++--- .../ets/components/ImageKnifeComponent.ets | 32 +++++++++++++------ 4 files changed, 42 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17970b7..5f17062 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - 修复成功回调获取不到宽高 - 新增svg图片解码 - 新增媒体图片file://格式 +- 修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题 ## 3.0.0-rc.6 - 支持多种组合变换 diff --git a/README.md b/README.md index a7b1278..7d204f4 100644 --- a/README.md +++ b/README.md @@ -242,7 +242,16 @@ ImageKnifeComponent({ ImageKnifeOption: } }).width(100).height(100) ``` - +#### 9.ImageKnifeComponent - syncLoad 的使用 +修复在消息列表场景，新增消息时头像出现闪动 +``` +ImageKnifeComponent({ + imageKnifeOption:{ + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true + }) +``` ## 接口说明 ### ImageKnifeOption参数列表 diff --git a/entry/src/main/ets/pages/TestImageFlash.ets b/entry/src/main/ets/pages/TestImageFlash.ets index c192a2b..75144e0 100644 --- a/entry/src/main/ets/pages/TestImageFlash.ets +++ b/entry/src/main/ets/pages/TestImageFlash.ets @@ -60,20 +60,23 @@ export struct MsgItem { if (this.count % 2 == 0 && this.count <6){ ImageKnifeComponent({ imageKnifeOption:{ - loadSrc:$r("app.media.startIcon") - } + loadSrc:$r("app.media.startIcon"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) }else if (this.count > 6 && this.count - 6 < this.data.length){ ImageKnifeComponent({ imageKnifeOption:{ loadSrc:this.data[this.count - 6], - } + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) }else { ImageKnifeComponent({ imageKnifeOption:{ - loadSrc:$r("app.media.loading") - } + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) } } diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 2d8c3bd..2bb1641 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -17,12 +17,15 @@ import { ImageKnifeRequest, ImageKnifeRequestState } from '../ImageKnifeRequest' import common from '@ohos.app.ability.common'; import { ImageKnife } from '../ImageKnife'; import { LogUtil } from '../utils/LogUtil'; -import { ImageKnifeRequestSource } from '../model/ImageKnifeData'; +import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData'; +import { IEngineKey } from '../key/IEngineKey'; +import { DefaultEngineKey } from '../key/DefaultEngineKey'; @Component export struct ImageKnifeComponent { @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; @State pixelMap: PixelMap | string | undefined = undefined + @State syncLoad: boolean = false @State adaptiveWidth: Length = '100%' @State adaptiveHeight: Length = '100%' @State objectFit: ImageFit = ImageFit.Contain @@ -36,14 +39,24 @@ export struct ImageKnifeComponent { aboutToAppear(): void { //闪动问题失效，注释相应代码后续修复 - // let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance() - // .loadFromMemoryCache(Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc)) - // if (memoryCache !== undefined){ - // LogUtil.log("aboutToAppear load from memory cache for key = "+ Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc)) - // //画主图 - // this.pixelMap = memoryCache.source; - // }else { - // } + if(this.syncLoad) { + 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)) + //画主图 + 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; + } + } + } this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit } @@ -68,6 +81,7 @@ export struct ImageKnifeComponent { .width(this.adaptiveWidth) .height(this.adaptiveHeight) .border(this.imageKnifeOption.border) + .syncLoad(this.syncLoad) .onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => { this.currentWidth = newValue.width as number this.currentHeight = newValue.height as number