新增多线程优先级

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
2024-03-28 01:42:20 +00:00 · 2024-03-28 01:42:20 +00:00 · 89f28bc4ab
parent 3d3e02bf1d 04cfeb18fa
commit 89f28bc4ab
4 changed files with 249 additions and 32 deletions
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -117,7 +117,21 @@ struct IndexFunctionDemo {

        }.width('100%')
        .height(60).backgroundColor(Color.Pink)
+        Text("测试复用场景").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("懒加载复用列表")
+            .onClick(() => {
+              console.log("测试一级内存缓存")
+              router.pushUrl({ url: "pages/testReusePhotoPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试所有缓存信息输出")
+            .onClick(() => {
+              console.log("pages/testAllCacheInfoPage 页面跳转")
+              router.pushUrl({ url: "pages/testAllCacheInfoPage" });
+            }).margin({ top: 5, left: 3 })

+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
        Text("测试占位图 失败占位图 功能点").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button("测试失败占位图")
--- a/entry/src/main/ets/pages/testReusePhotoPage.ets
+++ b/entry/src/main/ets/pages/testReusePhotoPage.ets
@ -0,0 +1,203 @@
+/*
+ * 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, ScaleType } from '@ohos/libraryimageknife'
+
+class CommonDataSource <T> implements IDataSource {
+  private dataArray: T[] = []
+  private listeners: DataChangeListener[] = []
+
+  constructor(element: []) {
+    this.dataArray = element
+  }
+
+  public getData(index: number) {
+    return this.dataArray[index]
+  }
+
+  public totalCount(): number {
+    return this.dataArray.length
+  }
+
+  public addData(index: number, data: T[]): void {
+    this.dataArray = this.dataArray.concat(data)
+    this.notifyDataAdd(index)
+  }
+
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      this.listeners.splice(pos, 1);
+    }
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      this.listeners.push(listener)
+    }
+  }
+
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach((listener: DataChangeListener) => {
+      listener.onDataAdd(index)
+    })
+  }
+}
+
+@Entry
+@Component
+struct TestReusePhotoPage {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  private data: Array<string> = [
+    "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",
+    "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'
+  ]
+
+  aboutToAppear() {
+    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
+    AppStorage.set("image_size",1)
+  }
+
+  build() {
+    Column() {
+      Button("up").onClick(()=>{
+        AppStorage.set("image_size",1.6)
+      })
+      Button("down").onClick(()=>{
+        AppStorage.set("image_size",0.9)
+      })
+      List() {
+        LazyForEach(this.hotCommendList, (item: string) => {
+          ListItem() {
+            ReuseComponent({ url: item }).width("100%").height("100%")
+          }.width(200).height(200).backgroundColor(Color.Orange)
+        })
+      }
+      .width("100%")
+      .height("100%")
+      .backgroundColor(0xFAEEE0)
+    }.width("100%").height("100%")
+  }
+}
+
+@Reusable
+@Component
+struct ReuseComponent {
+  @Prop url: string = ""
+  imgSize: number = 100
+  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
+  scaleAble: boolean = true
+  @State calcImgSize: number = 100
+  aboutToReuse(params: Record<string, string>) {
+    this.url = params.url
+  }
+  aboutToAppear(){
+    this.setImageSize()
+  }
+  updateImageSize() {
+    this.setImageSize()
+  }
+
+  setImageSize() {
+    if (!this.scaleAble) {
+      this.calcImgSize = this.imgSize
+    } else if (this.image_size < 0.9) {
+      this.calcImgSize = this.imgSize * 0.9
+    } else if (this.image_size > 1.6) {
+      this.calcImgSize = this.imgSize * 1.6
+    } else {
+      this.calcImgSize = this.imgSize * this.image_size
+    }
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({
+        imageKnifeOption:{
+          loadSrc: this.url,
+          mainScaleType: ScaleType.FIT_XY,
+          placeholderSrc: $r('app.media.icon_loading'),
+          placeholderScaleType: ScaleType.FIT_XY,
+          errorholderSrc: $r('app.media.icon_failed'),
+          errorholderSrcScaleType: ScaleType.FIT_XY
+        }
+      }).width(this.calcImgSize).height(this.calcImgSize)
+    }.width("100%").height("100%")
+  }
+}
+
+@Component
+struct PhotoComponent {
+  @Watch("updateTheUrl") @Prop url: string = ""
+  imgSize: number = 100
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
+  scaleAble: boolean = true
+  @State calcImgSize: number = 100
+
+  updateImageSize() {
+    this.setImageSize()
+  }
+
+  setImageSize() {
+    if (!this.scaleAble) {
+      this.calcImgSize = this.imgSize
+    } else if (this.image_size < 0.9) {
+      this.calcImgSize = this.imgSize * 0.9
+    } else if (this.image_size > 1.6) {
+      this.calcImgSize = this.imgSize * 1.6
+    } else {
+      this.calcImgSize = this.imgSize * this.image_size
+    }
+  }
+
+  updateTheUrl() {
+    this.imageKnifeOption = {
+      loadSrc: this.url,
+      mainScaleType: ScaleType.FIT_XY,
+      placeholderSrc: $r('app.media.icon_loading'),
+      placeholderScaleType: ScaleType.FIT_XY,
+      errorholderSrc: $r('app.media.icon_failed'),
+      errorholderSrcScaleType: ScaleType.FIT_XY
+    }
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+    }.width(this.calcImgSize).height(this.calcImgSize)
+  }
+}
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -45,5 +45,6 @@
    "pages/testImageKnifeAutoWidthPage",
    "pages/testImageKnifeAutoHeightPage",
    "pages/testPriorityComponent"
+    "pages/testReusePhotoPage"
  ]
 }
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@ -40,8 +40,6 @@ export struct ImageKnifeComponent {
  private hasDisplayRetryholder = false;
  private lastWidth: number = 0
  private lastHeight: number = 0
-  private currentWidth: number = 0
-  private currentHeight: number = 0
  // 定时器id
  private gifTimerId: number = -1
  // 完整gif播放时间
@ -103,8 +101,8 @@ export struct ImageKnifeComponent {
  private detachFromLayoutGIF :DetachFromLayout|undefined = undefined;

  private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
+  private lastSrc: string | Resource | PixelMap = ""
  listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
-  private value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId)

  @State currentSize : Size = {
    width: 0.01,
@ -140,18 +138,15 @@ export struct ImageKnifeComponent {
      })
  }
  onLayoutComplete:()=>void = ():void=>{
-    this.value = componentUtils.getRectangleById(this.keyCanvas.keyId);
-    this.currentWidth = px2vp(this.value.size.width)
-    this.currentHeight = px2vp(this.value.size.height)
-    if (this.currentWidth <= 0 || this.currentHeight <= 0) {
+    if (this.context.width <= 0 || this.context.height <= 0) {
      // 存在宽或者高为0,此次重回无意义,无需进行request请求
    } else {
      // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
-      if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
+      if ((this.context.height != this.lastHeight || this.context.width != this.lastWidth) || this.firstDrawFlag) {
        this.firstDrawFlag = false;
-        LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
-        this.lastWidth = this.currentWidth
-        this.lastHeight = this.currentHeight
+        LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.context.width + '  currentHeight=' + this.context.height)
+        this.lastWidth = this.context.width
+        this.lastHeight = this.context.height
        this.imageKnifeExecute()
      }
    }
@ -159,6 +154,7 @@ export struct ImageKnifeComponent {

  watchImageKnifeOption() {
    LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
+    this.lastSrc = this.imageKnifeOption.loadSrc
    this.whetherWaitSize();
  }

@ -168,7 +164,7 @@ export struct ImageKnifeComponent {
   * @param drawFirst 是否是aboutToAppear第一次绘制
   */
  whetherWaitSize(drawFirst?: boolean) {
-    if (this.currentHeight <= 0 || this.currentWidth <= 0) {
+    if (this.context.height <= 0 || this.context.width <= 0) {
      // 宽或者高没有高度,需要等待canvas组件初始化完成
      if (drawFirst) {
        this.firstDrawFlag = true;
@ -209,7 +205,10 @@ export struct ImageKnifeComponent {
        } else {
          this.isGif = false
        }
-        this.runNextFunction(this.displayMainSource,data);
+        if(this.lastSrc !== request.loadSrc && this.lastSrc !== ""){}
+        else {
+          this.runNextFunction(this.displayMainSource,data);
+        }
        return false;
      }
      })
@ -328,7 +327,7 @@ export struct ImageKnifeComponent {
      this.resetGifData()
      if (this.canvasHasReady) {
        // 如果canvas已经初始化好了，清空原有的canvas内容
-        this.context.clearRect(0, 0, this.currentWidth, this.currentHeight)
+        this.context.clearRect(0, 0, this.context.width, this.context.height)
      }
      return
    }
@ -350,15 +349,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if(this.defaultLifeCycle.displayPlaceholder != undefined) {
-          this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }
@ -373,15 +372,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if(this.defaultLifeCycle.displayProgress != undefined) {
-          this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }
@ -396,15 +395,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if(this.defaultLifeCycle.displayThumbSizeMultiplier != undefined) {
-          this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }
@ -417,15 +416,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if(this.defaultLifeCycle.displayMainSource != undefined) {
-          this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }
@ -440,15 +439,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if( this.defaultLifeCycle.displayRetryholder != undefined) {
-          this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }
@ -462,15 +461,15 @@ export struct ImageKnifeComponent {
      return
    }
    if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
-      this.currentWidth, this.currentHeight, (gifTimeId) => {
+      this.context.width, this.context.height, (gifTimeId) => {
        this.setGifTimeId(gifTimeId)
      },this.imageKnifeOption.drawLifeCycle)) {
      if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
-        this.currentWidth, this.currentHeight, (gifTimeId) => {
+        this.context.width, this.context.height, (gifTimeId) => {
          this.setGifTimeId(gifTimeId)
        },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
        if(this.defaultLifeCycle.displayErrorholder != undefined) {
-          this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
+          this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.context.width, this.context.height, (gifTimeId) => {
            this.setGifTimeId(gifTimeId)
          })
        }