1. ImageFit.Auto 组件宽度更改后自动支持自适应高度，并补充样例。

2.修复onLoadStart会调用2次的bug Signed-off-by: madixin <madixin@huawei.com>
2024-11-25 16:56:59 +08:00 · 2024-11-25 16:56:59 +08:00 · e29c659e89
parent 74bc24d61d
commit e29c659e89
11 changed files with 138 additions and 51 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,10 @@
+## 3.2.0-rc.5
+- Enhance: ImageFit.Auto support adaptive height after component width change
+- Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0)
+
 ## 3.2.0-rc.4
 - Support ICO format images
- Fix bugs: call reload problem in onLoadFailed
+- Fix bug: call reload problem in onLoadFailed
 - Provide default downsampling strategy to prevent slow loading for large images

 ## 3.2.0-rc.3
--- a/entry/src/main/ets/pages/AutoImageFit.ets
+++ b/entry/src/main/ets/pages/AutoImageFit.ets
@ -0,0 +1,60 @@
+/*
+ * 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,
+  ImageKnifeData,
+  ImageKnifeRequest, LogUtil
+} from '@ohos/libraryimageknife';
+
+@Entry
+@Component
+struct AutoImageFit {
+  @State width1: Length = '100%'
+
+  build() {
+    Scroll() {
+      Column() {
+        Button($r('app.string.adjust_size')).onClick(() => {
+          if (this.width1.toString() == '100%') {
+            this.width1 = '60%'
+          } else {
+            this.width1 = '100%'
+          }
+        }).width('100%')
+        Text('Image')
+        Image('https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg').width('100%').objectFit(ImageFit.Auto)
+        Text('ImageKnife')
+        ImageKnifeComponent({
+          imageKnifeOption: {
+            loadSrc: 'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg',
+            objectFit: ImageFit.Auto,
+            onLoadListener: {
+              onLoadStart: (request?: ImageKnifeRequest) => {
+                LogUtil.info('onLoadStart')
+              },
+              onLoadSuccess: (data: string | PixelMap | undefined, imageKnifeData: ImageKnifeData,
+                request?: ImageKnifeRequest) => {
+                LogUtil.info('onLoadSuccess')
+              }
+            }
+          }
+        }).width('100%')
+
+      }.width(this.width1).border({ width: 1 })
+    }
+  }
+}
+
+
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@ -95,6 +95,12 @@ struct Index {

          });
        })
+        Button($r('app.string.Auto_ImageFit')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/AutoImageFit',
+
+          });
+        })
        Button($r('app.string.Image_scaling')).margin({top:10}).onClick(()=>{
          router.push({
            uri: 'pages/TransformPage',
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@ -647,6 +647,14 @@
    {
      "name": "After_the_sampling",
      "value": "Size after downsampling"
+    },
+    {
+      "name": "adjust_size",
+      "value": "Adjust size"
+    },
+    {
+      "name": "Auto_ImageFit",
+      "value": "ImageFit.Auto:Auto ImageFit Height"
    }
  ]
 }
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -37,6 +37,7 @@
    "pages/MaxRequest3",
    "pages/TestImageKnifeCallbackPage",
    "pages/TestListImageKnifeCallbackPage",
-    "pages/DownSamplePage"
+    "pages/DownSamplePage",
+    "pages/AutoImageFit"
  ]
 }
--- a/entry/src/main/resources/zh_CN/element/string.json
+++ b/entry/src/main/resources/zh_CN/element/string.json
@ -643,6 +643,14 @@
    {
      "name": "After_the_sampling",
      "value": "降采样后大小"
+    },
+    {
+      "name": "adjust_size",
+      "value": "调整大小"
+    },
+    {
+      "name": "Auto_ImageFit",
+      "value": "ImageFit.Auto:自适用图片高度"
    }
  ]
 }
--- a/library/oh-package.json5
+++ b/library/oh-package.json5
@ -14,7 +14,7 @@
  "main": "index.ets",
  "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
  "type": "module",
-  "version": "3.2.0-rc.4",
+  "version": "3.2.0-rc.5",
  "dependencies": {
    "@ohos/gpu_transform": "^1.0.2"
  },
--- a/library/src/main/ets/ImageKnifeDispatcher.ets
+++ b/library/src/main/ets/ImageKnifeDispatcher.ets
@ -24,7 +24,6 @@ import image from '@ohos.multimedia.image';
 import emitter from '@ohos.events.emitter';
 import { Constants, LoadPhase, LoadPixelMapCode } from './utils/Constants';
 import taskpool from '@ohos.taskpool';
-import { FileTypeUtil } from './utils/FileTypeUtil';
 import { IEngineKey } from './key/IEngineKey';
 import { DefaultEngineKey } from './key/DefaultEngineKey';
 import {
@ -60,7 +59,7 @@ export class ImageKnifeDispatcher {
      }
    } else {
      memoryCache = ImageKnife.getInstance()
-        .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption,isAnimator));
+        .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption,isAnimator, request.componentWidth, request.componentHeight));
    }

    //记录ImageKnifeRequestSource.SRC 开始内存检查的时间点
@ -197,7 +196,7 @@ export class ImageKnifeDispatcher {
      LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadStart:' + currentRequest.imageKnifeOption.loadSrc)
    }

-    let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator)
+    let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator, currentRequest.componentWidth, currentRequest.componentHeight)
    let requestList: List<ImageKnifeRequestWithSource> | undefined = this.executingJobMap.get(memoryKey)
    if (requestList == undefined) {
      requestList = new List()
@ -213,16 +212,6 @@ export class ImageKnifeDispatcher {
      isWatchProgress = true
    }

-    // 回调请求开始
-    requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => {
-      if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) {
-        requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart(requestWithSource.request)
-        LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadStart:' + currentRequest.imageKnifeOption.loadSrc)
-      }
-      if (requestWithSource.request.imageKnifeOption.progressListener !== undefined && requestWithSource.source === ImageKnifeRequestSource.SRC) {
-        isWatchProgress = true
-      }
-    });
    let src: string | number = ''
    let moduleName: string = ''
    let resName: string = ''
@ -259,7 +248,8 @@ export class ImageKnifeDispatcher {
      caPath: currentRequest.imageKnifeOption.caPath,
      targetWidth: currentRequest.componentWidth,
      targetHeight: currentRequest.componentHeight,
-      downsampType: currentRequest.imageKnifeOption.downsampleOf == undefined ? DownsampleStrategy.DEFAULT : currentRequest.imageKnifeOption.downsampleOf
+      downsampType: currentRequest.imageKnifeOption.downsampleOf == undefined ? DownsampleStrategy.DEFAULT : currentRequest.imageKnifeOption.downsampleOf,
+      isAutoImageFit: currentRequest.imageKnifeOption.objectFit == ImageFit.Auto
    }

    if(request.customGetImage == undefined) {
@ -438,7 +428,7 @@ export class ImageKnifeDispatcher {
    if (currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.File) {
      LogUtil.log('ImageKnife_DataTime_getAndShowImage_saveMemoryCache.start:'+currentRequest.imageKnifeOption.loadSrc)
      ImageKnife.getInstance()
-        .saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator),
+        .saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator, currentRequest.componentWidth, currentRequest.componentHeight),
          saveCacheImageData);
      LogUtil.log('ImageKnife_DataTime_getAndShowImage_saveMemoryCache.end:'+currentRequest.imageKnifeOption.loadSrc)
    }
--- a/library/src/main/ets/ImageKnifeLoader.ets
+++ b/library/src/main/ets/ImageKnifeLoader.ets
@ -132,6 +132,11 @@ export class ImageKnifeLoader {
    let size = imageInfoSync.size
    callBackData.imageWidth = size.width;
    callBackData.imageHeight = size.height;
+
+    if (request.isAutoImageFit && request.requestSource == ImageKnifeRequestSource.SRC){
+      request.componentHeight = request.componentWidth * size.height / size.width
+    }
+
    try {
      if ((request.downsampType !== DownsampleStrategy.NONE) &&
        request.requestSource == ImageKnifeRequestSource.SRC) {
--- a/library/src/main/ets/components/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/ImageKnifeComponent.ets
@ -33,6 +33,7 @@ export struct ImageKnifeComponent {
  private lastWidth: number = 0
  private lastHeight: number = 0
  private currentWidth: number = 0
+  private isImageFitAutoResize: boolean = false
  private currentHeight: number = 0
  private componentVersion: number = 0
  private currentContext: common.UIAbilityContext | undefined = undefined
@ -105,7 +106,12 @@ export struct ImageKnifeComponent {
              ' placeholderSrc = ' + this.imageKnifeOption.placeholderSrc +
              ' errorholderSrc = ' + this.imageKnifeOption.errorholderSrc +
              ' componentId = ' + this.getUniqueId())
-            ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
+
+            if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize) {
+              this.isImageFitAutoResize = false
+            } else {
+              ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
+            }
          }
        }
      })
@ -114,6 +120,7 @@ export struct ImageKnifeComponent {
  watchImageKnifeOption() {
    this.clearLastRequest()
    this.componentVersion++
+    this.isImageFitAutoResize = false
    this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
    LogUtil.log('watchImageKnifeOption execute request:width=' + this.currentWidth + ' height= ' + this.currentHeight +
      ' loadSrc = ' + this.imageKnifeOption.loadSrc +
@ -131,40 +138,37 @@ export struct ImageKnifeComponent {
  }

  getRequest(width: number, height: number): ImageKnifeRequest {
-    if (this.request == undefined) {
-      this.request = new ImageKnifeRequest(
-        this.imageKnifeOption,
-        this.imageKnifeOption.context !== undefined ? this.imageKnifeOption.context : this.getCurrentContext(),
-        width,
-        height,
-        this.componentVersion,
-        {
-          showPixelMap: (version: number, pixelMap: PixelMap | string,size:Size, requestSource: ImageKnifeRequestSource) => {
-            if (version !== this.componentVersion) {
-              return //针对reuse场景，不显示历史图片
-            }
-            this.pixelMap = pixelMap
-            if (typeof this.pixelMap !== 'string') {
-              if (this.imageKnifeOption.objectFit === ImageFit.Auto) {
-                this.adaptiveWidth = this.currentWidth
-                this.adaptiveHeight = size.height * this.currentWidth / size.width
-              }
-            }
-
-            if (requestSource == ImageKnifeRequestSource.SRC) {
-              this.objectFit =
-                this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
-            } else if (requestSource == ImageKnifeRequestSource.PLACE_HOLDER) {
-              this.objectFit =
-                this.imageKnifeOption.placeholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.placeholderObjectFit
-            } else {
-              this.objectFit =
-              this.imageKnifeOption.errorholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.errorholderObjectFit
+    this.request = new ImageKnifeRequest(
+      this.imageKnifeOption,
+      this.imageKnifeOption.context !== undefined ? this.imageKnifeOption.context : this.getCurrentContext(),
+      width,
+      height,
+      this.componentVersion,
+      {
+        showPixelMap: (version: number, pixelMap: PixelMap | string,size:Size, requestSource: ImageKnifeRequestSource) => {
+          if (version !== this.componentVersion) {
+            return //针对reuse场景，不显示历史图片
+          }
+          this.pixelMap = pixelMap
+          if (typeof this.pixelMap !== 'string') {
+            if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) {
+              this.adaptiveHeight = this.currentWidth * size.height / size.width
+              this.isImageFitAutoResize = true
            }
          }
-        })
-    }

+          if (requestSource == ImageKnifeRequestSource.SRC) {
+            this.objectFit =
+              this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
+          } else if (requestSource == ImageKnifeRequestSource.PLACE_HOLDER) {
+            this.objectFit =
+              this.imageKnifeOption.placeholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.placeholderObjectFit
+          } else {
+            this.objectFit =
+            this.imageKnifeOption.errorholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.errorholderObjectFit
+          }
+        }
+      })
    return this.request
  }
 }
--- a/library/src/main/ets/model/ImageKnifeData.ets
+++ b/library/src/main/ets/model/ImageKnifeData.ets
@ -150,6 +150,7 @@ export interface RequestJobRequest {
  caPath?: string,
  targetWidth: number
  targetHeight: number
-  downsampType: DownsampleStrategy
+  downsampType: DownsampleStrategy,
+  isAutoImageFit: boolean
 }