修复图片缩放时出现重影

Signed-off-by: zenggaofeng <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## 2.1.2-rc.4
 - canvas新增抗锯齿
-
+- 修复图片缩放时出现重影
 
 ## 2.1.2-rc.3
 - svg图片解码改为imageSource解码

entry/oh-package.json5

@@ -4,7 +4,7 @@
   "name": "entry",
   "description": "example description",
   "repository": {},
-  "version": "2.1.2-rc.3",
+  "version": "2.1.2-rc.4",
   "dependencies": {
     "@ohos/libraryimageknife": "file:../sharedlibrary",
     "@ohos/sharedlibrary2": "file:../sharedlibrary2",

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

@@ -296,6 +296,10 @@ struct IndexFunctionDemo {
             .onClick(() => {
               router.pushUrl({ url: 'pages/testImageAntiAliasingWithPage' });
             }).margin({ top: 5, left: 3 })
+          Button('共享转场缩放')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageKnifeRouter1' });
+            }).margin({ top: 5, left: 3 })
         }.width('100%').height(60).backgroundColor(Color.Pink)
       }
     }

entry/src/main/ets/pages/testImageKnifeRouter1.ets

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2023 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 } from '@ohos/libraryimageknife'
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct TestImageKnifeRouter {
+  @State array: Array<string> = [
+    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+    'https://img-blog.csdnimg.cn/20191215043500229.png',
+    'https://img-blog.csdn.net/20140514114029140',
+    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
+  ]
+
+  build() {
+    Column() {
+      Grid() {
+        ForEach(this.array, (item: string, index: number) => {
+          GridItem() {
+            ImageKnifeComponent({
+              imageKnifeOption: {
+                loadSrc: item,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                onClick: () => {
+                  router.pushUrl({ url: "pages/testImageKnifeRouter2", params: { url: this.array[index] } })
+                }
+              }
+            }).width(150).height(150)
+              .sharedTransition(this.array[index], {
+                duration: 500,
+                curve: Curve.Linear,
+                type: SharedTransitionEffectType.Exchange
+              })
+          }
+        })
+      }.columnsTemplate('1fr 1fr')
+      .rowsTemplate('1fr 1fr')
+    }.width("100%").height("100%")
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: 0 })
+    PageTransitionExit({ duration: 0 })
+  }
+}

entry/src/main/ets/pages/testImageKnifeRouter2.ets

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2023 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 } from '@ohos/libraryimageknife'
+import router from '@ohos.router'
+
+interface ParamsType {
+  url: string
+}
+
+@Entry
+@Component
+struct TestImageKnifeRouter {
+  @State url: string = ""
+
+  aboutToAppear() {
+    this.url = (router.getParams() as ParamsType).url
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({
+        imageKnifeOption: {
+          loadSrc: this.url,
+          placeholderSrc: $r('app.media.icon_loading'),
+          errorholderSrc: $r('app.media.icon_failed'),
+          onClick: () => {
+            router.back()
+          }
+        }
+      }).width("100%").height(600)
+        .sharedTransition(this.url, {
+          duration: 500,
+          curve: Curve.Linear,
+          type: SharedTransitionEffectType.Exchange
+        })
+    }.width("100%").height("100%")
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: 0 })
+    PageTransitionExit({ duration: 0 })
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -35,6 +35,8 @@
     "pages/multiHspTestPage",
     "pages/testManyNetImageLoadWithPage",
     "pages/testManyGifLoadWithPage",
-    "pages/testImageAntiAliasingWithPage"
+    "pages/testImageAntiAliasingWithPage",
+    "pages/testImageKnifeRouter1",
+    "pages/testImageKnifeRouter2"
   ]
 }

library/oh-package.json5

@@ -14,7 +14,7 @@
   "main": "index.ets",
   "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
   "type": "module",
-  "version": "2.1.2-rc.3",
+  "version": "2.1.2-rc.4",
   "dependencies": {
     "pako": "^2.1.0",
     "@ohos/disklrucache": "^2.0.2-rc.0",

library/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -97,6 +97,7 @@ export struct ImageKnifeComponent {
     Canvas(this.context)
       .width('100%')
       .height('100%')
+      .renderFit(RenderFit.RESIZE_FILL)
       .onAreaChange((oldValue: Area, newValue: Area) => {
         if(newValue != undefined && newValue.width != undefined && newValue.height != undefined) {
           this.currentWidth = newValue.width as number
@@ -193,8 +194,8 @@ export struct ImageKnifeComponent {
       })
 
     let realSize:Size = {
-      width: this.currentWidth,
-      height: this.currentHeight
+      width: this.context.width,
+      height: this.context.height
     }
     request.setImageViewSize(realSize)
   }

oh-package.json5

@@ -6,6 +6,6 @@
   "name": "imageknife",
   "description": "example description",
   "repository": {},
-  "version": "2.1.2-rc.3",
+  "version": "2.1.2-rc.4",
   "dependencies": {}
 }