ImageKnife图片宽高自适应

Signed-off-by: 张欢 <zhanghuan165@h-partners.com>
2024-03-25 16:10:20 +08:00 · 2024-03-25 16:10:20 +08:00 · 504e2ec6ca
parent 598b3eaf58
commit 504e2ec6ca
8 changed files with 279 additions and 12 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,7 @@
 - 修复进度条问题
 - 修复单帧gif图片加载失败
 - removeRunning删除running队列log设置开关
+- ImageKnife新增图片宽高自适应功能

 ## 2.1.2-rc.10
 - 修复部分gif图片识别成静态图
--- a/README.md
+++ b/README.md
@ -364,6 +364,9 @@ request.skipMemoryCache(true)
 | ScaleType.FIT_XY        | int | 图像拉伸至组件大小                         |
 | ScaleType.CENTER_INSIDE | int | 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER |
 | ScaleType.NONE          | int | 如果不想适配，直接展示原图大小                   |
+| ScaleType.AUTO_HEIGHT   | int | 设置宽的时候，图片高度自适应                    |
+| ScaleType.AUTO_WIDTH    | int | 设置高的时候，图片宽度自适应                    |
+| ScaleType.AUTO          | int | 没有设置宽和高，图片按照自身宽高显示                |

 ### 图片变换相关

@ -503,6 +506,9 @@ HSP场景适配:
       - storageTestDiskLruCache.ets           # 磁盘缓存测试
       - storageTestLruCache.ets               # 内存缓存测试
       - testAllCacheInfoPage.ets              # 所有缓存信息获取测试
+       - testImageKnifeAutoHeightPage.ets      # 图片高度自适应测试
+       - testImageKnifeAutoWidthPage.ets       # 图片宽度自适应测试
+       - testImageKnifeAutoPage.ets            # 图片宽高自适应测试
       - testImageKnifeOptionChangedPage.ets   # 数据切换测试
       - testImageKnifeOptionChangedPage2.ets  # 数据切换测试,部分变换
       - testImageKnifeOptionChangedPage3.ets  # 数据切换测试,组件动画
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -15,7 +15,6 @@
 import router from '@ohos.router';


