diff --git a/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md b/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md index 95b6665c834a4bdf281b4712717e71f51659c112..30ca2da92bbe84a9f5dd5a7882afac9927c9913e 100644 --- a/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md +++ b/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md @@ -34,8 +34,8 @@ interface DataChangeListener { | Name | Type | Mandatory | Description | | ------------- | --------------------------------------- | ---- | ---------------------------------------- | | dataSource | IDataSource | Yes | **LazyForEach** data source. You need to implement related APIs. | -| itemGenerator | (item: any) => void | Yes | Child component generation function, which generates a child component for each data item in the array.
**NOTE**
The function body of **itemGenerator** must be included in braces {...}. **itemGenerator** can and must generate only one child component for each iteration. The **if** statement is allowed in **itemGenerator**, but you must ensure that each branch of the **if** statement creates a child component of the same type. **ForEach** and **LazyForEach** statements are not allowed in **itemGenerator**.| -| keyGenerator | (item: any) => string | No | ID generation function, which generates a unique and fixed ID for each data item in the data source. This ID must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the ID of the new item must be different from that of the replaced item. This ID generation function is optional. However, for performance reasons, it is strongly recommended that the ID generation function be provided, so that the framework can better identify array changes. For example, if no ID generation function is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.
**NOTE**
The ID generated for each data item in the data source must be unique.| +| itemGenerator | (item: any) => void | Yes | Child component generation function, which generates a child component for each data item in the array.
**NOTE**
The function body of **itemGenerator** must be included in braces {...}. **itemGenerator** can and must generate only one child component for each iteration. The **if** statement is allowed in **itemGenerator**, but you must ensure that each branch of the **if** statement creates a child component of the same type. **ForEach** and **LazyForEach** statements are not allowed in **itemGenerator**.| +| keyGenerator | (item: any) => string | No | ID generation function, which generates a unique and fixed ID for each data item in the data source. This ID must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the ID of the new item must be different from that of the replaced item. This ID generation function is optional. However, for performance reasons, it is strongly recommended that the ID generation function be provided, so that the framework can better identify array changes. For example, if no ID generation function is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.
**NOTE**
The ID generated for each data item in the data source must be unique.| ## Description of IDataSource @@ -52,10 +52,10 @@ interface IDataSource { | Declaration | Parameter Type | Description | | ---------------------------------------- | ------------------ | ------------------------------------- | -| totalCount(): number | - | Obtains the total number of data records. | -| getData(index: number): any | number | Obtains the data record corresponding to the specified index.
**index**: index of the data record to obtain.| -| registerDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Registers a listener for data changes.
**listener**: listener for data changes. | -| unregisterDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Deregisters the listener for data changes.
**listener**: listener for data changes. | +| totalCount(): number | - | Obtains the total number of data records. | +| getData(index: number): any | number | Obtains the data record corresponding to the specified index.
**index**: index of the data record to obtain.| +| registerDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Registers a listener for data changes.
**listener**: listener for data changes. | +| unregisterDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Deregisters the listener for data changes.
**listener**: listener for data changes. | ## Description of DataChangeListener @@ -77,20 +77,20 @@ interface DataChangeListener { | Declaration | Parameter Type | Description | | ------------------------------------------------------------ | -------------------------------------- | ------------------------------------------------------------ | -| onDataReloaded(): void | - | Invoked when all data is reloaded. | -| onDataAdded(index: number):void(deprecated) | number | Invoked when data is added to the position indicated by the specified index.
This API is deprecated since API version 8. You are advised to use **onDataAdd** instead.
**index**: index of the position where data is added.| -| onDataMoved(from: number, to: number): void(deprecated) | from: number,
to: number | Invoked when data is moved.
This API is deprecated since API version 8. You are advised to use **onDataMove** instead.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.| -| onDataDeleted(index: number):void(deprecated) | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.
This API is deprecated since API version 8. You are advised to use **onDataDelete** instead.
**index**: index of the position where data is deleted.| -| onDataChanged(index: number): void(deprecated) | number | Invoked when data in the position indicated by the specified index is changed.
This API is deprecated since API version 8. You are advised to use **onDataChange** instead.
**index**: listener for data changes.| -| onDataAdd(index: number): void8+ | number | Invoked when data is added to the position indicated by the specified index.
**index**: index of the position where data is added.| -| onDataMove(from: number, to: number): void8+ | from: number,
to: number | Invoked when data is moved.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.| +| onDataReloaded(): void | - | Invoked when all data is reloaded. | +| onDataAdd(index: number): void8+ | number | Invoked when data is added to the position indicated by the specified index.
**index**: index of the position where data is added.| +| onDataMove(from: number, to: number): void8+ | from: number,
to: number | Invoked when data is moved.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.| | onDataDelete(index: number):void8+ | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.
**index**: index of the position where data is deleted.
**NOTE**
Before **onDataDelete** is called, ensure that the corresponding data in **dataSource** has been deleted. Otherwise, undefined behavior will occur during page rendering.| -| onDataChange(index: number): void8+ | number | Invoked when data in the position indicated by the specified index is changed.
**index**: index of the position where data is changed.| +| onDataChange(index: number): void8+ | number | Invoked when data in the position indicated by the specified index is changed.
**index**: index of the position where data is changed.| +| onDataAdded(index: number):void(deprecated) | number | Invoked when data is added to the position indicated by the specified index.
This API is deprecated since API version 8. You are advised to use **onDataAdd** instead.
**index**: index of the position where data is added.| +| onDataMoved(from: number, to: number): void(deprecated) | from: number,
to: number | Invoked when data is moved.
This API is deprecated since API version 8. You are advised to use **onDataMove** instead.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.| +| onDataDeleted(index: number):void(deprecated) | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.
This API is deprecated since API version 8. You are advised to use **onDataDelete** instead.
**index**: index of the position where data is deleted.| +| onDataChanged(index: number): void(deprecated) | number | Invoked when data in the position indicated by the specified index is changed.
This API is deprecated since API version 8. You are advised to use **onDataChange** instead.
**index**: listener for data changes.| ## Restrictions -- **LazyForEach** must be used in the container component. Only the **\**, **\**, and **\** components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at the same time. +- LazyForEach must be used in the container component. Only the [\](../reference/arkui-ts/ts-container-list.md), [\](../reference/arkui-ts/ts-container-grid.md), and [\](../reference/arkui-ts/ts-container-swiper.md) components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at the same time. - **LazyForEach** must create one and only one child component in each iteration. @@ -177,7 +177,7 @@ class BasicDataSource implements IDataSource { } class MyDataSource extends BasicDataSource { - private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3']; + private dataArray: string[] = []; public totalCount(): number { return this.dataArray.length; @@ -201,6 +201,12 @@ class MyDataSource extends BasicDataSource { @Entry @Component struct MyComponent { + aboutToAppear() { + for (var i = 100; i >= 80; i--) { + this.data.pushData(`Hello ${i}`) + } + } + private data: MyDataSource = new MyDataSource(); build() { @@ -208,15 +214,17 @@ struct MyComponent { LazyForEach(this.data, (item: string) => { ListItem() { Row() { - Image(item).width('30%').height(50) - Text(item).fontSize(20).margin({ left: 10 }) + Text(item).fontSize(50) + .onAppear(() => { + console.info("appear:" + item) + }) }.margin({ left: 10, right: 10 }) } .onClick(() => { - this.data.pushData('/path/image' + this.data.totalCount()); + this.data.pushData(`Hello ${this.data.totalCount()}`); }) }, item => item) - } + }.cachedCount(5) } } ``` diff --git a/en/application-dev/reference/apis/js-apis-animator.md b/en/application-dev/reference/apis/js-apis-animator.md index 1818bfc13dd6859894cf122f96b2171d0ce70e47..829355f9eecdfd2ccc9a889a478a9c8c575ee52a 100644 --- a/en/application-dev/reference/apis/js-apis-animator.md +++ b/en/application-dev/reference/apis/js-apis-animator.md @@ -257,7 +257,7 @@ Defines animator options. | Name | Type | Mandatory| Description | | ---------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | | duration | number | Yes | Duration for playing the animation, in milliseconds. | -| easing | string | Yes | Animation interpolation curve. Only the following values are supported:
**"linear"**: The animation speed keeps unchanged.
**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.
**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.
**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.
**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.
**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).
**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).
**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).
**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).
**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).
**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).
**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).
**cubic-bezier(x1, y1, x2, y2)**: The animation uses the defined cubic-bezier curve, where the value of the input parameters must range from 0 to 1.
**steps(number, step-position)**: The animation uses a step curve. The **number** must be set and only an integer is supported. **step-position** is optional. It can be set to **start** or **end**. The default value is **end**.| +| easing | string | Yes | Animation interpolation curve. Only the following values are supported:
**"linear"**: The animation speed keeps unchanged.
**"ease"**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.
**"ease-in"**: The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.
**"ease-out"**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.
**"ease-in-out"**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.
**"fast-out-slow-in"**: The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).
**"linear-out-slow-in"**: The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).
**"friction"**: The animation uses the damping cubic-bezier curve (0.2, 0.0, 0.2, 1.0).
**"extreme-deceleration"**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).
**"rhythm"**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).
**"sharp"**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).
**"smooth"**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).
**"cubic-bezier(x1,y1,x2,y2)"**: The animation uses the defined cubic bezier curve, where the value of **x1** and **x2** must range from 0 to 1. For example, **"cubic-bezier(0.42,0.0,0.58,1.0)"**.
**"steps(number,step-position)"**: The animation uses a step curve. The **number** parameter is mandatory and must be set to a positive integer. The **step-position** parameter is optional and can be set to **start** or **end** (default value). For example, **"steps(3,start)"**.| | delay | number | Yes | Animation delay duration, in milliseconds. Value **0** means that there is no delay. | | fill | "none" \| "forwards" \| "backwards" \| "both" | Yes | State of the animated target after the animation is executed.
**"none"**: No style is applied to the target before or after the animation is executed.
**"forwards"**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.
**"backwards"**: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.
**"both"**: The animation follows the **forwards** and **backwards** rules.| | direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes | Animation playback mode.
**"normal"**: plays the animation in forward loop mode.
**"reverse"**: plays the animation in reverse loop mode.
**"alternate"**: plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in reverse direction.
**"alternate-reverse"**: plays the animation in reverse alternating loop mode. When the animation is played for an odd number of times, the playback is in reverse direction. When the animation is played for an even number of times, the playback is in forward direction.| diff --git a/en/application-dev/reference/apis/js-apis-arkui-UIContext.md b/en/application-dev/reference/apis/js-apis-arkui-UIContext.md index 59d38206114407df5e3e220060274da684707cee..946463e335769b047494f0ed5b85ddbb911b3490 100644 --- a/en/application-dev/reference/apis/js-apis-arkui-UIContext.md +++ b/en/application-dev/reference/apis/js-apis-arkui-UIContext.md @@ -608,9 +608,9 @@ Obtains the size, position, translation, scaling, rotation, and affine matrix in **Return value** -| Type | Description | -| ------------- | ------------------------------------------------------------ | -| ComponentInfo | Size, position, translation, scaling, rotation, and affine matrix information of the component. | +| Type | Description | +| -------------------------------------------------------- | ------------------------------------------------ | +| [ComponentInfo](js-apis-arkui-componentUtils.md#componentinfo) | Size, position, translation, scaling, rotation, and affine matrix information of the component.| **Example** diff --git a/en/application-dev/reference/apis/js-apis-arkui-componentUtils.md b/en/application-dev/reference/apis/js-apis-arkui-componentUtils.md new file mode 100644 index 0000000000000000000000000000000000000000..7dd3cbb5a41f2bb4b6cbb401cd6f90c0d77d39e9 --- /dev/null +++ b/en/application-dev/reference/apis/js-apis-arkui-componentUtils.md @@ -0,0 +1,230 @@ +# @ohos.arkui.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.arkui.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 + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type | Mandatory | Description | +| ---------------|------------ | -----------------------------| -----------------------------| +| size | [Size](#size) | Yes| Component size. | +| localOffset | [Offset](#offset) | Yes| Offset of the component relative to the parent component. | +| windowOffset | [Offset](#offset) | Yes| Offset of the component relative to the window. | +| screenOffset | [Offset](#offset) | Yes| Offset of the component relative to the screen. | +| translate | [TranslateResult](#translateresult) | Yes| Translation of the component. | +| scale | [ScaleResult](#scaleresult) | Yes| Scaling of the component. | +| rotate | [RotateResult](#rotateresult) | Yes| Rotation of the component. | +| transform | [Matrix4Result](#matrix4result) | Yes| Affine matrix of the component, which is a 4x4 matrix object created based on the input parameter. | + +### Size + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type| Mandatory| Description | +| -------- | ---- | ----------------------------------| ----------------------------------| +| width | number | Yes| Component width. | +| height | number | Yes| Component height. | + +### Offset + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type| Mandatory| Description | +| --------| ---- | -----------------------------------| -----------------------------------| +| x | number | Yes| X coordinate. | +| y | number | Yes| Y coordinate. | + +### TranslateResult + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type| Mandatory| Description | +| --------| ---- | -----------------------------------| -----------------------------------| +| x | number | Yes| Translation distance along the x-axis. | +| y | number | Yes| Translation distance along the y-axis. | +| z | number | Yes| Translation distance along the z-axis. | + +### ScaleResult + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type| Mandatory| Description | +| --------| ---- | -----------------------------------| -----------------------------------| +| x | number | Yes| Scale factor along the x-axis. | +| y | number | Yes| Scale factor along the y-axis. | +| z | number | Yes| Scale factor along the z-axis. | +| centerX | number | Yes| X coordinate of the center point. | +| centerY | number | Yes| Y coordinate of the center point. | + +### RotateResult + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Name | Type| Mandatory| Description | +| --------| ---- | -----------------------------------| -----------------------------------| +| x | number | Yes| X coordinate of the rotation vector. | +| y | number | Yes| Y coordinate of the rotation vector. | +| z | number | Yes| Z coordinate of the rotation vector. | +| angle | number | Yes| Rotation angle. | +| centerX | number | Yes| X coordinate of the center point. | +| centerY | number | Yes| Y coordinate of the center point. | + +### Matrix4Result + +**System capability**: SystemCapability.ArkUI.ArkUI.Full + +| Value Range | Description | +| --------| -----------------------------------| +| [number,number,number,number,
number,number,number,number,
number,number,number,number,
number,number,number,number] | A number array whose length is 16 (4 x 4). For details, see **4 x 4 matrix description**.| + +**4 x 4 matrix description** + +| Name| Type | Mandatory| Description | +| ------ | ------ | ---- | ------------------------------------ | +| m00 | number | Yes | Scale factor along the x-axis. Defaults to **1** for the identity matrix. | +| m01 | number | Yes | The second value, which is affected by the rotation of the x, y, and z axes. | +| m02 | number | Yes | The third value, which is affected by the rotation of the x, y, and z axes. | +| m03 | number | Yes | Meaningless value. | +| m10 | number | Yes | The fifth value, which is affected by the rotation of the x, y, and z axes. | +| m11 | number | Yes | Scale factor along the y-axis. Defaults to **1** for the identity matrix. | +| m12 | number | Yes | The seventh value, which is affected by the rotation of the x, y, and z axes. | +| m13 | number | Yes | Meaningless value. | +| m20 | number | Yes | The ninth value, which is affected by the rotation of the x, y, and z axes. | +| m21 | number | Yes | The tenth value, which is affected by the rotation of the x, y, and z axes. | +| m22 | number | Yes | Scale factor along the z-axis. Defaults to **1** for the identity matrix. | +| m23 | number | Yes | Meaningless value. | +| m30 | number | Yes | Translation value of the x-axis, in px. Defaults to **0** for the unit matrix.| +| m31 | number | Yes | Translation value of the y-axis, in px. The default value is **0** for the identity matrix.| +| m32 | number | Yes | Translation value of the z-axis, in px. The default value is **0** for the identity matrix.| +| m33 | number | Yes | Valid in homogeneous coordinates, presenting the perspective projection effect. | + +**Example** + + ```js +import matrix4 from '@ohos.matrix4'; +import componentUtils from '@ohos.arkui.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'); + } + } +} + ``` diff --git a/en/application-dev/reference/apis/js-apis-componentUtils.md b/en/application-dev/reference/apis/js-apis-componentUtils.md deleted file mode 100644 index ed08051817ea9e1bf74c3f2377c507f597aacb9e..0000000000000000000000000000000000000000 --- a/en/application-dev/reference/apis/js-apis-componentUtils.md +++ /dev/null @@ -1,210 +0,0 @@ -# @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'); - } - } -} - ``` diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md index 235f7014246488fcc9a4b6d936a4e5bf16faf52e..ffc902f8eda9f2a5d5d0c55a4f6b6ceeabc1c031 100644 --- a/en/application-dev/reference/apis/js-apis-curve.md +++ b/en/application-dev/reference/apis/js-apis-curve.md @@ -78,7 +78,7 @@ Creates a step curve. | Name| Type | Mandatory| Description | | ------ | ------- | ----| ------------------------------------------------------------ | -| count | number | Yes | Number of steps. The value must be a positive integer.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.| +| count | number | Yes | Number of steps. The value must be a positive integer.
Value range: [1, +∞)
**NOTE**
A value less than 1 evaluates to the value **1**.| | end | boolean | Yes | Whether jumping occurs when the interpolation ends.
- **true**: Jumping occurs when the interpolation ends.
- **false**: Jumping occurs when the interpolation starts.| **Return value** @@ -174,7 +174,7 @@ Creates a spring animation curve. If multiple spring animations are applied to t | Name | Type | Mandatory | Description | | --------- | ------ | ---- | ----- | | response | number | No | Duration of one complete oscillation.
Default value: **0.55**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.55**.| -| dampingFraction | number | No | Damping coefficient.
**0**: undamped. In this case, the spring oscillates forever.
> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.
**1**: critically damped.
> 1: overdamped. In this case, the spring approaches equilibrium gradually.
Default value: **0.825**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.55**.| +| dampingFraction | number | No | Damping coefficient.
**0**: undamped. In this case, the spring oscillates forever.
> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.
**1**: critically damped.
> 1: overdamped. In this case, the spring approaches equilibrium gradually.
Default value: **0.825**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.825**.| | overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, the **response** values of these animations will transit smoothly over this duration if they are different.
Default value: **0**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0**.
The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the **interpolate** function of the curve.| @@ -209,7 +209,7 @@ Creates a responsive spring animation curve. It is a special case of [springMoti | --------- | ------ | ---- | ----- | | response | number | No | See **response** in **springMotion**.
Default value: **0.15**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.15**.| | dampingFraction | number | No | See **dampingFraction** in **springMotion**.
Default value: **0.86**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.86**.| -| overlapDuration | number | No | See **overlapDuration** in **springMotion**.
Default value: **0.25**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.25**.
To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.
The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve. | +| overlapDuration | number | No | See **overlapDuration** in **springMotion**.
Default value: **0.25**
Unit: second
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value **0.25**.
To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.
The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained using the **interpolate** function of the curve.| **Return value** @@ -237,16 +237,16 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation **Parameters** | Name | Type | Mandatory | Description | | --------- | ------ | ---- | ----- | -| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.| -| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.| -| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.| -| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.| +| velocity | number | Yes | Initial velocity. It is applied by external factors to the spring animation, designed to help ensure the smooth transition from the previous motion state. The velocity is the normalized velocity, and its value is equal to the actual velocity at the beginning of the animation divided by the animation attribute change value.
Value range: (-∞, +∞)| +| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **1**.| +| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **1**.| +| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **1**.| **Return value** | Type | Description | | ---------------------------------- | ---------------- | -| [ICurve](#icurve)| Interpolation curve.| +| [ICurve](#icurve)| Curve.
**NOTE**
The spring animation curve is physics-based. Its duration depends on the** interpolatingSpring** parameters, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained using the [interpolate](#interpolate9) function of the curve.| **Example** diff --git a/en/application-dev/reference/apis/js-apis-font.md b/en/application-dev/reference/apis/js-apis-font.md index f63ae0b839e472b9b6c11db6b6da4684507b11c6..6ed6b13fbe3c9e05d9fb0afb1c802770fe7044d1 100644 --- a/en/application-dev/reference/apis/js-apis-font.md +++ b/en/application-dev/reference/apis/js-apis-font.md @@ -54,7 +54,7 @@ struct FontExample { // Both familyName and familySrc support the string type. font.registerFont({ familyName: 'medium', - familySrc: '/font/medium.ttf' + familySrc: '/font/medium.ttf' // The font file is at the same level as the pages directory. }) // Both familyName and familySrc support the Resource type. @@ -138,7 +138,7 @@ Obtains information about a system font based on the font name. | ---------------- | ---------------------------- | | FontInfo | Information about the system font. | -## FontInfo +## FontInfo10+ **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -170,7 +170,7 @@ struct FontExample { Column() { Button("getFontByName") .onClick(() => { - this.fontInfo = font.getFontByName('HarmonyOS Sans Italic') + this.fontInfo = font.getFontByName('Sans Italic') console.log("getFontByName(): path = " + this.fontInfo.path) console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName) console.log("getFontByName(): fullName = " + this.fontInfo.fullName) diff --git a/en/application-dev/reference/apis/js-apis-matrix4.md b/en/application-dev/reference/apis/js-apis-matrix4.md index 67864b311bd4fbf30b87e17abb84db12e24889be..7aea13609e2d96615d36668eddbd275960916133 100644 --- a/en/application-dev/reference/apis/js-apis-matrix4.md +++ b/en/application-dev/reference/apis/js-apis-matrix4.md @@ -27,7 +27,7 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa | Name| Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| option | [number,number,number,number,
number,number,number,number,
number,number,number,number,
number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **Description of a 4 x 4 matrix**.
Default value:
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | +| option | [number,number,number,number,
number,number,number,number,
number,number,number,number,
number,number,number,number] | Yes | A number array whose length is 16 (4 x 4). For details, see **4 x 4 matrix description**.
Default value:
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | **Return value** @@ -35,7 +35,7 @@ Matrix constructor, which is used to create a 4 x 4 matrix by using the input pa | --------------------------------- | ---------------------------- | | [Matrix4Transit](#matrix4transit) | 4 x 4 matrix object created based on the input parameter.| -**Description of a 4 x 4 matrix** +**4 x 4 matrix description** | Name | Type | Mandatory | Description | | ---- | ------ | ---- | -------------------- | @@ -150,6 +150,7 @@ import matrix4 from '@ohos.matrix4' @Component struct Test { private matrix1 = matrix4.identity().translate({ x: 100 }) + // Perform the scale operation on the copy matrix of matrix1, which does not affect matrix1. private matrix2 = this.matrix1.copy().scale({ x: 2 }) build() { @@ -305,7 +306,7 @@ This API is deprecated since API version 10. combine(options: Matrix4Transit): Matrix4Transit -Combines the effects of two matrices to generate a new matrix object. +Combines the effects of two matrices to generate a new matrix object. The original matrix that calls this API will be changed. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -330,8 +331,8 @@ import matrix4 from '@ohos.matrix4' @Entry @Component struct Test { - private matrix1 = matrix4.identity().translate({ x: 200 }).copy() - private matrix2 = matrix4.identity().scale({ x: 2 }).copy() + private matrix1 = matrix4.identity().translate({ x: 200 }) + private matrix2 = matrix4.identity().scale({ x: 2 }) build() { Column() { @@ -342,7 +343,7 @@ struct Test { .margin({ top: 50 }) // Translate the x-axis by 200px, and then scale it twice to obtain the resultant matrix. Image($r("app.media.icon")) - .transform(this.matrix1.combine(this.matrix2)) + .transform(this.matrix1.copy().combine(this.matrix2)) .width("40%") .height(100) .margin({ top: 50 }) @@ -358,7 +359,7 @@ struct Test { invert(): Matrix4Transit -Inverts this matrix object. +Inverts this matrix object. The original matrix that calls this API will be changed. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -374,7 +375,7 @@ Inverts this matrix object. import matrix4 from '@ohos.matrix4' // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x). let matrix1 = matrix4.identity().scale({ x: 2 }) -let matrix2 = matrix1.invert() +let matrix2 = matrix1.copy().invert() @Entry @Component @@ -401,7 +402,7 @@ struct Tests { translate(options: TranslateOption): Matrix4Transit -Translates this matrix object along the x, y, and z axes. +Translates this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -446,7 +447,7 @@ struct Test { scale(options: ScaleOption): Matrix4Transit -Scales this matrix object along the x, y, and z axes. +Scales this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -490,7 +491,7 @@ struct Test { rotate(options: RotateOption): Matrix4Transit -Rotates this matrix object along the x, y, and z axes. +Rotates this matrix object along the x, y, and z axes. The original matrix that calls this API will be changed. **System capability**: SystemCapability.ArkUI.ArkUI.Full @@ -604,9 +605,9 @@ struct Test { | Name | Type | Mandatory| Description | | ------- | ------ | ---- | ------------------------------------------------------------ | -| x | number | No | Scaling multiple along the x-axis. If the value is greater than 1, the image is scaled up along the x-axis. If the value is less than 1, the image is scaled down along the x-axis.
Default value: **1**
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value.| -| y | number | No | Scaling multiple along the y-axis. If the value is greater than 1, the image is scaled up along the y-axis. If the value is less than 1, the image is scaled down along the y-axis.
Default value: **1**
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value.| -| z | number | No | Scaling multiple along the z-axis. If the value is greater than 1, the image is scaled up along the z-axis. If the value is less than 1, the image is scaled down along the z-axis.
Default value: **1**
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the default value.| +| x | number | No | Scaling multiple along the x-axis. x > 1: The image is scaled up along the x-axis.
0 < x < 1: The image is scaled down along the x-axis.
x < 0: The image is scaled in the reverse direction of the x-axis.
Default value: **1**
Value range: (-∞, +∞)| +| y | number | No | Scaling multiple along the y-axis. y > 1: The image is scaled up along the y-axis.
0 < y < 1: The image is scaled down along the y-axis.
y < 0: The image is scaled in the reverse direction of the y-axis.
Default value: **1**
Value range: (-∞, +∞)| +| z | number | No | Scaling multiple along the z-axis. z > 1: The image is scaled up along the z-axis.
0 < z < 1: The image is scaled down along the z-axis.
z < 0: The image is scaled in the reverse direction of the z-axis.
Default value: **1**
Value range: (-∞, +∞)| | centerX | number | No | X coordinate of the center point.
Default value: **0**
Value range: (-∞, +∞) | | centerY | number | No | Y coordinate of the center point.
Default value: **0**
Value range: (-∞, +∞) | @@ -616,9 +617,9 @@ struct Test { | Name | Type | Mandatory| Description | | ------- | ------ | ---- | ------------------------------------------------------- | -| x | number | No | X coordinate of the rotation axis vector.
Default value: **1**
Value range: (-∞, +∞)| -| y | number | No | Y coordinate of the rotation axis vector.
Default value: **1**
Value range: (-∞, +∞)| -| z | number | No | Z coordinate of the rotation axis vector.
Default value: **1**
Value range: (-∞, +∞)| +| x | number | No | X coordinate of the rotation axis vector.
Default value: **0**
Value range: (-∞, +∞)| +| y | number | No | Y coordinate of the rotation axis vector.
Default value: **0**
Value range: (-∞, +∞)| +| z | number | No | Z coordinate of the rotation axis vector.
Default value: **0**
Value range: (-∞, +∞)
**NOTE**
The rotation axis vector is valid only when at least one of **x**, **y**, and **z** is not 0.| | angle | number | No | Rotation angle.
Default value: **0** | | centerX | number | No | X coordinate of the center point.
Default value: **0** | | centerY | number | No | Y coordinate of the center point.
Default value: **0** | diff --git a/en/application-dev/reference/apis/js-apis-system-app.md b/en/application-dev/reference/apis/js-apis-system-app.md index e0acf1c2ba47df2555dd9812d655e1fb15f777e7..6fd13771f56ef275b03f71d0f5a6118c74e04106 100644 --- a/en/application-dev/reference/apis/js-apis-system-app.md +++ b/en/application-dev/reference/apis/js-apis-system-app.md @@ -2,9 +2,7 @@ > **NOTE** > -> - The APIs of this module are no longer maintained since API version 7. You are advised to use the new APIs. -> -> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. +> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -14,14 +12,15 @@ import app from '@system.app' ``` +## App -## app.getInfo +### getInfo -getInfo(): AppResponse +static getInfo(): AppResponse Obtains the declared information in the **config.json** file of an application. -You are advised to use [@ohos.bundle](js-apis-Bundle.md) since API version 7. +This API is deprecated since API version 9. You are advised to use [bundleManager.getApplicationInfo](js-apis-bundleManager.md#bundlemanagergetapplicationinfo) instead. **System capability**: SystemCapability.ArkUI.ArkUI.Lite @@ -42,9 +41,9 @@ export default { } ``` -## app.terminate +### terminate -terminate(): void +static terminate(): void Terminates the current ability. @@ -61,37 +60,9 @@ export default { } } ``` -## app.requestFullWindow +### setImageCacheCount7+ -requestFullWindow(options?: RequestFullWindowOptions): void - -Requests the application to run in full window. You can call this API when the FA runs in a non-full window, for example, semi-modal FA. This API is invalid for an application already in full-window mode. - -You are advised to use [@ohos.window](js-apis-window.md) since API version 7. - -**System capability**: SystemCapability.ArkUI.ArkUI.Full - -**Parameters** - -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| options | [RequestFullWindowOptions](#requestfullwindowoptions) | No| Duration for transition from the non-full window to the full window, in milliseconds. By default, the value is in direct proportion to the distance between the non-full window and the full window.| - -**Example** - -```ts -export default { - requestFullWindow() { - app.requestFullWindow({ - duration: 200 - }) - } -} -``` - -## app.setImageCacheCount7+ - -setImageCacheCount(value: number): void +static setImageCacheCount(value: number): void Sets the maximum number of decoded images that can be cached in the memory to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The built-in Least Recently Used (LRU) policy is used for caching. If the maximum number is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the number of images is too large, the memory usage may be too high. @@ -120,9 +91,9 @@ export default { } ``` -## app.setImageRawDataCacheSize7+ +### setImageRawDataCacheSize7+ -setImageRawDataCacheSize(value: number): void +static setImageRawDataCacheSize(value: number): void Sets the maximum size (in bytes) of the image data cached in the memory before decoding to speed up the loading of images from the same sources. If the input parameter is not set, the default value **0** is used, indicating that images are not cached. The LRU policy is used for caching. If the maximum size is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the image cache is too large, the memory usage may be too high. @@ -152,9 +123,9 @@ export default { } ``` -## app.setImageFileCacheSize7+ +### setImageFileCacheSize7+ -setImageFileCacheSize(value: number): void +static setImageFileCacheSize(value: number): void Sets the maximum size of the image file cache (in bytes) to speed up the loading of images from the same sources, especially online image sources and thumbnails. If the input parameter is not set, the default value 100 MB is used. The LRU policy is used for caching. If the maximum size is exceeded, the images that have not been updated for the longest time will be removed. You are advised to set the parameter based on the application memory requirements. If the image cache is too large, the disk usage may be too high. @@ -184,32 +155,60 @@ export default { } ``` -## AppResponse +### ScreenOnVisible(deprecated) -Defines the application response information. +static screenOnVisible(options?: ScreenOnVisibleOptions): void -**System capability**: The items in the table below require different system capabilities. For details, see the table. +Defines whether to keep the application visible when the screen is woken up. -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- |-------- | -| appID6+ | string | Yes| Bundle name of an application. It uniquely identifies the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full| -| appName | string | Yes| Application name.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| -| versionName | string | Yes| Application version name.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| -| versionCode | number | Yes| Application version number.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| +This API is deprecated since API Version 8. -## ScreenOnVisible(deprecated) +**System capability**: SystemCapability.ArkUI.ArkUI.Full -screenOnVisible(options?: ScreenOnVisibleOptions): void +| Name | Type | Mandatory| Description | +| ------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | +| options | [ScreenOnVisibleOptions](#screenonvisibleoptions) | No | With keep-alive, the system is prevented from returning to the home screen when the screen is locked, so that the application is visible when the screen is woken up.| -Defines whether to keep the application visible when the screen is woken up. +### requestFullWindow(deprecated) -This API is deprecated since API Version 8. +static requestFullWindow(options?: RequestFullWindowOptions): void + +Requests the application to run in full window. You can call this API when the FA runs in a non-full window, for example, semi-modal FA. This API is invalid for an application already in full-window mode. + +You are advised to use [@ohos.window](js-apis-window.md) since API version 7. **System capability**: SystemCapability.ArkUI.ArkUI.Full +**Parameters** + +| Name | Type | Mandatory| Description | +| ------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | +| options | [RequestFullWindowOptions](#requestfullwindowoptions) | No | Duration for transition from the non-full window to the full window, in milliseconds. By default, the value is in direct proportion to the distance between the non-full window and the full window.| + +**Example** + +```ts +export default { + requestFullWindow() { + app.requestFullWindow({ + duration: 200 + }) + } +} +``` + +## AppResponse + +Defines the application response information. + +**System capability**: The items in the table below require different system capabilities. For details, see the table. + | Name| Type| Mandatory| Description| | -------- | -------- | -------- |-------- | -| options | ScreenOnVisibleOptions | No| With keep-alive, the system is prevented from returning to the home screen when the screen is locked, so that the application is visible when the screen is woken up. | +| appID6+ | string | Yes| Bundle name of an application. It uniquely identifies the application.
**System capability**: SystemCapability.ArkUI.ArkUI.Full| +| appName | string | Yes| Application name.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| +| versionName | string | Yes| Application version name.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| +| versionCode | number | Yes| Application version number.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| ## ScreenOnVisibleOptions diff --git a/en/application-dev/reference/apis/js-apis-system-prompt.md b/en/application-dev/reference/apis/js-apis-system-prompt.md index 831a8acabb7735d67f119370155e13d1bf929ce0..6afc8a7634a31eb590d8ed9170372e7755db1e01 100644 --- a/en/application-dev/reference/apis/js-apis-system-prompt.md +++ b/en/application-dev/reference/apis/js-apis-system-prompt.md @@ -4,7 +4,7 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo > **NOTE** > -> - The APIs of this module are no longer maintained since API version 8. You are advised to use [`@ohos.prompt`](js-apis-prompt.md) instead. +> - The APIs of this module are deprecated since API version 8. You are advised to use [@ohos.promptAction](js-apis-promptAction.md) instead. > > > - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md index e9d71fc2ff680dfba5b95e7bae676854a1e68a28..8d1153d3bdaec49a99abcf0512613b3bb5f9b03c 100644 --- a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md +++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md @@ -33,7 +33,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin ``` - import router from '@system.router'; + import router from '@ohos.router'; ``` - Code reference @@ -51,7 +51,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin | Attribute | Type | Description | | ----- | --------------- | ---------------------------------------- | | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).
| - | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). | + | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).| ## Obtaining a DOM Element @@ -94,7 +94,7 @@ Use **$refs** to obtain a DOM element. ## Lifecycle APIs - Page lifecycle APIs - | Name | Type | Parameter | Return Value | Description | Triggered When | + | Name | Type | Parameter | Return Value | Description | Triggered When | | --------- | -------- | ---- | ---- | ------ | ------------------- | | onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.| | onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. | @@ -116,7 +116,7 @@ Use **$refs** to obtain a DOM element. - Show background page A on the foreground: onShow() - Application lifecycle APIs - | Name | Type | Parameter | Return Value | Description | Triggered When | + | Name | Type | Parameter | Return Value | Description | Triggered When | | --------- | -------- | ---- | ---- | ---- | --------- | | onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.| | onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.| diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058482.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058482.gif deleted file mode 100644 index 0ea18f82170eb3309aefb8af24ef89f886718bdd..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058482.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982708.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982708.gif index 738e50b17cf1c20514f17034ec08bba1cadf2893..2d852ce15286468dace1661d2ef9796274aff07d 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982708.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982708.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982729.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982729.gif new file mode 100644 index 0000000000000000000000000000000000000000..c5f6fec069ee84ed9a59ca6e457338a59f570f39 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001219982729.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index ddc44429c9b5c501af18ace6b65806d776df2942..cf020b1411cd952d2dd16330bdd30d53f501f5ed 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -16,7 +16,7 @@ Since API version 9, this API is supported in ArkTS widgets. | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | | duration | number | No | Animation duration, in ms.
Default value: **1000**
Unit: ms
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms.
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**
**NOTE**
A value less than 0 evaluates to the value **1**.| -| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | No | Animation curve. The default curve is linear.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | No | Animation curve.
Default value: **Curve.EaseInOut**
Since API version 9, this API is supported in ArkTS widgets.| | delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0**
Value range: [0, +∞)
**NOTE**
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | iterations | number | No | Number of times that the animation is played.
Default value: **1**
Value range: [-1, +∞)
**NOTE**
The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.| | playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.
For details about the restrictions, see **Notes about PlayMode**.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index 5a8f52093e36bc198bb47b5fefdb60f0aac56cfd..732c575f94ea2e5bea7c463eeafadfcc4ad78f51 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| group | string | No| Group name.| +| group | string | No| Group name.
**NOTE**
If there are multiple check box groups with the same group name, only the first check box group takes effect.| ## Attributes diff --git a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 594f3f24a30912af4e05a12d1c3dfe0a51957358..54c915981ad354d5c38f8fbb5e78dd149784ea94 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,18 +1,15 @@ # ColumnSplit -The **\** component lays out child components vertically and inserts a horizontal divider between components. +The **\** component lays out child components vertically and inserts a horizontal divider between every two child components. > **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - ## Child Components Supported - ## APIs ColumnSplit() @@ -20,17 +17,24 @@ ColumnSplit() ## Attributes -| Name| Type| Description| -| -------- | -------- | -------- | -| resizeable | boolean | Whether the divider can be dragged.
Default value: **false** | +| Name | Type | Description | +|-----------------------|-------------------------------------------------------------------|---------------------------------| +| resizeable | boolean | Whether the divider can be dragged.
Default value: **false** | +| divider10+ | [ColumnSplitDividerStyle](#columnsplitdividerstyle10) \| null | Margin of the divider.
- **DividerStyle**: distance between the divider and the child component above or below it.
- Default value: **null**, indicating that the top and bottom margins of the divider are 0.| + +## ColumnSplitDividerStyle10+ + +| Name | Type | Mandatory| Description | +| ----------- | ------------- | ---- |--------------------------| +| startMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component above it.
Default value: **0**| +| endMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component below it.
Default value: **0**| > **NOTE** > -> Similar to **\**, the divider of **\** can be dragged to a position that just fully holds a component. -> -> Dragging is not supported in the Previewer. Check the drag effect on a real device. +> Similar to **\**, the divider of **\** can change the height of the upper and lower child components, but only to the extent that the resultant height falls within the maximum and minimum heights of the child components. > -> The universal attributes **clip** and **margin** are not supported. +> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used. + ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 4a2fe8e741369350691f6f46ebeb929adbcc208c..6ad3efe53622d76410255e7896c3e273ecaca2d1 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -1,6 +1,6 @@ # RowSplit -The **\** lays out child components horizontally and inserts a vertical divider between child components. +The **\** lays out child components horizontally and inserts a vertical divider between every two child components. > **NOTE** > @@ -19,15 +19,13 @@ RowSplit() | Name| Type| Description| | -------- | -------- | -------- | -| resizeable | boolean | Whether the divider can be dragged.
Default value: **false** | +| resizeable | boolean | Whether the divider can be dragged.
Default value: **false** | > **NOTE** > -> Similar to **\**, the divider of **\** can be dragged to a position that just fully holds a component. -> -> Dragging is not supported in the Previewer. Check the drag effect on a real device. +> The divider of **\** can change the width of the left and right child components, but only to the extent that the resultant width falls within the maximum and minimum widths of the child components. > -> The universal attributes **clip** and **margin** are not supported. +> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used. ## Example @@ -54,4 +52,4 @@ struct RowSplitExample { } ``` -![en-us_image_0000001212058482](figures/en-us_image_0000001212058482.gif) +![en-us_image_0000001219982729](figures/en-us_image_0000001219982729.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md index 93b2912e0d4105efc88fb8ce4189095d75a04422..76528e41f75b3e29d9b89c29725b310b55fb38e2 100644 --- a/en/application-dev/reference/arkui-ts/ts-explicit-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-explicit-animation.md @@ -25,7 +25,7 @@ Since API version 9, this API is supported in ArkTS widgets. | -------- | -------- | -------- | | duration | number | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used.
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.
Default value: **1.0**
**NOTE**
A value less than 0 evaluates to the value **1**.| -| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| +| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.
Default value: **Curve.EaseInOut**
Since API version 9, this API is supported in ArkTS widgets.| | delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.
Default value: **0**
**NOTE**
- A value less than 0 evaluates to the value **0**.
- Floating-point values will be rounded down to integers. For example, if the value set is 1.2, **1** will be used.| | iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| | playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.
For details about the restrictions, see **Notes about PlayMode**.| diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md index fd98aadd3525b1d6d37262125bdc544833e9d129..7220808c63086d39e8fbc37bfad65281a19d4615 100644 --- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -9,9 +9,9 @@ The motion path animation is used to animate a component along a custom path. ## Attributes -| Name| Type| Default Value| Description| -| -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path.
Default value: **0.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.
- **to**: end point of the motion path.
Default value: **1.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value larger than 1 evaluates to the value **1**.
- **rotatable**: whether to rotate along the path. | +| Name| Type| Description| +| -------- | -------- | -------- | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string. In the value, **start** and **end** can be used in place of the start point and end point, for example, **'Mstart.x start.y L50 50 Lend.x end.y Z'**. For details, see [Path Drawing](../../ui/ui-js-components-svg-path.md).
If this parameter is set to an empty string, the path animation is not set.
- **from**: start point of the motion path.
Default value: **0.0**
Value range: [0, 1]
A value less than 0 or greater than 1 evaluates to the default value **0**.
- **to**: end point of the motion path.
Default value: **1.0**
Value range: [0, 1]
A value less than 0 or greater than 1 evaluates to the default value **1**, provided that the value of **to** is greater than or equal to the value of **from**.
- **rotatable**: whether to rotate along the path.
Default value: **false**| ## Example diff --git a/en/release-notes/changelogs/OpenHarmony_4.0.9.1/changelogs-arkcompiler.md b/en/release-notes/changelogs/OpenHarmony_4.0.9.1/changelogs-arkcompiler.md index 0a6357cf979e233d391430521e00f4d788fe0741..652618bf61d433a181601c4c399e241974ffe085 100644 --- a/en/release-notes/changelogs/OpenHarmony_4.0.9.1/changelogs-arkcompiler.md +++ b/en/release-notes/changelogs/OpenHarmony_4.0.9.1/changelogs-arkcompiler.md @@ -1,23 +1,23 @@ -# Arkcompiler Subsystem Changelog +# ArkCompiler Subsystem Changelog -## cl.arkcompiler.1 -- Removing of ts2abc compiler in sdk +## cl.arkcompiler.1 Removal of ts2abc Compiler from SDK -The composition of Arkcompiler in sdk was ts2abc compiler and es2abc compiler, supporting compilation of ets/js files. The ts2abc compiler has been removed from sdk since this version, thus it can't be used for abc file generation. Developers can view the corresponding changes in directory ets\build-tools\ets-loader\bin and directory js\build-tools\ets-loader\bin of sdk as presented in the picture below. +ArkCompiler in the SDK included the ts2abc and es2abc compilers for compilation of .ets and .js files. Since this version, the ts2abc compiler has been removed. You can check the changes shown below in the **ets\build-tools\ets-loader\bin** and **js\build-tools\ets-loader\bin** directories of the SDK. ![stack](figures/api10_sdk_arkcompiler_component_change.png) -**Change Impacts** -After updating the sdk, developing through DevEco will not be influenced. However, if developing scripts to use ts2abc compiler for abc file generation, one should switch to es2abc compiler +**Change Impact** +This change does not affect your development in DevEco Studio. If you use scripts to generate ABC files, use the es2abc compiler instead of es2abc. **Key API/Component Changes** -The ts2abc compiler related components are removed from sdk +The ts2abc related components are removed from the SDK. **Adaptation Guide** -1. For developers using DevEco for application developing, the removing of ts2abc compiler has no influence. -2. For developers writing scripts to use ts2abc compiler need to switch to es2abc compiler. Details of usage of es2abc compiler and the comparison between es2abc and ts2abc can be referred at[usage guideline of es2abc and comparison between es2abc and ts2abc](https://gitee.com/openharmony/arkcompiler_ets_frontend#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E). Assuming a.js as the target js file for compilation. For the scenario of abc generation, which is of the highest frequency, comparison of using es2abc compiler and ts2abc are present as below: - - script mode +1. If you are using DevEco Studio for application development, the removal of the ts2abc compiler has no influence. +2. If you are writing scripts to use the ts2abc compiler, you'll need switch to the es2abc compiler. For details about how to use the es2abc compiler and its comparison with the ts2abc compiler, see [Usage Guidelines](https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/README.md#usage-guidelines). Assume that **a.js** is the target .js file for compilation. For ABC file generation, which is the most frequently encountered scenario, the compilation commands are as follows: + - Compilation in script mode 1. es2abc: es2abc a.js --output a.abc 2. ts2abc: node --expose-gc pathToIndex/index.js a.js --output a.abc - - module mode + - Compilation in module mode 1. es2abc: es2abc a.js --module --output a.abc - 2. ts2abc: node --expose-gc pathToIndex/index.js a.js --module --output a.abc \ No newline at end of file + 2. ts2abc: node --expose-gc pathToIndex/index.js a.js --module --output a.abc