!20712 [canvas]补充ImageSmoothingQuality和CanvasDirection枚举说明

Merge pull request !20712 from 冯峰/dev_canvas_iqcd

!20712 [canvas]补充ImageSmoothingQuality和CanvasDirection枚举说明
Merge pull request !20712 from 冯峰/dev_canvas_iqcd
ee8ac74d · openharmony_ci · Gitee · ad36c2b8 · a1890fd8 · ee8ac74d
2 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
@@ -565,3 +565,23 @@
 | ------- | ------------------------------------------------------------ |
 | DEFAULT | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
 | INLINE  | 内联输入风格。文本选中底板高度与输入框高度相同。             |
+
+## ImageSmoothingQuality<sup>8+</sup>
+
+从API version 9开始，该接口支持在ArkTS卡片中使用。
+
+| 名称        | 描述             |
+| -------- | -------------- |
+| low      | 低画质 |
+| medium   | 中画质 |
+| high     | 高画质 |
+
+## CanvasDirection<sup>8+</sup>
+
+从API version 9开始，该接口支持在ArkTS卡片中使用。
+
+| 名称        | 描述             |
+| -------- | -------------- |
+| inherit | 继承canvas组件已设定的文本方向 |
+| ltr     | 从左往右 |
+| rtl     | 从右往左 |
\ No newline at end of file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -59,8 +59,8 @@ RenderingContextSettings(antialias?: boolean)
 | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | [height](#height)                        | number                                   | 组件高度。 <br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | [width](#width)                          | number                                   | 组件宽度。 <br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality                    | imageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：<br/>- 'low'：低画质<br/>- 'medium'：中画质<br/>- 'high'：高画质。<br/>默认值：low<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
-| [direction](#direction)                  | CanvasDirection                          | 用于设置绘制文字时使用的文字方向。可选值为：<br/>- 'inherit'：继承canvas组件已设定的文本方向<br/>- 'ltr'：从左往右<br/>- 'rtl'：从右往左。<br/>默认值：inherit<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| [imageSmoothingQuality](#imagesmoothingquality)       |[ImageSmoothingQuality](ts-appendix-enums.md#imagesmoothingquality8)     | imageSmoothingEnabled为true时，用于设置图像平滑度。<br/>默认值：ImageSmoothingQuality.low<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| [direction](#direction)       | [CanvasDirection](ts-appendix-enums.md#canvasdirection8)    | 用于设置绘制文字时使用的文字方向。<br/>默认值：CanvasDirection.inherit<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | [filter](#filter)                        | string                                   | 用于设置图像的滤镜。支持的滤镜效果如下：<br/>- 'none': 无滤镜效果<br/>- 'blur'：给图像设置高斯模糊<br/>- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- 'contrast'：调整图像的对比度<br/>- 'grayscale'：将图像转换为灰度图像<br/>- 'hue-rotate'：给图像应用色相旋转<br/>- 'invert'：反转输入图像<br/>- 'opacity'：转化图像的透明程度<br/>- 'saturate'：转换图像饱和度<br/>- 'sepia'：将图像转换为深褐色<br/>默认值：'none'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |

 > **说明：**
@@ -719,6 +719,136 @@ struct WidthExample {
 ![zh-cn_image_canvas_width](figures/zh-cn_image_canvas_width.png)


+### imageSmoothingQuality
+
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct ImageSmoothingQualityDemo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            ctx.imageSmoothingEnabled = true
+            ctx.imageSmoothingQuality = 'high'
+            ctx.drawImage(this.img, 0, 0, 400, 200)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg)
+
+
+### direction
+
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct DirectionDemo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            ctx.font = '48px serif';
+            ctx.textAlign = 'start'
+            ctx.fillText("Hi ltr!", 200, 50);
+
+            ctx.direction = "rtl";
+            ctx.fillText("Hi rtl!", 200, 100);
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![directionDemo](figures/directionDemo.jpeg)
+
+
+### filter
+
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct FilterDemo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            let img = this.img
+
+            ctx.drawImage(img, 0, 0, 100, 100);
+
+            ctx.filter = 'grayscale(50%)';
+            ctx.drawImage(img, 100, 0, 100, 100);
+
+            ctx.filter = 'sepia(60%)';
+            ctx.drawImage(img, 200, 0, 100, 100);
+
+            ctx.filter = 'saturate(30%)';
+            ctx.drawImage(img, 0, 100, 100, 100);
+
+            ctx.filter = 'hue-rotate(90degree)';
+            ctx.drawImage(img, 100, 100, 100, 100);
+
+            ctx.filter = 'invert(100%)';
+            ctx.drawImage(img, 200, 100, 100, 100);
+
+            ctx.filter = 'opacity(25%)';
+            ctx.drawImage(img, 0, 200, 100, 100);
+
+            ctx.filter = 'brightness(0.4)';
+            ctx.drawImage(img, 100, 200, 100, 100);
+
+            ctx.filter = 'contrast(200%)';
+            ctx.drawImage(img, 200, 200, 100, 100);
+
+            ctx.filter = 'blur(5px)';
+            ctx.drawImage(img, 0, 300, 100, 100);
+
+            let result = ctx.toDataURL()
+            console.info(result)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![filterDemo](figures/filterDemo.jpeg)
+
 ## 方法


@@ -1802,82 +1932,6 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
  ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)


-### filter
-
-filter(filter: string): void
-
-为Canvas图形设置各类滤镜效果。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
-**参数:**
-
-| 参数     | 类型     | 必填   | 默认值  | 说明                                       |
-| ------ | ------ | ---- | ---- | ---------------------------------------- |
-| filter | string | 是    | -    | 接受各类滤镜效果的函数。支持的滤镜效果如下：<br/>- 'none': 无滤镜效果<br/>- 'blur'：给图像设置高斯模糊<br/>- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗<br/>- 'contrast'：调整图像的对比度<br/>- 'grayscale'：将图像转换为灰度图像<br/>- 'hue-rotate'：给图像应用色相旋转<br/>- 'invert'：反转输入图像<br/>- 'opacity'：转化图像的透明程度<br/>- 'saturate'：转换图像饱和度<br/>- 'sepia'：将图像转换为深褐色<br/>默认值：'none' |
-
-**示例：**
-```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct FilterDemo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            let ctx = this.context
-            let img = this.img
-
-            ctx.drawImage(img, 0, 0, 100, 100);
-
-            ctx.filter = 'grayscale(50%)';
-            ctx.drawImage(img, 100, 0, 100, 100);
-
-            ctx.filter = 'sepia(60%)';
-            ctx.drawImage(img, 200, 0, 100, 100);
-
-            ctx.filter = 'saturate(30%)';
-            ctx.drawImage(img, 0, 100, 100, 100);
-
-            ctx.filter = 'hue-rotate(90degree)';
-            ctx.drawImage(img, 100, 100, 100, 100);
-
-            ctx.filter = 'invert(100%)';
-            ctx.drawImage(img, 200, 100, 100, 100);
-
-            ctx.filter = 'opacity(25%)';
-            ctx.drawImage(img, 0, 200, 100, 100);
-
-            ctx.filter = 'brightness(0.4)';
-            ctx.drawImage(img, 100, 200, 100, 100);
-
-            ctx.filter = 'contrast(200%)';
-            ctx.drawImage(img, 200, 200, 100, 100);
-
-            ctx.filter = 'blur(5px)';
-            ctx.drawImage(img, 0, 300, 100, 100);
-
-            let result = ctx.toDataURL()
-            console.info(result)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }
-  }
-```
-
-![filterDemo](figures/filterDemo.jpeg)
-
-
 ### getTransform

 getTransform(): Matrix2D
@@ -1902,47 +1956,6 @@ resetTransform(): void
 从API version 9开始，该接口支持在ArkTS卡片中使用。


-### direction
-
-direction(direction: CanvasDirection): void
-
-绘制文本时，描述当前文本方向的属性。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
-**示例：**
-```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct DirectionDemo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            let ctx = this.context
-            ctx.font = '48px serif';
-            ctx.textAlign = 'start'
-            ctx.fillText("Hi ltr!", 200, 50);
-
-            ctx.direction = "rtl";
-            ctx.fillText("Hi rtl!", 200, 100);
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }
-  }
-```
-
-![directionDemo](figures/directionDemo.jpeg)
-
 ### rotate

 rotate(angle: number): void
@@ -2536,52 +2549,6 @@ getLineDash(): number[]
 ![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) 


-
-### imageSmoothingQuality
-
-imageSmoothingQuality(quality: imageSmoothingQuality)
-
-用于设置图像平滑度。
-
-从API version 9开始，该接口支持在ArkTS卡片中使用。
-
- **参数：** 
-
-| 参数      | 类型                    | 描述                                       |
-| ------- | --------------------- | ---------------------------------------- |
-| quality | imageSmoothingQuality | 支持如下三种类型：<br/>- 'low'：低画质<br/>- 'medium'：中画质<br/>- 'high'：高画质 |
-
-**示例：**
-```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct ImageSmoothingQualityDemo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            let ctx = this.context
-            ctx.imageSmoothingEnabled = true
-            ctx.imageSmoothingQuality = 'high'
-            ctx.drawImage(this.img, 0, 0, 400, 200)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }
-  }
-```
-
-![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg)
-
 ### transferFromImageBitmap

 transferFromImageBitmap(bitmap: ImageBitmap): void