!21152 翻译完成 20408+20832+20894+20768+20809+21084+20767+19492

Merge pull request !21152 from ester.zhou/TR-20832

en/application-dev/reference/apis/js-apis-arkui-UIContext.md

@@ -33,6 +33,45 @@ Obtains a **Font** object.
 ```ts
 uiContext.getFont();
 ```
+### getComponentUtils
+
+getComponentUtils(): ComponentUtils
+
+Obtains the **ComponentUtils** object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type | Description         |
+| ----- | ----------------- |
+| [ComponentUtils](#componentutils) | **ComponentUtils** object.|
+
+**Example**
+
+```ts
+uiContext.getComponentUtils();
+```
+
+### getUIInspector
+
+getUIInspector(): UIInspector
+
+Obtains the **UIInspector** object.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type | Description         |
+| ----- | ----------------- |
+| [UInspector](#uiinspector) | **UIInspector** object.|
+
+**Example**
+
+```ts
+uiContext.getUIInspector();
+```
 
 ### getMediaQuery
 
@@ -181,7 +220,7 @@ Shows an alert dialog box.
 
 | Name   | Type | Description|
 | ---- | --------------- | -------- |
-| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm)&nbsp;\|&nbsp;[AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons)  | Defines and displays the **\<AlertDialog>** component.|
+| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons)  | Defines and displays the **\<AlertDialog>** component.|
 
 **Example**
 
@@ -217,13 +256,13 @@ Defines and shows the action sheet.
 
 | Name       | Type                   | Mandatory | Description                         |
 | ---------- | -------------------------- | ------- | ----------------------------- |
