canvas新增抗锯齿

Signed-off-by: liangdazhi <liangdazhi@h-partners.com>
2023-12-28 11:47:55 +08:00 · 2023-12-28 11:47:55 +08:00 · ec1db2bbb1
parent 14f0171fca
commit ec1db2bbb1
8 changed files with 88 additions and 3 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,6 @@
 ## 2.1.2-rc.3
 - svg图片解码改为imageSource解码
+- canvas新增抗锯齿


 ## 2.1.2-rc.2
--- a/README.md
+++ b/README.md
@ -132,6 +132,7 @@ imageKnifeOption = {
 | allCacheInfoCallback         | IAllCacheInfoCallback                                        | 输出缓存相关内容和信息（可选）      |
 | signature                    | ObjectKey                                                    | 自定key（可选）                     |
 | **drawLifeCycle**            | **IDrawLifeCycle**                                           | **用户自定义实现绘制方案（可选）**  |
+| imageSmoothingQuality        | AntiAliasing                                         | 抗锯齿属性配置             |

 其他参数只需要在ImageKnifeOption对象上按需添加即可。

@ -342,6 +343,14 @@ request.skipMemoryCache(true)
 | request.diskCacheStrategy(new NONE())      | NONE      | 表示不缓存任何内容            |
 | request.diskCacheStrategy(new RESOURCE())  | RESOURCE  | 表示只缓存转换过后的图片         |

+### AntiAliasing类型展示效果
+
+| 使用方法                    | 类型     | 策略描述        |
+|-------------------------|--------|-------------|
+| AntiAliasing.FIT_HIGH   | String | 图像抗锯齿设置为高画质 |
+| AntiAliasing.FIT_MEDIUM | String | 图像抗锯齿设置为中画质 |
+| AntiAliasing.FIT_LOW    | String | 图像抗锯齿设置为低画质 |
+
 ### ScaleType类型展示效果

 | 使用方法                    | 类型  | 策略描述                              |
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -286,6 +286,13 @@ 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('测试图片抗锯齿')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageAntiAliasingWithPage' });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
      }
    }
    .width('100%')
--- a/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets
+++ b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets
@ -0,0 +1,53 @@
+/*
+ * 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 { ImageKnifeComponent,AntiAliasing } from '@ohos/libraryimageknife'
+import { ImageKnifeOption } from '@ohos/libraryimageknife'
+import { RotateImageTransformation } from '@ohos/libraryimageknife'
+import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct TestImageAntiAliasingWithPage {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon_failed'),
+    };
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text("ImageKnife开启抗锯齿").fontSize(15)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_HIGH }).width(600).height(600)
+        Text("Image开启抗锯齿").fontSize(15)
+        Image($r('app.media.icon_failed'))
+          .width(600)
+          .height(600)
+          .margin(15)
+          .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .interpolation(ImageInterpolation.High)
+        Text("ImageKnife未开启抗锯齿").fontSize(15)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(600).height(600)
+        Text("Image未开启抗锯齿").fontSize(15)
+        Image($r('app.media.icon_failed'))
+          .width(600)
+          .height(600)
+          .margin(15)
+          .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -33,6 +33,7 @@
    "pages/SignatureTestPage",
    "pages/hspCacheTestPage",
    "pages/testManyNetImageLoadWithPage",
-    "pages/testManyGifLoadWithPage"
+    "pages/testManyGifLoadWithPage",
+    "pages/testImageAntiAliasingWithPage"
  ]
 }
--- a/library/index.ets
+++ b/library/index.ets
@ -97,7 +97,7 @@ export { ImageKnife } from './src/main/ets/components/imageknife/ImageKnife'
 export { ImageKnifeGlobal } from './src/main/ets/components/imageknife/ImageKnifeGlobal'
 export { ObjectKey } from './src/main/ets/components/imageknife/ObjectKey'
 export {RequestOption,Size,DetachFromLayout} from './src/main/ets/components/imageknife/RequestOption'
-export { ImageKnifeComponent, ScaleType, ScaleTypeHelper } from './src/main/ets/components/imageknife/ImageKnifeComponent'
+export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from './src/main/ets/components/imageknife/ImageKnifeComponent'
 export { ImageKnifeDrawFactory } from './src/main/ets/components/imageknife/ImageKnifeDrawFactory'
 export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from './src/main/ets/components/imageknife/ImageKnifeOption'
 export { ImageKnifeData } from './src/main/ets/components/imageknife/ImageKnifeData'
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@ -41,6 +41,8 @@ export struct ImageKnifeComponent {
  private gifLoopDuration: number = 0
  private startGifLoopTime: number = 0
  private endGifLoopTime: number = 0
+  // 抗锯齿属性
+  private imageSmoothingQuality: ImageSmoothingQuality = 'low'
  defaultLifeCycle: IDrawLifeCycle = {

    // 展示占位图
@ -115,6 +117,9 @@ export struct ImageKnifeComponent {
        }
      })
      .onReady(() => {
+        let ctx = this.context;
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = this.imageSmoothingQuality;
        this.canvasHasReady = true;
        if (this.onReadyNext) {
          LogUtil.log('ImageKnifeComponent onReadyNext is running!')
@ -793,6 +798,15 @@ export enum FrameDisposalType {
  DISPOSE_PreviousStatus = 3
 }

+export enum AntiAliasing {
+  // 抗锯齿设置为高画质
+  FIT_HIGH = 'high',
+  // 抗锯齿设置为中画质
+  FIT_MEDIUM = 'medium',
+  // 抗锯齿设置为低画质
+  FIT_LOW = 'low'
+}
+
 export enum ScaleType {
  // 图像位于用户设置组件左上角显示,图像会缩放至全部展示
  FIT_START = 1,
--- a/sharedlibrary/src/main/ets/Index.ets
+++ b/sharedlibrary/src/main/ets/Index.ets
@ -99,7 +99,7 @@ export { ImageKnife } from '@ohos/imageknife'
 export { ImageKnifeGlobal } from '@ohos/imageknife'
 export {RequestOption,Size} from '@ohos/imageknife'
 export {ObjectKey} from '@ohos/imageknife'
-export { ImageKnifeComponent, ScaleType, ScaleTypeHelper } from '@ohos/imageknife'
+export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from '@ohos/imageknife'
 export { ImageKnifeDrawFactory } from '@ohos/imageknife'
 export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from '@ohos/imageknife'
 export { ImageKnifeData } from '@ohos/imageknife'