!229 ImageKnife控制可视化区域图片

Merge pull request !229 from 17792399693/master

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.2.0-rc.2
 - ImageKnife支持heic图片修改demo，按钮控制组件是否展示
+- ImageKnife控制可视化区域图片
 
 ## 2.2.0-rc.1
 - 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -122,6 +122,10 @@ struct IndexFunctionDemo {
         .height(60).backgroundColor(Color.Pink)
         Text("测试复用场景").fontSize(15)
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("可视区加载")
+            .onClick(() => {
+              router.pushUrl({ url: "pages/testVisiblePage" });
+            }).margin({ top: 5, left: 3 })
           Button("懒加载复用列表")
             .onClick(() => {
               console.log("测试一级内存缓存")

entry/src/main/ets/pages/testVisiblePage.ets

@@ -0,0 +1,263 @@
+/*
+ * 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/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 TestVisiblePage {
+  @State currentScene: string = 'LazyForEach';
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([]);
+  @State 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://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",
+    "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',
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",
+    "https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",
+    "https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",
+    "https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",
+    "https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",
+    "https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",
+    "http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",
+    "https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",
+    "https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",
+    "https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ymju0r3deAl7xoJ.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8zPcB0y4vdreG1d.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Z9dtor442OY76KV.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",
+    "https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/deRP83dkdlR4.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/rPJ1vKjJY6jz.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/z8K3P249ZmVW.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/e4xlVkl0BzMy.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/B6MleZrWeMvj.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/B6MleZ1ae5Ry.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/EyvzkoPgakDL.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/3zVRo1E16vZG.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/3zVRo1EdvZ0W.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/1mLMv1kd2BLZ.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/8NXRMzE019aB.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/0XDRo7xdPkVx.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/V06dg1RJ8pDr.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/2p5Ro1VDZvxR.png!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/1mLMWyxNVMAe.jpg!thumb-w321-webp75",
+    "https://xxtool-release.zone1.meitudata.com/7d8RoA7DXYB9.jpg!thumb-w321-webp75",
+    "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://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",
+  ]
+  private listScroller: Scroller = new Scroller();
+
+
+  aboutToAppear() {
+    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
+  }
+
+  build() {
+    Column() {
+      Flex(){
+        Button('懒加载场景').flexGrow(1).height(40).onClick(() => {
+          this.currentScene = 'LazyForEach';
+          this.listScroller.scrollToIndex(0);
+        })
+        Button('懒加载+复用场景').flexGrow(1).height(40).onClick(() => {
+          this.currentScene = 'ReuseAndLazyForEach';
+          this.listScroller.scrollToIndex(0);
+        })
+        Button('其他场景').flexGrow(1).height(40).onClick(() => {
+          this.currentScene = 'ForEach';
+          this.listScroller.scrollToIndex(0);
+        })
+      }.padding({top: 10, bottom: 10})
+      List({ space: 20, scroller: this.listScroller }) {
+        if(this.currentScene == 'LazyForEach') {
+          this.renderLazyForEachComponent();
+        } else if (this.currentScene == 'ReuseAndLazyForEach') {
+          this.renderReuseComponent();
+        } else {
+          this.renderForEachComponent();
+        }
+      }
+
+      .width("100%")
+      .height("100%")
+      .backgroundColor(0xFAEEE0)
+    }.width("100%").height("100%")
+  }
+
+  @Builder
+  renderLazyForEachComponent () {
+    LazyForEach(this.hotCommendList, (item: string, index: number) => {
+      ListItem() {
+        MyComponent({ url: item, index: index + '' }).width("100%").height("100%")
+      }.width(200).height(200).backgroundColor(Color.Orange)
+    })
+  }
+
+  @Builder
+  renderReuseComponent () {
+    LazyForEach(this.hotCommendList, (item: string, index: number) => {
+      ListItem() {
+        ReuseComponent({ url: item, index: index + '' }).width("100%").height("100%")
+      }.width(200).height(200).backgroundColor(Color.Orange)
+    })
+  }
+
+  @Builder
+  renderForEachComponent () {
+    ForEach(this.data, (item: string, index: number) => {
+      ListItem() {
+        MyComponent({ url: item, index: index + '' }).width("100%").height("100%")
+      }.width(200).height(200).backgroundColor(Color.Orange)
+    })
+  }
+}
+
+
+
+// 没有复用的组件
+@Component
+struct MyComponent {
+  @Prop url: string = "";
+  @Prop index: string = '0';
+
+  build() {
+    Column() {
+      Flex({ direction: FlexDirection.Column}) {
+        Text(this.index).fontSize(18).fontColor(Color.White)
+        ImageKnifeComponent({
+          imageKnifeOption:{
+            loadSrc: this.url,
+            placeholderSrc: $r('app.media.icon_loading'),
+            errorholderSrc: $r('app.media.icon_failed'),
+          }
+        }).height(150)
+      }
+    }.width("100%").height("100%")
+  }
+}
+
+// 复用组件
+@Reusable
+@Component
+struct ReuseComponent {
+  @Prop url: string = "";
+  @Prop index: string = '0';
+
+  aboutToReuse(params: Record<string, string>) {
+    this.url = params.url;
+    this.index = params.index;
+  }
+
+  build() {
+    Column() {
+      Flex({ direction: FlexDirection.Column}) {
+        Text(this.index).fontSize(18).fontColor(Color.White)
+        ImageKnifeComponent({
+          imageKnifeOption:{
+            loadSrc: this.url,
+            placeholderSrc: $r('app.media.icon_loading'),
+            errorholderSrc: $r('app.media.icon_failed'),
+          }
+        }).height(150)
+      }
+    }.width("100%").height("100%")
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -48,6 +48,7 @@
     "pages/testImageKnifeAutoWidthPage",
     "pages/testImageKnifeAutoHeightPage",
     "pages/testPriorityComponent",
+    "pages/testVisiblePage",
     "pages/testReusePhotoPage",
     "pages/testImageKnifeCache",
     "pages/webpImageTestPage",

library/src/main/ets/components/imageknife/ImageKnife.ets

@@ -16,7 +16,7 @@
 import { DiskLruCache } from "../cache/DiskLruCache"
 import { EngineKeyFactories } from "../cache/key/EngineKeyFactories"
 import { EngineKeyInterface } from "../cache/key/EngineKeyInterface"
-import { CacheType, RequestOption, Size } from "../imageknife/RequestOption"
+import { CacheType, RequestOption, Size, ImageKnifeRequestState } from "../imageknife/RequestOption";
 import { AsyncCallback } from "../imageknife/interface/AsyncCallback"
 import { PlaceHolderManager } from "../imageknife/holder/PlaceHolderManager"
 import { RetryHolderManager } from "../imageknife/holder/RetryHolderManager"
@@ -268,6 +268,7 @@ export class ImageKnife {
 
   // 删除 请求
   remove(uuid: string) {
+    LogUtil.log('VISIBLE: remove request ' + uuid);
     this.executingJobMap.remove(uuid);
   }
 
@@ -495,6 +496,7 @@ export class ImageKnife {
 
   // 删除执行结束的running
   removeRunning(request: RequestOption) {
+    LogUtil.log('VISIBLE: removeRunning ' + request.uuid + '|' + request.loadSrc);
     if (!this.isPaused) {
       //不暂停则继续加载
       this.executingJobMap.remove(request.uuid);
@@ -504,6 +506,8 @@ export class ImageKnife {
 
   // 启动新线程 去磁盘取 去网络取
   private loadCacheManager(request: RequestOption) {
+    LogUtil.log("VISIBLE: loadCacheManager start uuid : " + request.uuid + '|' + request.requestState + " url : " + request.loadSrc);
+    if (request.requestState === ImageKnifeRequestState.DESTROY) return;
     if (this.keyNotEmpty(request)) {
       if (this.executingJobMap.length > this.maxRequests) {
         this.jobQueue.add(request);
@@ -621,11 +625,15 @@ export class ImageKnife {
       request.errorholderOnComplete(errorholderCacheKey);
       return;
     } else if (usageType == Constants.MAIN_HOLDER && mainCache) {
-      LogUtil.info("imageknife load mainsource from MemoryCache")
       mainCache.waitSaveDisk = false;
       let requestList: List<RequestOption> | undefined = this.executingJobMap.get(request.uuid);
+      LogUtil.info("VISIBLE: imageknife load mainsource from MemoryCache. requestList?.length: " + requestList?.length);
+      // 组件被销毁会删除请求，因此requestList可能是undefined
       if(requestList != undefined) {
         requestList.forEach((requestOption: RequestOption)=>{
+          if (requestOption.requestState === ImageKnifeRequestState.PROGRESS) {
+            requestOption.requestState = ImageKnifeRequestState.COMPLETE;
+          }
           requestOption.loadComplete(mainCache as ImageKnifeData);
         })
       }
@@ -675,8 +683,13 @@ export class ImageKnife {
         if ((typeof (data as PixelMap).isEditable) == 'boolean') {
           let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, data as PixelMap);
           let requestList: List<RequestOption> | undefined = this.executingJobMap.get(request.uuid)
+          LogUtil.info("VISIBLE: taskpool execute done. data as PixelMap: " + requestList?.length);
+          // 组件被销毁会删除请求，因此requestList可能是undefined
           if(requestList != undefined) {
             requestList.forEach((requestOption: RequestOption)=>{
+              if (requestOption.requestState === ImageKnifeRequestState.PROGRESS) {
+                requestOption.requestState = ImageKnifeRequestState.COMPLETE;
+              }
               requestOption.loadComplete(imageKnifeData);
             })
           }
@@ -684,17 +697,30 @@ export class ImageKnife {
         } else if ((data as GIFFrame[]).length > 0) {
           let imageKnifeData = ImageKnifeData.createImageGIFFrame(ImageKnifeType.GIFFRAME, data as GIFFrame[]);
           let requestList: List<RequestOption> | undefined = this.executingJobMap.get(request.uuid);
+          LogUtil.info("VISIBLE: taskpool execute done. data as GIFFrame: " + requestList?.length);
+          // 组件被销毁会删除请求，因此requestList可能是undefined
           if(requestList != undefined) {
             requestList.forEach((requestOption: RequestOption)=>{
+              if (requestOption.requestState === ImageKnifeRequestState.PROGRESS) {
+                requestOption.requestState = ImageKnifeRequestState.COMPLETE;
+              }
               requestOption.loadComplete(imageKnifeData);
             })
           }
           this.memoryCacheProxy.putValue(request.generateCacheKey, imageKnifeData);
         } else {
+          if (request.requestState === ImageKnifeRequestState.PROGRESS) {
+            request.requestState = ImageKnifeRequestState.ERROR;
+          }
+          LogUtil.info("VISIBLE: MAIN_HOLDER loadError. request: " + request.uuid + '|' + request.requestState + '|' + request.loadSrc);
           request.loadError("request resources error")
         }
       }
     }).catch((err: BusinessError | string) => {
+      if (request.requestState === ImageKnifeRequestState.PROGRESS) {
+        request.requestState = ImageKnifeRequestState.ERROR;
+      }
+      LogUtil.info("VISIBLE: taskpool response Error. request: " + request.uuid + '|' + request.requestState + '|' + request.loadSrc);
       request.loadError(err)
     })
   }
@@ -758,8 +784,14 @@ export class ImageKnife {
   // 分发下一个任务
   dispatchNextJob() {
     let request: RequestOption | undefined = this.jobQueue.pop();
+    LogUtil.log('VISIBLE: 出队列 . ' + request?.uuid + '|' + request?.requestState + '|' + request?.loadSrc);
     if (request != undefined) {
-      this.loadCacheManager(request);
+      // 出队列的时候，如果已经销毁就不执行loadCacheManager
+      if(request.requestState !== ImageKnifeRequestState.DESTROY) {
+        this.loadCacheManager(request);
+      } else {
+        this.dispatchNextJob();
+      }
     }
   }
 

library/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -16,7 +16,7 @@
 import { ImageKnifeOption } from '../imageknife/ImageKnifeOption'
 import { ImageKnifeGlobal } from '../imageknife/ImageKnifeGlobal'
 import { TransformType } from '../imageknife/transform/TransformType'
-import { DetachFromLayout, RequestOption, Size } from '../imageknife/RequestOption'
+import { DetachFromLayout, ImageKnifeRequestState, RequestOption, Size } from '../imageknife/RequestOption';
 import { ImageKnifeData } from '../imageknife/ImageKnifeData'
 import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
 import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
@@ -28,6 +28,7 @@ import componentUtils from '@ohos.arkui.componentUtils'
 import inspector from '@ohos.arkui.inspector'
 import util from '@ohos.util'
 import { ImageKnifeDrawFactory } from './ImageKnifeDrawFactory'
+import { ImageKnife } from './ImageKnife';
 
 interface KeyCanvas {
   keyId:string
@@ -113,6 +114,9 @@ export struct ImageKnifeComponent {
     height: 0.01
   }
 
+  @State request: RequestOption | undefined = undefined;
+  drawMainSourceSuccess: boolean = false;
+
   build() {
     Canvas(this.context)
       .key(this.keyCanvas.keyId)
@@ -157,9 +161,18 @@ export struct ImageKnifeComponent {
   }
 
   watchImageKnifeOption() {
-    LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
+    // 如果loadSrc改变 或 资源是gif且是多帧  request重新初始化
-    this.lastSrc = this.imageKnifeOption.loadSrc
+    LogUtil.log('VISIBLE: watchImageKnifeOption! ' + this.imageKnifeOption.loadSrc);
-    this.whetherWaitSize();
+    if((this.lastSrc !== this.imageKnifeOption.loadSrc) ||
+      (this.renderFrames_frames && this.renderFrames_frames.length > 1)) {
+      if (this.request !== undefined) {
+        this.request.requestState = ImageKnifeRequestState.DESTROY;
+        this.request = undefined;
+      }
+      this.request = new RequestOption();
+      this.lastSrc = this.imageKnifeOption.loadSrc;
+      this.whetherWaitSize();
+    }
   }
 
   /**
@@ -203,7 +216,7 @@ export struct ImageKnifeComponent {
   configNecessary(request: RequestOption) {
     request.load(this.imageKnifeOption.loadSrc)
       .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData) => {
-        LogUtil.log('ImageKnifeComponent request.load callback')
+        LogUtil.log('VISIBLE: ImageKnifeComponent request.load callback, err: ' + err);
         if(data.isGIFFrame()) {
           this.isGif = true
         } else {
@@ -211,7 +224,11 @@ export struct ImageKnifeComponent {
         }
         if(this.lastSrc !== request.loadSrc && this.lastSrc !== ""){}
         else {
-          this.runNextFunction(this.displayMainSource,data);
+          // 组件 没有被销毁 执行渲染逻辑
+          LogUtil.log('VISIBLE: request.load callback, request: ' + this.request?.requestState + '|' + this.request?.loadSrc)
+          if (this.request?.requestState !== ImageKnifeRequestState.DESTROY){
+            this.runNextFunction(this.displayMainSource,data);
+          }
         }
         return false;
       }
@@ -344,15 +361,19 @@ export struct ImageKnifeComponent {
       return
     }
     this.resetGifData()
-    let request = new RequestOption();
+    if(this.request == undefined) {
-    this.detachFromLayout = request.detachFromLayout;
+      this.request = new RequestOption();
-    this.configNecessary(request);
+      this.lastSrc = this.imageKnifeOption.loadSrc;
-    this.configCacheStrategy(request);
+    }
-    this.configDisplay(request);
+    this.detachFromLayout = this.request.detachFromLayout;
-    this.configHspContext(request);
+    this.configNecessary(this.request);
-    this.configRenderGpu(request);
+    this.configCacheStrategy(this.request);
-    if(ImageKnifeGlobal.getInstance().getImageKnife()!=undefined) {
+    this.configDisplay(this.request);
-      ImageKnifeGlobal.getInstance().getImageKnife()?.call(request);
+    this.configHspContext(this.request);
+    this.configRenderGpu(this.request);
+    let imageKnife: ImageKnife | undefined = ImageKnifeGlobal?.getInstance()?.getImageKnife();
+    if(imageKnife != undefined) {
+      imageKnife.call(this.request);
     }
   }
 
@@ -507,6 +528,8 @@ export struct ImageKnifeComponent {
     // }
     // getImageInfo异步
     data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
+      // 如果主图绘制完成 则不绘制占位图
+      if(this.drawMainSourceSuccess) return;
       LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
       let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER
       context.save();
@@ -615,7 +638,8 @@ export struct ImageKnifeComponent {
         }
         ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
         context.restore();
-        LogUtil.log('ImageKnifeComponent default drawMainSource end!')
+        this.drawMainSourceSuccess = true;
+        LogUtil.log('VISIBLE: ImageKnifeComponent default drawMainSource end!');
       })
       if (data.drawPixelMap != undefined) {
         data.drawPixelMap.isShowOnComponent = true;
@@ -626,6 +650,8 @@ export struct ImageKnifeComponent {
         data.drawGIFFrame.isShowOnComponent = true
         this.detachFromLayoutGIF = data.drawGIFFrame.detachFromLayoutGIF
         this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
+        this.drawMainSourceSuccess = true;
+        LogUtil.log('VISIBLE: ImageKnifeComponent default drawMainSource  gif end!' + this.request?.loadSrc);
       }
     }
   }
@@ -722,13 +748,21 @@ export struct ImageKnifeComponent {
     }
   }
   aboutToRecycle(){
+    LogUtil.log('VISIBLE: Recycle happened! Component destroyed.');
     this.resetGifData()
+    if(this.detachFromLayout != undefined){
+      this.detachFromLayout.detach();
+    }
+    this.updateResetRequest();
   }
   aboutToReuse(params: ESObject) {
+    LogUtil.log('VISIBLE: Reuse happened!');
     this.context.clearRect(0,0,this.context.width,this.context.height)
+    // watch方法会触发两次,第二次触发不会执行加载逻辑,reuse比watch晚,因此需要手动在此处触发加载逻辑
+    this.whetherWaitSize();
   }
   aboutToAppear() {
-    LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
+    LogUtil.log('VISIBLE: ImageKnifeComponent aboutToAppear happened!')
     this.canvasHasReady = false;
     this.whetherWaitSize(true);
 
@@ -736,7 +770,7 @@ export struct ImageKnifeComponent {
   }
 
   aboutToDisappear() {
-    LogUtil.log('ImageKnifeComponent aboutToDisappear happened!')
+    LogUtil.log('VISIBLE: ImageKnifeComponent aboutToDisappear happened!')
     if(this.detachFromLayout != undefined){
       this.detachFromLayout.detach();
     }
@@ -750,6 +784,16 @@ export struct ImageKnifeComponent {
       this.resetGifData();
     }
     this.listener.off("layout",this.onLayoutComplete)
+    this.updateResetRequest();
+  }
+
+  // 更新并重置request
+  updateResetRequest() {
+    if(this.request != undefined) {
+      LogUtil.log('VISIBLE: 更新并重置request' + this.request.uuid + '|' + this.request.loadSrc);
+      this.request.requestState = ImageKnifeRequestState.DESTROY;
+      this.request = undefined;
+    }
   }
 
   onPageShow() {

library/src/main/ets/components/imageknife/RequestOption.ets

@@ -66,6 +66,13 @@ export interface Size {
   height: number
 }
 
+export enum ImageKnifeRequestState {
+  PROGRESS,
+  COMPLETE,
+  ERROR,
+  DESTROY
+}
+
 export enum CacheType {
   Default,
   //缓存
@@ -179,6 +186,8 @@ export class RequestOption {
   }
   // module资源的需要当前的module context
   moduleContext?: common.UIAbilityContext = undefined;
+  // 请求状态
+  requestState: ImageKnifeRequestState = ImageKnifeRequestState.PROGRESS
 
   constructor() {
     // 初始化全局监听