From 9fd6963a8ef788c3a0c344288a3af7f9f515bb4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=AC=A2?= Date: Wed, 10 Apr 2024 19:08:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=91=E9=80=81=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E6=97=B6=E6=9C=80=E8=BF=91=E7=9A=84=E4=B8=A4=E6=9D=A1?= =?UTF-8?q?=E6=B6=88=E6=81=AF=E5=A4=B4=E5=83=8F=E9=97=AA=E5=8A=A8=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 张欢 --- CHANGELOG.md | 1 + entry/src/main/ets/pages/Index.ets | 6 + entry/src/main/ets/pages/TestImageFlash.ets | 134 ++++++++++++++++++ .../resources/base/profile/main_pages.json | 3 +- library/src/main/ets/ImageKnifeDispatcher.ets | 3 +- library/src/main/ets/ImageKnifeRequest.ets | 3 +- .../ets/components/ImageKnifeComponent.ets | 14 +- library/src/main/ets/utils/Tools.ets | 23 +++ 8 files changed, 183 insertions(+), 4 deletions(-) create mode 100644 entry/src/main/ets/pages/TestImageFlash.ets create mode 100644 library/src/main/ets/utils/Tools.ets diff --git a/CHANGELOG.md b/CHANGELOG.md index c25877c..218ba8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - 支持option自定义实现图片获取/网络下载 - 继承Image的能力，支持option传入border，设置边框，圆角 - 继承Image的能力，支持option传入objectFit设置图片缩放 +- 修复发送消息时最近的两条消息头像闪动的问题 缺失特性 - 不支持drawLifeCycle接口，通过canvas自会图片 diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index af510e8..71da2ac 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -56,6 +56,12 @@ struct Index { }); }) + Button("消息+List").margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/TestImageFlash', + + }); + }) } diff --git a/entry/src/main/ets/pages/TestImageFlash.ets b/entry/src/main/ets/pages/TestImageFlash.ets new file mode 100644 index 0000000..3dc0bb0 --- /dev/null +++ b/entry/src/main/ets/pages/TestImageFlash.ets @@ -0,0 +1,134 @@ +/* + * 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 } from '@ohos/imageknife/src/main/ets/components/ImageKnifeComponent' + +@Observed +export class MsgModel { + id: string + cId: string + body: string + status: number + + constructor(id: string, body: string, cId?: string) { + this.id = id + this.body = body + this.status = -1 + this.cId = cId || '' + } +} + + +@Reusable +@Component +export struct MsgItem { + count: number = 0 + private data: Array = [ + "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg", + "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg", + "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg", + "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg", + "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg", + "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg", + "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg", + "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg", + "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg", + "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg", + "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg", + "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg", + "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg", + ] + build(){ + if (this.count % 2 == 0 && this.count <6){ + ImageKnifeComponent({ + ImageKnifeOption:{ + loadSrc:$r("app.media.startIcon") + } + }) + }else if (this.count > 6 && this.count - 6 < this.data.length){ + ImageKnifeComponent({ + ImageKnifeOption:{ + loadSrc:this.data[this.count - 6], + } + }) + }else { + ImageKnifeComponent({ + ImageKnifeOption:{ + loadSrc:$r("app.media.loading") + } + }) + } + } +} + +@Entry +@Component +struct ImageTestPage { + count : number = 0 + rCount: number = 0 + scroller: Scroller = new Scroller() + @State list: MsgModel[] = [] + @State imageSize: number =100 + handAdd(){ + this.count++ + const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count) + this.list.push(msgItem) + setTimeout(()=> { + msgItem.status = 1 + },3000) + this.scroller.scrollEdge(Edge.Bottom) + } + + build(){ + Column(){ + Row(){ + Button("addItem").onClick(()=> { + this.handAdd() + }) + Button("remove").onClick(()=> { + this.list.splice(0,1) + }) + } + Row(){ + Text("点击尺寸加50") + .onClick(()=> { + this.imageSize = this.imageSize + 50 + }) + .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50) + Text("点击尺寸减50") + .onClick(()=> { + this.imageSize = Math.max(this.imageSize - 50, 0) + }) + .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50) + }.height(50).width('100%') + + List({space: 20, scroller: this.scroller }) { + ForEach(this.list, (item: MsgModel)=> { + ListItem(){ + MsgItem({count : this.count}).width(this.imageSize).height(this.imageSize); + } + },(item:MsgModel)=> item.id) + }.width('100%').height('auto').layoutWeight(1) + } + .width('100%') + .height('100%') + } +} \ 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 a927122..5b02dd4 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -6,6 +6,7 @@ "pages/ManyPhotoShowPage", "pages/LongImagePage", "pages/TransformPage", - "pages/UserPage" + "pages/UserPage", + "pages/TestImageFlash" ] } \ No newline at end of file diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index b12dd12..dfabd32 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -31,6 +31,7 @@ import { Constants } from './utils/Constants'; import taskpool from '@ohos.taskpool'; import { FileTypeUtil } from './utils/FileTypeUtil'; import util from '@ohos.util'; +import { Tools } from './utils/Tools'; export class ImageKnifeDispatcher { // 最大并发 @@ -71,7 +72,7 @@ export class ImageKnifeDispatcher { * 获取和显示图片 */ getAndShowImage(currentRequest: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): void { - let key: string = currentRequest.generateKey(imageSrc) + let key: string = Tools.generateKey(imageSrc) let requestList: List | undefined = this.executingJobMap.get(key) if (requestList == undefined) { requestList = new List() diff --git a/library/src/main/ets/ImageKnifeRequest.ets b/library/src/main/ets/ImageKnifeRequest.ets index 6a0e38f..45c5582 100644 --- a/library/src/main/ets/ImageKnifeRequest.ets +++ b/library/src/main/ets/ImageKnifeRequest.ets @@ -19,6 +19,7 @@ import common from '@ohos.app.ability.common'; import { SparkMD5 } from './3rd_party/sparkmd5/spark-md5' import { LogUtil } from './utils/LogUtil' import { ImageKnifeRequestSource } from './ImageKnifeDispatcher'; +import { Tools } from './utils/Tools'; export class ImageKnifeRequest { @@ -46,7 +47,7 @@ export class ImageKnifeRequest { showFromMemomry(imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): boolean { let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance() - .loadFromMemoryCache(this.generateKey(imageSrc)) + .loadFromMemoryCache(Tools.generateKey(this.ImageKnifeOption.loadSrc)) if (memoryCache !== undefined) { // 画主图 if (this.requestState === ImageKnifeRequestState.PROGRESS) { diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 6e5c5c6..1af4a98 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -20,6 +20,8 @@ import { LogUtil } from '../utils/LogUtil'; import componentUtils from '@ohos.arkui.componentUtils' import util from '@ohos.util' import inspector from '@ohos.arkui.inspector' +import { Tools } from '../utils/Tools'; +import { ImageKnifeData } from '../model/ImageKnifeData' @Component export struct ImageKnifeComponent { @@ -40,7 +42,17 @@ export struct ImageKnifeComponent { private listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId) aboutToAppear(): void { - this.listener.on("layout", this.onLayoutComplete) + let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance() + .loadFromMemoryCache(Tools.generateKey(this.ImageKnifeOption.loadSrc)) + if (memoryCache !== undefined){ + LogUtil.log("aboutToAppear load from memory cache for key = "+ Tools.generateKey(this.ImageKnifeOption.loadSrc)) + //画主图 + this.pixelMap = memoryCache.source; + }else { + LogUtil.log("aboutToAppear onLayoutComplete") + this.listener.on("layout", this.onLayoutComplete) + } + } aboutToDisappear(): void { diff --git a/library/src/main/ets/utils/Tools.ets b/library/src/main/ets/utils/Tools.ets new file mode 100644 index 0000000..6ab781f --- /dev/null +++ b/library/src/main/ets/utils/Tools.ets @@ -0,0 +1,23 @@ +/* + * 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 { SparkMD5 } from '../3rd_party/sparkmd5/spark-md5' + +export class Tools { + + // 生成唯一的key + public static generateKey(key: string | PixelMap | Resource): string{ + return SparkMD5.hashBinary(JSON.stringify(key)) as string + } +} \ No newline at end of file