-
@Entry
@Component
 struct IndexFunctionDemo {
@ -38,6 +37,7 @@ struct IndexFunctionDemo {
            }).margin({ top: 5, left: 3 })

        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button("测试全球化")
            .onClick(() => {
@ -53,8 +53,6 @@ struct IndexFunctionDemo {
        }.width('100%').height(60).backgroundColor(Color.Pink)


-
-
        Text("测试图片切换功能点").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

@ -63,8 +61,29 @@ struct IndexFunctionDemo {
              console.log("测试ImageKnifeComponent所有图片切换")
              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage" });
            }).margin({ top: 5, left: 3 })
+          Button("测试图片高度自适应")
+            .onClick(() => {
+              console.log("测试ImageKnifeComponent图片高度自适应")
+              router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" });
+            }).margin({ top: 5, left: 3 })

        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button("测试图片宽度自适应")
+            .onClick(() => {
+              console.log("测试ImageKnifeComponent图片宽度自适应")
+              router.pushUrl({ url: "pages/testImageKnifeAutoWidthPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试图片宽高自适应")
+            .onClick(() => {
+              console.log("测试ImageKnifeComponent图片宽高自适应")
+              router.pushUrl({ url: "pages/testImageKnifeAutoPage" });
+            }).margin({ top: 5, left: 3 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button("测试thumbnail")
            .onClick(() => {
@ -190,6 +209,7 @@ struct IndexFunctionDemo {

            }).margin({ top: 15 })
        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

          Button("组件显式动画")
@ -211,7 +231,6 @@ struct IndexFunctionDemo {
            }).margin({ top: 15 })


-
        }.width('100%').height(60).backgroundColor(Color.Pink)

        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@ -262,13 +281,14 @@ struct IndexFunctionDemo {

            }).margin({ top: 5, left: 3 })
        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Text("HSP相关测试").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

          Button("进入HSP的library共享包")
            .onClick(() => {
-              router.pushUrl({url:'@bundle:com.openharmony.imageknife/sharedlibrary/ets/pages/Index'})
-                .then(()=>{
+              router.pushUrl({ url: '@bundle:com.openharmony.imageknife/sharedlibrary/ets/pages/Index' })
+                .then(() => {
                  console.log('push page suceess')
                })
            }).margin({ top: 15 })
@ -278,12 +298,13 @@ struct IndexFunctionDemo {
              router.pushUrl({ url: "pages/hspCacheTestPage" });
            }).margin({ top: 15 })
          Button("不同的hsp资源加载")
-            .onClick(()=>{
+            .onClick(() => {
              console.log("pages/multiHspTestPage 页面跳转")
              router.pushUrl({ url: "pages/multiHspTestPage" });
            })

        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Text("测试图片加载稳定").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button("测试多张网络图片加载速度")
@ -299,6 +320,7 @@ struct IndexFunctionDemo {
              router.pushUrl({ url: "pages/testManyGifLoadWithPage" });
            }).margin({ top: 5, left: 3 })
        }.width('100%').height(60).backgroundColor(Color.Pink)
+
        Text('测试图片抗锯齿').fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Button('测试图片抗锯齿')
--- a/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets
+++ b/entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets
@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/libraryimageknife'
+import componentUtils from '@ohos.arkui.componentUtils';
+
+@Entry
+@Component
+
+struct testImageKnifeAutoHeightPage {
+
+
+  private currentWidth: number  =0
+  private currentHeight: number  =0
+
+  @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
+
+  aboutToAppear(){
+    let displayClas : ESObject =null
+    try {
+      displayClas = display.getDefaultDisplaySync()
+      console.info('........width'+ displayClas.width)
+      console.info('........height'+ displayClas.height)
+
+    }catch (e){
+
+      console.error('error' + e)
+    }
+
+
+  }
+  build(){
+    Scroll(){
+      Column(){
+        ImageKnifeComponent({
+          imageKnifeOption:{
+            loadSrc :$r('app.media.pngSample'),
+            mainScaleType:ScaleType.AUTO_HEIGHT,
+          }
+        })
+          .width("100%")
+        Button(){
+          Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
+        }
+        .onClick(()=> {
+          this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
+          this.currentWidth = px2vp(this.value.size.width)
+          this.currentHeight = px2vp(this.value.size.height)
+          console.log('currentWidth'+this.currentWidth)
+          console.log('currentHeight'+this.currentHeight)
+        })
+      }
+    }
+
+  }
+}
--- a/entry/src/main/ets/pages/testImageKnifeAutoPage.ets
+++ b/entry/src/main/ets/pages/testImageKnifeAutoPage.ets
@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/libraryimageknife'
+import componentUtils from '@ohos.arkui.componentUtils';
+
+@Entry
+@Component
+
+struct testImageKnifeAutoPage {
+
+
+  private currentWidth: number  =0
+  private currentHeight: number  =0
+
+  @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
+
+  aboutToAppear(){
+    let displayClas : ESObject =null
+    try {
+      displayClas = display.getDefaultDisplaySync()
+      console.info('........width'+ displayClas.width)
+      console.info('........height'+ displayClas.height)
+
+    }catch (e){
+
+      console.error('error' + e)
+    }
+
+
+  }
+  build(){
+    Scroll(){
+      Column(){
+        ImageKnifeComponent({
+          imageKnifeOption:{
+            loadSrc :$r('app.media.pngSample'),
+            mainScaleType:ScaleType.AUTO,
+          }
+        })
+
+        Button(){
+          Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
+        }
+        .onClick(()=> {
+          this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
+          this.currentWidth = px2vp(this.value.size.width)
+          this.currentHeight = px2vp(this.value.size.height)
+          console.log('currentWidth'+this.currentWidth)
+          console.log('currentHeight'+this.currentHeight)
+        })
+      }
+    }
+
+  }
+}
--- a/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets
+++ b/entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets
@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2021 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 { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/libraryimageknife'
+import componentUtils from '@ohos.arkui.componentUtils';
+
+@Entry
+@Component
+
+struct testImageKnifeAutoWidthPage {
+
+
+  private currentWidth: number  =0
+  private currentHeight: number  =0
+
+  @State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
+
+  aboutToAppear(){
+    let displayClas : ESObject =null
+    try {
+      displayClas = display.getDefaultDisplaySync()
+      console.info('........width'+ displayClas.width)
+      console.info('........height'+ displayClas.height)
+
+    }catch (e){
+
+      console.error('error' + e)
+    }
+
+
+  }
+  build(){
+    Scroll(){
+      Column(){
+        ImageKnifeComponent({
+          imageKnifeOption:{
+            loadSrc :$r('app.media.pngSample'),
+            mainScaleType:ScaleType.AUTO_WIDTH,
+          }
+        })
+          .height(400)
+
+        Button(){
+          Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
+        }
+        .onClick(()=> {
+          this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
+          this.currentWidth = px2vp(this.value.size.width)
+          this.currentHeight = px2vp(this.value.size.height)
+          console.log('currentWidth'+this.currentWidth)
+          console.log('currentHeight'+this.currentHeight)
+        })
+      }
+    }
+
+  }
+}
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -40,6 +40,9 @@
    "pages/testImageKnifeRouter1",
    "pages/testImageKnifeRouter2",
    "pages/RequestOptionLoadImage",
-    "pages/testImageKnifeHttpRequestHeader"
+    "pages/testImageKnifeHttpRequestHeader",
+    "pages/testImageKnifeAutoPage",
+    "pages/testImageKnifeAutoWidthPage",
+    "pages/testImageKnifeAutoHeightPage"
  ]
 }
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@ -106,11 +106,16 @@ export struct ImageKnifeComponent {
  listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
  private value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId)

+  @State currentSize : Size = {
+    width: 0.01,
+    height: 0.01
+  }
+
  build() {
    Canvas(this.context)
      .key(this.keyCanvas.keyId)
-      .width('100%')
-      .height('100%')
+      .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)
      .onReady(() => {
        let ctx = this.context;
@ -583,6 +588,16 @@ export struct ImageKnifeComponent {
        LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
        context.save();
        context.clearRect(0, 0, compWidth, compHeight)
+        let scaleHeight = imageInfo.size.height/imageInfo.size.width
+        let scaleWidth = imageInfo.size.width/imageInfo.size.height
+        if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH){
+          this.currentSize.width=this.context.height*scaleWidth
+        }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT){
+          this.currentSize.height=this.context.width*scaleHeight
+        }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO){
+          this.currentSize.height=imageInfo.size.height
+          this.currentSize.width =imageInfo.size.width
+        }
        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!')
@ -912,7 +927,13 @@ export enum ScaleType {
  // 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER
  CENTER_INSIDE = 7,
  // 如果不想适配，直接展示原图大小
-  NONE = 8
+  NONE = 8,
+  // 设置宽的时候，图片高度自适应
+  AUTO_HEIGHT =9,
+  // 设置高的时候，图片宽度自适应
+  AUTO_WIDTH =10,
+  //没有设置宽和高，图片按照自身宽高显示
+  AUTO =11
 }


@ -949,7 +970,7 @@ export class ScaleTypeHelper {
        ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
        break;
      default:
-        ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
+        ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
        break
    }