!433 ImageFit.Auto 组件宽度更改后自动支持自适应高度

Merge pull request !433 from Madi/master

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

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 })
+    }
+  }
+}
+
+

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',

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"
     }
   ]
 }

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"
   ]
 }

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:自适用图片高度"
     }
   ]
 }

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"
   },

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)
     }

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) {

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

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
 }