-| title      | [Resource](../arkui-ts/ts-types.md#resource)&nbsp;\|&nbsp;string | Yes    |  Title of the dialog box.|
-| message    | [Resource](../arkui-ts/ts-types.md#resource)&nbsp;\|&nbsp;string | Yes    | Content of the dialog box. |
+| title      | [Resource](../arkui-ts/ts-types.md#resource) \| string | Yes    |  Title of the dialog box.|
+| message    | [Resource](../arkui-ts/ts-types.md#resource) \| string | Yes    | Content of the dialog box. |
 | autoCancel | boolean                           | No    | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
-| confirm    | {<br>value:&nbsp;[ResourceStr](../arkui-ts/ts-types.md#resourcestr),<br>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
-| cancel     | ()&nbsp;=&gt;&nbsp;void           | No    | Callback invoked when the dialog box is closed after the overlay is clicked.  |
+| confirm    | {<br>value: [ResourceStr](../arkui-ts/ts-types.md#resourcestr),<br>action: () =&gt; void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
+| cancel     | () =&gt; void           | No    | Callback invoked when the dialog box is closed after the overlay is clicked.  |
 | alignment  | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment) | No    |  Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
-| offset     | {<br>dx:&nbsp;[Length](../arkui-ts/ts-types.md#length),<br>dy:&nbsp;[Length](../arkui-ts/ts-types.md#length)<br>} | No     | Offset of the dialog box relative to the alignment position.{<br>dx:&nbsp;0,<br>dy:&nbsp;0<br>} |
+| offset     | {<br>dx: [Length](../arkui-ts/ts-types.md#length),<br>dy: [Length](../arkui-ts/ts-types.md#length)<br>} | No     | Offset of the dialog box relative to the alignment position.{<br>dx: 0,<br>dy: 0<br>} |
 | sheets     | Array&lt;SheetInfo&gt; | Yes      | Options in the dialog box. Each option supports the image, text, and callback.|
 
 **SheetInfo parameters**
@@ -369,7 +408,7 @@ Shows a text picker in the given settings.
 
 | Name| Type| Mandatory|  Description|
 | -------- | -------- | -------- |  -------- |
-| range | string[]&nbsp;\|&nbsp;[Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes|  Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
+| range | string[] \| [Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes|  Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed.|
 | selected | number | No|  Index of the selected item.<br>Default value: **0**|
 | value       | string           | No   | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
 | defaultPickerItemHeight | number \| string | No| Height of the picker item.|
@@ -489,6 +528,69 @@ font.registerFont({
   familySrc: '/font/medium.ttf'
 });
 ```
+## ComponentUtils
+
+In the following API examples, you must first use [getComponentUtils()](#getcomponentutils) in **UIContext** to obtain a **ComponentUtils** instance, and then call the APIs using the obtained instance.
+
+### getRectangleById
+
+getRectangleById(key: string): ComponentInfo
+
+Obtains the size, position, translation, scaling, rotation, and affine matrix information of the specified component.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type  | Mandatory| Description            |
+| ------ | ------ | ---- | ---------------- |
+| key    | string | Yes  | Unique component ID.|
+
+**Return value**
+
+| Type                                                    | Description                                            |
+| -------------------------------------------------------- | ------------------------------------------------ |
+| [ComponentInfo](js-apis-componentUtils.md#componentinfo) | Size, position, translation, scaling, rotation, and affine matrix information of the component.|
+
+**Example**
+
+```ts
+let componentUtils = uiContext.getComponentUtils();
+let modePosition = componentUtils.getRectangleById("onClick");
+let localOffsetWidth = modePosition.size.width;
+let localOffsetHeight = modePosition.size.height;
+```
+
+## UIInspector
+
+In the following API examples, you must first use [getUIInspector()](#getuiinspector) in **UIContext** to obtain a **UIInspector** instance, and then call the APIs using the obtained instance.
+
+### createComponentObserver
+
+createComponentObserver(id: string): ComponentObserver
+
+Creates an observer for the specified component.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name    | Type                         | Mandatory  | Description         |
+| ------- | --------------------------- | ---- | ----------- |
+| id | string | Yes   | Component ID.|
+
+**Return value**
+
+| Type                                   | Description                                              |
+| --------------------------------------- | -------------------------------------------------- |
+| [ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | Component observer, which is used to register and unregister listeners for completion of component layout or drawing.|
+
+**Example**
+
+```ts
+let inspector = uiContext.getUIInspector();
+let listener = inspector.createComponentObserver('COMPONENT_ID');
+```
 
 ## MediaQuery
 

en/application-dev/reference/apis/js-apis-arkui-inspector.md

+# @ohos.arkui.inspector (Layout Callback)
+
+The **Inspector** module provides APIs for registering the component layout and drawing completion callbacks.
+
+> **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+>
+> Since API version 10, you can use the [getUIInspector](./js-apis-arkui-UIContext.md#getuiinspector) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [UIInspector](./js-apis-arkui-UIContext.md#uiinspector) object associated with the current UI context.
+
+## Modules to Import
+
+```js
+import inspector from '@ohos.arkui.inspector'
+```
+
+## inspector.createComponentObserver
+
+createComponentObserver(id: string): ComponentObserver
+
+Creates an observer for the specified component.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type  | Mandatory| Description      |
+| ------ | ------ | ---- | ---------- |
+| id     | string | Yes  | Component ID.|
+
+**Return value**
+
+| Type             | Description                                            |
+| ----------------- | ------------------------------------------------ |
+|[ComponentObserver](#componentobserver)| Component observer, which is used to register and unregister listeners.|
+
+**Example**
+
+```js
+let listener = inspector.createComponentObserver('COMPONENT_ID'); // Creates an observer for a component whose ID is COMPONENT_ID.
+```
+
+## ComponentObserver
+
+Implements a component observer for completion of component layout and drawing, including the first query result when the observer is requested.
+
+### on
+
+on(type: 'layout', callback: () => void): void
+
+Registers a listener for completion of component layout or drawing.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name  | Type  | Mandatory| Description|
+| -------- | ------ | ---- | -------------------------------------|
+| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
+| callback | void   | Yes  | Callback invoked upon completion of component layout or drawing.|
+
+### off
+
+off(type: 'layout', callback?: () => void): void
+
+Unregisters the listener for completion of component layout or drawing.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name  | Type  | Mandatory| Description|
+| -------- | ------ | ---- | -------------------------------------------- |
+| type     | string | Yes  | Type of the listener. The value must be **'layout'** or **'draw'**.<br>**'layout'**: completion of component layout.<br>**'draw'**: completion of component drawing.|
+| callback | void   | No  | Callback to unregister. If this parameter is not specified, all callbacks of the specified type are unregistered.|
+
+**Example**
+
+  ```ts
+  import inspector from '@ohos.arkui.inspector'
+
+  @Entry
+  @Component
+  struct ImageExample {
+    build() {
+      Column() {
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
+          Row({ space: 5 }) {
+            Image($r('app.media.app_icon'))
+              .width(110)
+              .height(110)
+              .border({ width: 1 })
+              .id('IMAGE_ID')
+          }
+        }
+      }.height(320).width(360).padding({ right: 10, top: 10 })
+    }
+
+    listener = inspector.createComponentObserver('IMAGE_ID')
+
+    aboutToAppear() {
+      let FuncLayout = this.onLayoutComplete.bind(this) // bind current js instance
+      let FuncDraw = this.onDrawComplete.bind(this) // bind current js instance
+
+      this.listener.on('layout', FuncLayout)
+      this.listener.on('draw', FuncDraw)
+    }
+
+    onLayoutComplete() {
+      // do something here
+    }
+
+    onDrawComplete() {
+      // do something here
+    }
+  }
+  ```

en/application-dev/reference/apis/js-apis-componentUtils.md

+# @ohos.componentUtils (componentUtils)
+
+The **componentUtils** module provides API for obtaining the coordinates and size of the drawing area of a component.
+
+> **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+>
+> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
+>
+> Since API version 10, you can use the [getComponentUtils](./js-apis-arkui-UIContext.md#getcomponentutils) API in **UIContext** to obtain the **ComponentUtils** object associated with the current UI context. For this API to work correctly, call it after the notification indicating completion of component layout is received through [@ohos.arkui.inspector (layout callback)](js-apis-arkui-inspector.md).
+
+## Modules to Import
+
+```js
+import componentUtils from '@ohos.componentUtils'
+```
+## componentUtils.getRectangleById
+
+getRectangleById(id: string): ComponentInfo
+
+Obtains a **ComponentInfo** object based on the component ID.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name| Type  | Mandatory| Description      |
+| ------ | ------ | ---- | ---------- |
+| id     | string | Yes  | Component ID.|
+
+**Return value**
+
+| Type  | Description      |
+| ------ | ---------- |
+| [ComponentInfo](#componentinfo) | **ComponentInfo** object, which provides the size, position, translation, scaling, rotation, and affine matrix information of the component.|
+
+**Example**
+
+```js
+let modePosition = componentUtils.getRectangleById("onClick");
+```
+
+## ComponentInfo
+
+| Name          | Type            | Description                        |
+| ---------------|------------     | -----------------------------|
+| size           | [Size](#size) | Component size.                   |
+| localOffset    | [Offset](#offset) | Offset of the component relative to the parent component.        |
+| windowOffset   | [Offset](#offset) | Offset of the component relative to the window.          |
+| screenOffset   | [Offset](#offset) | Offset of the component relative to the screen.          |
+| translate      | [TranslateResult](#translateresult) | Translation of the component.               |
+| scale          | [ScaleResult](#scaleresult) | Scaling of the component.               |
+| rotate         | [RotateResult](#rotateresult) | Rotation of the component.               |
+| transform      | [Matrix4Result](#matrix4result) | Affine matrix of the component, which is a 4x4 matrix object created based on the input parameter. |
+
+### Size 
+
+| Name    | Type| Description                              |
+| -------- | ---- | ----------------------------------|
+| width    | number | Component width.                        |
+| height   | number | Component height.                        |
+
+### Offset
+
+| Name    | Type| Description                              |
+| --------| ---- | -----------------------------------|
+| x       | number | X coordinate.                          |
+| y       | number | Y coordinate.                          |
+
+### TranslateResult
+
+| Name    | Type| Description                              |
+| --------| ---- | -----------------------------------|
+| x       | number | Translation distance along the x-axis.                      |
+| y       | number | Translation distance along the y-axis.                      |
+| z       | number | Translation distance along the z-axis.                      |
+
+### ScaleResult
+
+| Name    | Type| Description                              |
+| --------| ---- | -----------------------------------|
+| x       | number | Scale factor along the x-axis.                      |
+| y       | number | Scale factor along the y-axis.                      |
+| z       | number | Scale factor along the z-axis.                      |
+| centerX | number | X coordinate of the center point.                 |
+| centerY | number | Y coordinate of the center point.               |
+
+### RotateResult
+
+| Name    | Type| Description                              |
+| --------| ---- | -----------------------------------|
+| x       | number | X coordinate of the rotation vector.                  |
+| y       | number | Y coordinate of the rotation vector.                  |
+| z       | number | Z coordinate of the rotation vector.                  |
+| angle   | number | Rotation angle.                         |
+| centerX | number | X coordinate of the center point.                |
+| centerY | number | Y coordinate of the center point.                |
+
+### Matrix4Result
+
+| Name    | Type| Description                              |
+| --------| ---- | -----------------------------------|
+| number  | number | Scale factor along the x-axis. Defaults to **1** for the identity matrix.        |
+| number  | number | The second value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | The third value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | Meaningless value.                       |
+| number  | number | The fifth value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | Scale factor along the y-axis. Defaults to **1** for the identity matrix.         |
+| number  | number | The seventh value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | Meaningless value.                       |
+| number  | number | The ninth value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | The tenth value, which is affected by the rotation of the x, y, and z axes.|
+| number  | number | Scale factor along the z-axis. Defaults to **1** for the identity matrix.        |
+| number  | number | Meaningless value.                      |
+| number  | number | Translation distance along the x-axis. Defaults to **0** for the identity matrix. |
+| number  | number | Translation distance along the y-axis. Defaults to **0** for the identity matrix.|
+| number  | number | Translation distance along the z-axis. Defaults to **0** for the identity matrix.|
+| number  | number | Valid in homogeneous coordinates, presenting the perspective projection effect.  |
+
+**Example**
+
+  ```js
+import matrix4 from '@ohos.matrix4';
+import componentUtils from '@ohos.componentUtils';
+
+@Entry
+@Component
+struct Utils{
+  private getComponentRect(key) {
+    console.info("Mode Key: " + key);
+    let modePosition = componentUtils.getRectangleById(key);
+
+    let localOffsetWidth = modePosition.size.width;
+    let localOffsetHeight = modePosition.size.height;
+    let localOffsetX = modePosition.localOffset.x;
+    let localOffsetY = modePosition.localOffset.y;
+
+    let windowOffsetX = modePosition.windowOffset.x;
+    let windowOffsetY = modePosition.windowOffset.y;
+
+    let screenOffsetX = modePosition.screenOffset.x;
+    let screenOffsetY = modePosition.screenOffset.y;
+
+    let translateX = modePosition.translate.x;
+    let translateY = modePosition.translate.y;
+    let translateZ = modePosition.translate.z;
+
+    let scaleX = modePosition.scale.x;
+    let scaleY = modePosition.scale.y;
+    let scaleZ = modePosition.scale.z;
+    let scaleCenterX = modePosition.scale.centerX;
+    let scaleCenterY = modePosition.scale.centerY;
+
+    let rotateX = modePosition.rotate.x;
+    let rotateY = modePosition.rotate.y;
+    let rotateZ = modePosition.rotate.z;
+    let rotateCenterX = modePosition.rotate.centerX;
+    let rotateCenterY = modePosition.rotate.centerY;
+    let rotateAngle = modePosition.rotate.angle;
+
+    let Matrix4_1 = modePosition.transform[0];
+    let Matrix4_2 = modePosition.transform[1];
+    let Matrix4_3 = modePosition.transform[2];
+    let Matrix4_4 = modePosition.transform[3];
+    let Matrix4_5 = modePosition.transform[4];
+    let Matrix4_6 = modePosition.transform[5];
+    let Matrix4_7 = modePosition.transform[6];
+    let Matrix4_8 = modePosition.transform[7];
+    let Matrix4_9 = modePosition.transform[8];
+    let Matrix4_10 = modePosition.transform[9];
+    let Matrix4_11 = modePosition.transform[10];
+    let Matrix4_12 = modePosition.transform[11];
+    let Matrix4_13 = modePosition.transform[12];
+    let Matrix4_14 = modePosition.transform[13];
+    let Matrix4_15 = modePosition.transform[14];
+    let Matrix4_16 = modePosition.transform[15];
+    console.info("[getRectangleById] current component obj is: " + modePosition );
+  }
+  @State x: number = 120;
+  @State y: number = 10;
+  @State z: number = 100;
+  private matrix1 = matrix4.identity().translate({ x: this.x, y: this.y, z: this.z });
+  build() {
+    Column() {
+        Image($r("app.media.icon"))
+          .transform(this.matrix1)
+          .translate({ x: 100, y: 10, z: 50})
+          .scale({ x: 2, y: 0.5, z: 1 })
+          .rotate({
+            x: 1,
+            y: 1,
+            z: 1,
+            centerX: '50%',
+            centerY: '50%',
+            angle: 300
+          })
+          .width("40%")
+          .height(100)
+          .key("image_01")
+      Button() {
+        Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
+      }.margin({ top: 20 })
+      .onClick(() => {
+        this.getComponentRect("image_01");
+      }).id('onClick');
+    }
+  }
+}
+  ```

en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

@@ -12,7 +12,7 @@ Image effects include blur, shadow, spherical effect, and much more.
 
 | Name                            | Type                                                    | Default Value| Description                                                        |
 | -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
-| blur                             | number                                                       | -      | Content blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
+| blur                             | number                                                       | -      | Foreground blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
 | backdropBlur                     | number                                                       | -      | Background blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
 | shadow                           | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10)<sup>10+</sup> | -      | Shadow of the component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
 | grayscale                        | number                                                       | 0.0    | Grayscale conversion ratio of the component. If the value is **1.0**, the component is completely converted to grayscale. If the value is **0.0**, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
@@ -22,10 +22,11 @@ Image effects include blur, shadow, spherical effect, and much more.
 | invert                           | number                                                       | 0      | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | sepia                            | number                                                       | 0      | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | hueRotate                        | number \| string                                   | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| colorBlend<sup>8+</sup>    | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | -      | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| sphericalEffect<sup>10+</sup>    | [number]                                                     | -      | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.<br>This is a system API.|
-| lightUpEffect<sup>10+</sup>      | [number]                                                     | -      | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>This is a system API.|
-| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | -      | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.<br>This is a system API.|
+| colorBlend <sup>8+</sup>    | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | -      | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| sphericalEffect<sup>10+</sup>    | number                                                    | -      | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.<br>This is a system API.|
+| lightUpEffect<sup>10+</sup>      | number                                                    | -      | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>This is a system API.|
+| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | -      | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br> <br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.<br>This is a system API.|
+| linearGradientBlur<sup>10+</sup> | <br>value: number,<br>{<br>fractionStops:Array<FractionStop>,<br>direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)<br>} <br>                                   | -      | Linear gradient blur for the component.<br>- **value**: blur radius. A greater value indicates a higher blur degree. If the value is 0, the content is not blurred. Value range: [0, 60]<br>Linear gradient blur consists of two parts: **fractionStops** and **direction**.<br>- **fractionStops**: gradient blur stops. The value is a set of binary arrays, each of which indicates [blur degree, blur position] and consists of numbers ranging from 0 to 1 (those less than 0 evaluate to **0**, and those greater than 1 evaluate to **1**). The blur positions in the arrays must be in ascending order. Noncompliance will be logged. For the blur settings to take effect, the number of binary arrays must be greater than or equal to 2.<br> - **direction**: gradient blur direction. The default value is **[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom**.<br>Since API version 10, this API is supported in ArkTS widgets.|
 
 ## ShadowOptions
 
@@ -54,7 +55,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 ## Example
 
 ### Example 1
-Use **blur** to add the content blur effect and **backdropBlur** to add the background blur effect.
+Use **blur** to apply a foreground blur effect and **backdropBlur** to apply a background blur effect.
 ```ts
 // xxx.ets
 @Entry
@@ -153,7 +154,7 @@ struct ImageEffectsExample {
 
 ### Example 3
 
-You can apply a spherical effect to a component to make it appear spherized.
+Apply a spherical effect to a component to make it appear spherized.
 
 ```ts
 // xxx.ets
@@ -191,7 +192,7 @@ Below is how the component looks without the spherical effect applied:
 
 ### Example 4
 
-You can apply a light up effect to a component.
+Apply a light up effect to a component.
 
 ```ts
 // xxx.ets
@@ -261,7 +262,7 @@ Below is how the component looks without the light up effect applied:
 
 ### Example 6
 
-You can apply a pixel stretch effect to a component.
+Apply a pixel stretch effect to a component.
 
 ```ts
 // xxx.ets
@@ -320,6 +321,34 @@ Below is how the component looks:
 
 Compared with the original image, the effect drawing is implemented in two steps:
 
-1. The image size is reduced. The resultant size is the original image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
+1. The image size is reduced. The resultant size is the original image size minus
+the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
 **right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
-2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
+2. Edge pixels are stretched to restore the image to its original size.
+
+### Example 8
+
+Apply a linear gradient blur effect to a component.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ImageExample1 {
+  private_resource1:Resource = $r('app.media.1')
+  @State image_src: Resource = this.private_resource1
+  build() {
+    Column() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
+        Row({ space: 5 }) {
+          Image(this.image_src)
+            .linearGradientBlur(60, { fractionStops: [[0,0],[0,0.33],[1,0.66],[1,1]], direction: GradientDirection.Bottom })
+        }
+      }
+    }
+  }
+}
+
+```
+
+![testlinearGradientBlur](figures/testlinearGradientBlur.png)