1.修复复用场景下从内存获取图片后又清空了画布导致图片不显示,

2.svg解码单位改为px
3.获取组件宽高改用onSizeChange
4.修复复用占位图不显示

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -6,6 +6,10 @@
 - 提供清理缓存能力
 - 修复preLoad接口失效
 - 修复多线程图片加载出现空白问题
+- 获取组件宽高改用onSizeChange （需要API12）
+- svg解码宽高单位给位px
+- 修复复用场景下从内存获取图片后又清空了画布导致图片不显示
+- 修复复用场景主图比占位图绘制快后下次不显示占位图问题
 
 ## 2.2.0-rc.2
 - ImageKnife支持下采样

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

@@ -744,7 +744,7 @@ export class ImageKnife {
           if (requestOption.requestState === ImageKnifeRequestState.PROGRESS) {
             requestOption.requestState = ImageKnifeRequestState.COMPLETE;
           }
-          requestOption.loadComplete(mainCache as ImageKnifeData);
+          requestOption.loadComplete(mainCache as ImageKnifeData,true);
         })
       }
       return;

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

@@ -56,9 +56,6 @@ export struct ImageKnifeComponent {
   private imageSmoothingEnabled: boolean = true;
   // 是否是gif图片
   private isGif: boolean = false
-  @State keyCanvas: KeyCanvas = {
-    keyId: util.generateRandomUUID()
-  }
   defaultLifeCycle: IDrawLifeCycle = {
 
     // 展示占位图
@@ -107,8 +104,7 @@ export struct ImageKnifeComponent {
 
   private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
   private lastSrc: string | Resource | PixelMap = ""
-  listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
+  private isClearRect: boolean = true
-
   @State currentSize : Size = {
     width: 0.01,
     height: 0.01
@@ -119,7 +115,6 @@ export struct ImageKnifeComponent {
 
   build() {
     Canvas(this.context)
-      .id(this.keyCanvas.keyId)
       .width((this.imageKnifeOption!=undefined && this.imageKnifeOption.mainScaleType!= undefined && this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH )? this.currentSize.width:'100%')
       .height((this.imageKnifeOption!=undefined && this.imageKnifeOption.mainScaleType!= undefined && this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT )? this.currentSize.height:'100%')
       .renderFit(RenderFit.RESIZE_FILL)
@@ -135,6 +130,22 @@ export struct ImageKnifeComponent {
           this.onReadyNextData = undefined
         }
       })
+      .onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => {
+        this.lastWidth = oldValue.width as number
+        this.lastHeight = oldValue.height as number
+        if (this.context.width <= 0 || this.context.height <= 0) {
+          // 存在宽或者高为0,此次重回无意义,无需进行request请求
+        } else {
+          // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
+          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.context.width + '  currentHeight=' + this.context.height)
+            this.lastWidth = this.context.width
+            this.lastHeight = this.context.height
+            this.imageKnifeExecute()
+          }
+        }
+      })
       .onClick((event?: ClickEvent) => {
         // 需要将点击事件回传
         if (this.imageKnifeOption.onClick) {
@@ -169,6 +180,8 @@ export struct ImageKnifeComponent {
         this.request.requestState = ImageKnifeRequestState.DESTROY;
         this.request = undefined;
       }
+      this.isClearRect = true
+      this.drawMainSourceSuccess = false
       this.request = new RequestOption();
       this.lastSrc = this.imageKnifeOption.loadSrc;
       this.whetherWaitSize();
@@ -215,7 +228,7 @@ export struct ImageKnifeComponent {
 
   configNecessary(request: RequestOption) {
     request.load(this.imageKnifeOption.loadSrc)
-      .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData) => {
+      .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData, isMainCache?:boolean) => {
         LogUtil.log('VISIBLE: ImageKnifeComponent request.load callback, err: ' + err);
         if (err != "" && this.imageKnifeOption.onLoadListener && this.imageKnifeOption.onLoadListener.onLoadFailed) {
           this.imageKnifeOption.onLoadListener.onLoadFailed(err as string);
@@ -239,6 +252,10 @@ export struct ImageKnifeComponent {
         } else {
           this.isGif = false
         }
+        if(isMainCache) {
+          this.context.clearRect(0,0,this.context.width,this.context.height)
+          this.isClearRect = false
+        }
         if(this.lastSrc !== request.loadSrc && this.lastSrc !== ""){}
         else {
           // 组件 没有被销毁 执行渲染逻辑
@@ -780,16 +797,17 @@ export struct ImageKnifeComponent {
   }
   aboutToReuse(params: ESObject) {
     LogUtil.log('VISIBLE: Reuse happened!');
-    this.context.clearRect(0,0,this.context.width,this.context.height)
+    if(this.isClearRect) {
+      this.context.clearRect(0,0,this.context.width,this.context.height)
+    }
     // watch方法会触发两次,第二次触发不会执行加载逻辑,reuse比watch晚,因此需要手动在此处触发加载逻辑
-    this.whetherWaitSize();
   }
   aboutToAppear() {
     LogUtil.log('VISIBLE: ImageKnifeComponent aboutToAppear happened!')
     this.canvasHasReady = false;
     this.whetherWaitSize(true);
 
-    this.listener.on("layout",this.onLayoutComplete)
+    // this.listener.on("layout",this.onLayoutComplete)
   }
 
   aboutToDisappear() {
@@ -806,7 +824,7 @@ export struct ImageKnifeComponent {
     if(this.isGif){
       this.resetGifData();
     }
-    this.listener.off("layout",this.onLayoutComplete)
+    // this.listener.off("layout",this.onLayoutComplete)
     this.updateResetRequest();
   }
 

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

@@ -591,13 +591,13 @@ export class RequestOption {
   fallbackOnError = (error: BusinessError | string) => {
     LogUtil.error("失败占位图解析失败 error =" + JSON.stringify(error));
   }
-  loadComplete = (imageKnifeData: ImageKnifeData) => {
+  loadComplete = (imageKnifeData: ImageKnifeData,isMainCache?:boolean) => {
     this.loadMainReady = true;
     // 三级缓存数据加载成功
     if (this.requestListeners != undefined) {
       for (let i = 0; i < this.requestListeners.length; i++) {
         let requestListener = this.requestListeners[i];
-        let boolInterception = requestListener.callback("", imageKnifeData);
+        let boolInterception = requestListener.callback("", imageKnifeData,isMainCache);
         if (boolInterception) {
           break;
         }

library/src/main/ets/components/imageknife/interface/AsyncCallback.ets

@@ -14,5 +14,5 @@
  */
 
 export interface AsyncCallback<T> {
-  callback:(err: string, data: T)=>boolean;
+  callback:(err: string, data: T,isMainCache?:boolean)=>boolean;
 }

library/src/main/ets/components/imageknife/utils/svg/SVGParseImpl.ets

@@ -29,8 +29,8 @@ export class SVGParseImpl implements IParseSvg {
       let hValue = Math.round(value.size.height);
       let wValue = Math.round(value.size.width);
       let defaultSize: image.Size = {
-        height: hValue,
+        height: vp2px(hValue),
-        width: wValue
+        width: vp2px(wValue)
       };
       let opts: image.DecodingOptions = {
         editable: true,