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

2.svg解码单位改为px 3.获取组件宽高改用onSizeChange 4.修复复用占位图不显示 Signed-off-by: zgf <zenggaofeng2@h-partners.com>
2024-06-14 15:03:00 +08:00 · 2024-06-14 15:03:00 +08:00 · 7b4f496150
parent d4a87f0c5e
commit 7b4f496150
6 changed files with 39 additions and 17 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,10 @@
 - 提供清理缓存能力
 - 修复preLoad接口失效
 - 修复多线程图片加载出现空白问题
+- 获取组件宽高改用onSizeChange （需要API12）
+- svg解码宽高单位给位px
+- 修复复用场景下从内存获取图片后又清空了画布导致图片不显示
+- 修复复用场景主图比占位图绘制快后下次不显示占位图问题

 ## 2.2.0-rc.2
 - ImageKnife支持下采样
--- a/library/src/main/ets/components/imageknife/ImageKnife.ets
+++ b/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;
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/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();
  }

--- a/library/src/main/ets/components/imageknife/RequestOption.ets
+++ b/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;
        }
--- a/library/src/main/ets/components/imageknife/interface/AsyncCallback.ets
+++ b/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;
 }
--- a/library/src/main/ets/components/imageknife/utils/svg/SVGParseImpl.ets
+++ b/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,
-        width: wValue
+        height: vp2px(hValue),
+        width: vp2px(wValue)
      };
      let opts: image.DecodingOptions = {
        editable: true,