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

Signed-off-by: 张欢 <zhanghuan165@h-partners.com>

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -63,6 +63,25 @@ 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 }) {

entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets

@@ -0,0 +1,56 @@
+import { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent';
+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,56 @@
+import { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent';
+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,
+          }
+        })
+
+        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,57 @@
+import { ComponentUtils } from '@ohos.arkui.UIContext'
+import display from '@ohos.display';
+import { ImageKnifeComponent,
+  ScaleType } from '@ohos/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent';
+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_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

@@ -39,6 +39,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

@@ -104,11 +104,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.mainScaleType == ScaleType.AUTO_WIDTH || this.imageKnifeOption .mainScaleType == ScaleType.AUTO)? this.currentSize.width:'100%')
-      .height('100%')
+      .height((this.imageKnifeOption.mainScaleType == ScaleType.AUTO_WIDTH || this.imageKnifeOption .mainScaleType== ScaleType.AUTO)? this.currentSize.height:'100%')
       .renderFit(RenderFit.RESIZE_FILL)
       .onReady(() => {
         let ctx = this.context;
@@ -542,6 +547,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.currentHeight*scaleWidth
+        }else if (this.imageKnifeOption.mainScaleType == ScaleType.AUTO_HEIGHT){
+          this.currentSize.height=this.currentWidth*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!')
@@ -847,7 +862,13 @@ export enum ScaleType {
   // 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER
   CENTER_INSIDE = 7,
   // 如果不想适配，直接展示原图大小
-  NONE = 8
+  NONE = 8,
+  // 设置宽的时候，图片高度自适应
+  AUTO_HEIGHT =9,
+  // 设置高的时候，图片宽度自适应
+  AUTO_WIDTH =10,
+  //设置了宽和高，图片按照自身宽高显示
+  AUTO =11
 }
 
 
@@ -884,7 +905,7 @@ export class ScaleTypeHelper {
         ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
         break;
       default:
-        ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
+        ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
         break
     }