From 935be30887d29802916c8deee2dc400619d633a3 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Mon, 29 May 2023 14:23:40 +0800 Subject: [PATCH] Update docs (17923) Signed-off-by: ester.zhou --- .../ts-components-canvas-canvasgradient.md | 2 +- .../ts-universal-attributes-gradient-color.md | 4 +- .../js-service-widget-common-gradient.md | 72 +++++++++--------- .../ui/arkts-common-components-xcomponent.md | 31 ++++---- .../figures/{Picture 1.png => picture-1.png} | Bin 5 files changed, 55 insertions(+), 54 deletions(-) rename en/application-dev/ui/figures/{Picture 1.png => picture-1.png} (100%) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md index 35211ab166..8801033ff3 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md @@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | --------- | ---------------------------- | | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| -| color | string | Yes | '#ffffff' | Gradient color to set. | +| color | string | Yes | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). | **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index 001cc34730..8032455b78 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -13,8 +13,8 @@ Create a more gorgeous look for a component by applying a gradient color effect | Name | Type | Description | | -------------- | -------------------------------------------- | ----------------------------------- | | linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| -| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.| -| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| +| sweepGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.| +| radialGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md index fbfe2c4db9..2c338d915e 100644 --- a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md +++ b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md @@ -33,54 +33,52 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified. -- Parameters +**Parameters** - | Name | Type | Default Value | Mandatory | Description | - | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | - | direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).| - | angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.| - | color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. | +| Name | Type | Default Value | Mandatory | Description | +| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | +| direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).| +| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.| +| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. | -- Example +**Example** - 1. Gradient from top to bottom (default) +1. Gradient from top to bottom (default) - ```css - #gradient { - height: 300px; - width: 600px; - /* Gradient starts from red at the top to green at the bottom. */ - background: linear-gradient(red, #00ff00); - } - ``` + ```css + #gradient { + height: 300px; + width: 600px; + /* Gradient starts from red at the top to green at the bottom. */ + background: linear-gradient(red, #00ff00); + } + ``` - ![111](figures/111.PNG) + ![111](figures/111.PNG) - 2. Gradient at an angle of 45° +2. Gradient at an angle of 45° + ```css + /* Gradient at an angle of 45°, changing from red to green */ + background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0)); + ``` - ```css - /* Gradient at an angle of 45°, changing from red to green */ - background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0)); - ``` + ![222](figures/222.PNG) - ![222](figures/222.PNG) +3. Gradient from left to right - 3. Gradient from left to right + ```css + /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ + background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%); + ``` - ```css - /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ - background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%); - ``` + ![333](figures/333.PNG) +4. Repeating gradient - ![333](figures/333.PNG) + ```css + /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */ + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp); + ``` - 4. Repeating gradient - - ```css - /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */ - background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp); - ``` - - ![444](figures/444.PNG) + ![444](figures/444.PNG) diff --git a/en/application-dev/ui/arkts-common-components-xcomponent.md b/en/application-dev/ui/arkts-common-components-xcomponent.md index 76e00753ef..b6bdb5633f 100644 --- a/en/application-dev/ui/arkts-common-components-xcomponent.md +++ b/en/application-dev/ui/arkts-common-components-xcomponent.md @@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void) ### Parsing the NativeXComponent Instance -**NativeXComponent** provides an instance at the native layer for the **\**, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. For details about the NKD APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md). +**NativeXComponent** provides an instance at the native layer for the **\**, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md). The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded. @@ -189,30 +189,33 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' } - **id**: corresponds to an **\** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\**. - **libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side. - >**NOTE** - > - > An application loads modules to implement cross-language invoking in either of the following ways: + + > **NOTE** > + > An application loads modules to implement cross-language invoking in either of the following modes: + > > 1. Use the **import** mode of the NAPI. > - > ```ts - > import nativerender from "libnativerender.so" - > ``` + > ```ts + > import nativerender from "libnativerender.so" + > ``` > - > 2. Use the **\**, which, in essence, is to use the NAPI mechanism. - > The difference between this loading mode and the **import** loading mode is that when the dynamic library is loaded, the **NativeXComponent** instance of the **\** is exposed to the native layer of the application so that you can use the NDK APIs of the **\**. + > 2. Use the **\**. + > + > While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\**, by having the **NativeXComponent** instance of the **\** exposed to the native layer of the application when the dynamic library is loaded. -- onLoad event +- **onLoad** event - Trigger time: when the surface of the **\** is prepared. - **context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**. - Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side. - ![onLoad](figures /onLoad.png) + ![onLoad](figures/onLoad.png) + +- **onDestroy** event -- onDestroy event Trigger time: when the **\** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side. - ![onDestroy](figures /onDestroy.png) + ![onDestroy](figures/onDestroy.png) ### Writing Media Data @@ -221,7 +224,7 @@ The surface held by the **\** complies with the producer-consumer mo In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\** and display the data through the **\**. -![Picture 1](figures /Picture 1.png) +![picture-1](figures/picture-1.png) You can bind the **\** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API. diff --git a/en/application-dev/ui/figures/Picture 1.png b/en/application-dev/ui/figures/picture-1.png similarity index 100% rename from en/application-dev/ui/figures/Picture 1.png rename to en/application-dev/ui/figures/picture-1.png -- GitLab