!143 ImageKnife新增图片宽高自适应功能

Merge pull request !143 from zhanghuan633/master

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 修复进度条问题
 - 修复单帧gif图片加载失败
 - removeRunning删除running队列log设置开关
+- ImageKnife新增图片宽高自适应功能
 
 ## 2.1.2-rc.10
 - 修复部分gif图片识别成静态图

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  # 数据切换测试,组件动画

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,6 +281,7 @@ 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 }) {
 
@@ -284,6 +304,7 @@ struct IndexFunctionDemo {
             })
 
         }.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('测试图片抗锯齿')

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

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

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

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

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%')
+      .width((this.imageKnifeOption!=undefined && this.imageKnifeOption.mainScaleType!= undefined && this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH )? this.currentSize.width:'100%')
-      .height('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
     }