Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 eef60d41 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13300 翻译完成 11733+11732+11546 

Merge pull request !13300 from ester.zhou/C1-0106
上级 1f600e84 fdced2f9
隐藏空白更改
内联 并排
Showing with 407 addition and 416 deletion
en/application-dev/notification/notification-guidelines.md
浏览文件 @ eef60d41
...@@ -118,7 +118,7 @@ var subscriber = { ...@@ -118,7 +118,7 @@ var subscriber = {
}, },
}; };
Notification.subscribe(subscriber, (err, data) => { // This API uses an asynchronous callback to return the result. Notification.subscribe(subscriber, (err) => { // This API uses an asynchronous callback to return the result.
if (err.code) { if (err.code) {
console.error('===>failed to subscribe because ' + JSON.stringify(err)); console.error('===>failed to subscribe because ' + JSON.stringify(err));
return; return;
...@@ -133,19 +133,7 @@ var subscriber = { ...@@ -133,19 +133,7 @@ var subscriber = {
##### Enabling Notification ##### Enabling Notification
Before publishing a notification, check whether the notification feature is enabled for your application. By default, the feature is disabled. The application calls **Notification.requestEnableNotification** to prompt the user to enable the feature. Before publishing a notification, check whether the notification feature is enabled for your application. By default, the feature is disabled. You can enabled it in notification settings.
```js
Notification.requestEnableNotification() .then((data) => {
console.info('===>requestEnableNotification success');
}).catch((err) => {
console.error('===>requestEnableNotification failed because ' + JSON.stringify(err));
});
```
##### Publishing Notifications
To publish a notification, create a **NotificationRequest** object and set attributes such as the notification type, title, and content. In the following examples, a normal text notification and a notification containing a **WantAgent** are being published. To publish a notification, create a **NotificationRequest** object and set attributes such as the notification type, title, and content. In the following examples, a normal text notification and a notification containing a **WantAgent** are being published.
...@@ -166,7 +154,7 @@ var notificationRequest = { ...@@ -166,7 +154,7 @@ var notificationRequest = {
} }
// Publish the notification. // Publish the notification.
Notification.publish(notificationRequest) .then((data) => { Notification.publish(notificationRequest) .then(() => {
console.info('===>publish promise success req.id : ' + notificationRequest.id); console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => { }).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err)); console.error('===>publish promise failed because ' + JSON.stringify(err));
...@@ -235,7 +223,7 @@ var notificationRequest = { ...@@ -235,7 +223,7 @@ var notificationRequest = {
} }
// Publish the notification. // Publish the notification.
Notification.publish(notificationRequest) .then((data) => { Notification.publish(notificationRequest) .then(() => {
console.info('===>publish promise success req.id : ' + notificationRequest.id); console.info('===>publish promise success req.id : ' + notificationRequest.id);
}).catch((err) => { }).catch((err) => {
console.error('===>publish promise failed because ' + JSON.stringify(err)); console.error('===>publish promise failed because ' + JSON.stringify(err));
......
en/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ eef60d41
...@@ -35,6 +35,8 @@ prompt.showToast({ ...@@ -35,6 +35,8 @@ prompt.showToast({
}); });
``` ```
![en-us_image_0001](figures/en-us_image_0001.gif)
## ShowToastOptions ## ShowToastOptions
Describes the options for showing the toast. Describes the options for showing the toast.
...@@ -43,9 +45,9 @@ Describes the options for showing the toast. ...@@ -43,9 +45,9 @@ Describes the options for showing the toast.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- | | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string| Yes | Text to display. | | message | string | Yes | Text to display. |
| duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.| | duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
| bottom | string\| number | No | Distance between the toast border and the bottom of the screen. | | bottom | string\| number | No | Distance between the toast border and the bottom of the screen. |
## prompt.showDialog ## prompt.showDialog
...@@ -92,6 +94,8 @@ prompt.showDialog({ ...@@ -92,6 +94,8 @@ prompt.showDialog({
}) })
``` ```
![en-us_image_0002](figures/en-us_image_0002.gif)
## prompt.showDialog ## prompt.showDialog
showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void
...@@ -132,6 +136,8 @@ prompt.showDialog({ ...@@ -132,6 +136,8 @@ prompt.showDialog({
}); });
``` ```
![en-us_image_0004](figures/en-us_image_0004.gif)
## ShowDialogOptions ## ShowDialogOptions
Describes the options for showing the dialog box. Describes the options for showing the dialog box.
...@@ -140,8 +146,8 @@ Describes the options for showing the dialog box. ...@@ -140,8 +146,8 @@ Describes the options for showing the dialog box.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- | | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
| title | string| No | Title of the dialog box. | | title | string | No | Title of the dialog box. |
| message | string| No | Text body. | | message | string | No | Text body. |
| buttons | Array | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.| | buttons | Array | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.|
## ShowDialogSuccessResponse ## ShowDialogSuccessResponse
...@@ -170,7 +176,6 @@ Shows an action menu. This API uses a callback to return the result asynchronous ...@@ -170,7 +176,6 @@ Shows an action menu. This API uses a callback to return the result asynchronous
| options | [ActionMenuOptions](#actionmenuoptions) | Yes | Action menu options. | | options | [ActionMenuOptions](#actionmenuoptions) | Yes | Action menu options. |
| callback | AsyncCallback<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | Yes | Callback used to return the action menu response result.| | callback | AsyncCallback<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | Yes | Callback used to return the action menu response result.|
**Example** **Example**
```js ```js
...@@ -195,6 +200,8 @@ prompt.showActionMenu({ ...@@ -195,6 +200,8 @@ prompt.showActionMenu({
}) })
``` ```
![en-us_image_0005](figures/en-us_image_0005.gif)
## prompt.showActionMenu ## prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse> showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
...@@ -238,6 +245,8 @@ prompt.showActionMenu({ ...@@ -238,6 +245,8 @@ prompt.showActionMenu({
console.info('showActionMenu error: ' + err); console.info('showActionMenu error: ' + err);
}) })
``` ```
![en-us_image_0006](figures/en-us_image_0006.gif)
## ActionMenuOptions ## ActionMenuOptions
Describes the options for showing the action menu. Describes the options for showing the action menu.
...@@ -246,8 +255,8 @@ Describes the options for showing the action menu. ...@@ -246,8 +255,8 @@ Describes the options for showing the action menu.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- | | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
| title | string| No | Title of the text to display. | | title | string | No | Title of the text to display. |
| buttons | Array<[Button](#button)> | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.| | buttons | Array<[Button](#button)> | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
## ActionMenuSuccessResponse ## ActionMenuSuccessResponse
...@@ -267,5 +276,5 @@ Describes the menu item button in the action menu. ...@@ -267,5 +276,5 @@ Describes the menu item button in the action menu.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ---------------------------------------- | ---- | ------- | | ----- | ---------------------------------------- | ---- | ------- |
| text | string| Yes | Button text.| | text | string | Yes | Button text.|
| color | string| Yes | Text color of the button.| | color | string | Yes | Text color of the button.|
en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ eef60d41
...@@ -90,7 +90,7 @@ Generates a URL containing image display information. ...@@ -90,7 +90,7 @@ Generates a URL containing image display information.
</div> </div>
``` ```
```js ```css
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
......
en/application-dev/reference/arkui-js/js-components-common-methods.md
浏览文件 @ eef60d41
# Universal Methods # Universal Methods
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions. After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions.
## animate ## animate
animate( keyframes: Keyframes, options: Options): void animate( keyframes: Keyframes, options: Options): void
- Name - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | --------- | --------- | ------------------------------------------------------------ | | --------- | --------- | --------- | ------------------------------------------------------------ |
| keyframes | keyframes | Yes | Sets the animation style. | | keyframes | keyframes | Yes | Sets the animation style. |
| options | Options | Yes | Array of objects used to set animation attributes. For details, see Options. | | options | Options | Yes | Array of objects used to set animation attributes. For details, see Options. |
**Table 1** keyframes
**Table 1** keyframes
| Attribute | Type | Description | | Attribute | Type | Description |
| --------- | ------------- | ------------------------------------------------------------ | | --------- | ------------- | ------------------------------------------------------------ |
| frames | Array\<Style> | Array of objects used to set animation attributes. For details about style attributes, see Style attributes. | | frames | Array\<Style> | Array of objects used to set animation attributes. For details about style attributes, see Style attributes. |
**Table 2** Style attributes **Table 2** Style attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------------------ | ---------------------------------------------- | --------------- | ------------------------------------------------------------ | | ------------------ | ---------------------------------------------- | --------------- | ------------------------------------------------------------ |
| width | number | - | Width set for the component during playback of the animation. | | width | number | - | Width set for the component during playback of the animation. |
| height | number | - | Height set for the component during playback of the animation. | | height | number | - | Height set for the component during playback of the animation. |
| backgroundColor | \<color> | none | Background color set for the component during playback of the animation. | | backgroundColor | \<color> | none | Background color set for the component during playback of the animation. |
| opacity | number | 1 | Opacity set for the component. The value ranges from **0** to **1**. | | opacity | number | 1 | Opacity set for the component. The value ranges from **0** to **1**. |
| backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%** by default. | | backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%** by default. |
| transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage. | | transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage. |
| transform | [Transform](js-components-common-animation.md) | - | Transformation type set for a transformed element. | | transform | [Transform](js-components-common-animation.md) | - | Transformation type set for a transformed element. |
| offset | number | - | The value of **offset** must be within (0.0,1.0] and sorted in ascending order if it is provided.<br>If there are only two frames, **offset** can be left empty.<br>If there are more than two frames, **offset** is mandatory. | | offset | number | - | The value of **offset** must be within (0.0,1.0] and sorted in ascending order if it is provided.<br>If there are only two frames, **offset** can be left empty.<br>If there are more than two frames, **offset** is mandatory. |
**Table 3** Options description **Table 3** Options description
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ----------- | ---------------- | ------------- | ------------------------------------------------------------ | | ----------- | ---------------- | ------------- | ------------------------------------------------------------ |
| duration | number | 0 | Duration for playing the animation, in milliseconds. | | duration | number | 0 | Duration for playing the animation, in milliseconds. |
| easing | string | linear | Time curve of the animation. For details about the supported types, see Available values of the easing attribute. | | easing | string | linear | Time curve of the animation. For details about the supported types, see **Available values of the easing attribute**. |
| delay | number | 0 | Delay for the animation start. The default value indicates no delay. | | delay | number | 0 | Delay for the animation start. The default value indicates no delay. |
| iterations | number \| string | 1 | Number of times the animation will be played. **number** indicates a fixed number of playback operations, and **Infinity** indicates an unlimited number of playback operations. | | iterations | number \| string | 1 | Number of times the animation will be played. **number** indicates a fixed number of playback operations, and **Infinity** indicates an unlimited number of playback operations. |
| direction<sup>6+</sup> | string | normal | Mode of playing the animation. <br>- **normal**: Plays the animation in forward loop mode. <br>- **reverse**: Plays the animation in reverse loop mode. <br>- **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 backward direction. <br>- **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 backward direction. When the animation is played for an even number of times, the playback is in forward direction. | | direction<sup>6+</sup> | string | normal | Mode of playing the animation. <br>- **normal**: Plays the animation in forward loop mode. <br>- **reverse**: Plays the animation in reverse loop mode. <br>- **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 backward direction. <br>- **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 backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
| fill | string | none | Start and end styles of the animation. <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: 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. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. | | fill | string | none | Start and end styles of the animation. <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: 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. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
**Table 4** Available values of the easing attribute **Table 4** Available values of the easing attribute
| Type | Description | | Type | Description |
| ----------------------------------------- | ------------------------------------------------------------ | | ----------------------------------------- | ------------------------------------------------------------ |
| linear | The animation speed keeps unchanged. | | linear | The animation speed keeps unchanged. |
| ease-in | The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**. | | ease-in | The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**. |
| ease-out | The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**. | | ease-out | The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**. |
| ease-in-out | The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)**. | | ease-in-out | The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)**. |
| friction | Damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)**. | | friction | Damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)**. |
| extreme-deceleration | Extreme deceleration curve, **cubic-bezier(0.0, 0.0, 0.0, 1.0)**. | | extreme-deceleration | Extreme deceleration curve, **cubic-bezier(0.0, 0.0, 0.0, 1.0)**. |
| sharp | Sharp curve, **cubic-bezier(0.33, 0.0, 0.67, 1.0)**. | | sharp | Sharp curve, **cubic-bezier(0.33, 0.0, 0.67, 1.0)**. |
| rhythm | Rhythm curve, **cubic-bezier(0.7, 0.0, 0.2, 1.0)**. | | rhythm | Rhythm curve, **cubic-bezier(0.7, 0.0, 0.2, 1.0)**. |
| smooth | Smooth curve, **cubic-bezier(0.4, 0.0, 0.4, 1.0)**. | | smooth | Smooth curve, **cubic-bezier(0.4, 0.0, 0.4, 1.0)**. |
| cubic-bezier(x1, y1, x2, y2) | You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1. | | cubic-bezier(x1, y1, x2, y2) | You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1. |
| steps(number, step-position)<sup>6+</sup> | Step curve.<br>The **number** must be set and only an integer is supported.<br>**step-position** is optional. It can be set to **start** or **end**. The default value is **end**. | | steps(number, step-position)<sup>6+</sup> | Step curve.<br>The **number** must be set and only an integer is supported.<br>**step-position** is optional. It can be set to **start** or **end**. The default value is **end**. |
- Return values - Return value
The **animation** attributes are as follows. The **animation** attributes are as follows.
| Attribute | Type | Description | | Attribute | Type | Description |
| --------- | ------- | ------------------------------------------------------------ | | --------- | ------- | ------------------------------------------------------------ |
| finished | boolean | Read-only attribute, which indicates whether the animation playback is complete. | | finished | boolean | Read-only attribute, which indicates whether the animation playback is complete. |
| pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay). | | pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay). |
| playState | string | Read-write attribute, which indicates the playback status of the animation: <br>- **idle**: The animation is not running (playback ended or not started). <br>- **running**: The animation is running. <br>- **paused**: The animation is paused. <br>- **finished**: Animation playback ends. | | playState | string | Read-write attribute, which indicates the playback status of the animation: <br>- **idle**: The animation is not running (playback ended or not started). <br>- **running**: The animation is running. <br>- **paused**: The animation is paused. <br>- **finished**: Animation playback ends. |
| startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. | | startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. |
Methods for animation
Methods for animation
| Method | Parameter | Description | | Method | Parameter | Description |
| ------- | --------- | ------------------------------- | | ------- | --------- | ------------------------------- |
| play | - | Plays the animation. | | play | - | Plays the animation. |
| finish | - | Ends the animation. | | finish | - | Ends the animation. |
| pause | - | Pauses the animation. | | pause | - | Pauses the animation. |
| cancel | - | Cancels the animation. | | cancel | - | Cancels the animation. |
| reverse | - | Plays the animation in reverse. | | reverse | - | Plays the animation in reverse. |
Events for animation Events for animation
| Event | Description | | Event | Description |
| ------- | ----------------------------------- | | ------- | ----------------------------------- |
| start<sup>6+</sup> | The animation starts. | | start<sup>6+</sup> | The animation starts. |
| cancel | The animation is forcibly canceled. | | cancel | The animation is forcibly canceled. |
| finish | The animation playback is complete. | | finish | The animation playback is complete. |
| repeat | The animation repeats. | | repeat | The animation repeats. |
- Example - Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div id="idName" class="box"></div> <div id="idName" class="box"></div>
<div class="buttonBox"> <div class="buttonBox">
<button @click="start"> <button @click="start">
start start
</button> </button>
<button @click="cancel"> <button @click="cancel">
cancels cancel
</button> </button>
</div>
</div> </div>
``` ```
``` ```
/* xxx.css */ /* xxx.css */
...@@ -209,19 +196,17 @@ getBoundingClientRect(): \<Rect> ...@@ -209,19 +196,17 @@ getBoundingClientRect(): \<Rect>
Obtains the size of the element and its position relative to the window. Obtains the size of the element and its position relative to the window.
- Return values - Return value
**Table 5** Rect attributes<sup>6+</sup>
**Table 5** Rect<sup>6+</sup>
| Attribute | Type | Description | | Attribute | Type | Description |
| --------- | ------ | ------------------------------------------------------------ | | --------- | ------ | ------------------------------------------------------------ |
| width | number | Width of an element. | | width | number | Width of an element. |
| height | number | Height of an element. | | height | number | Height of an element. |
| left | number | Offset between the left boundary of the element and the window. | | left | number | Offset between the left boundary of the element and the window. |
| top | number | Offset between the upper boundary of the element and the window. | | top | number | Offset between the upper boundary of the element and the window. |
- Example - Example
``` ```
...@@ -232,37 +217,31 @@ Obtains the size of the element and its position relative to the window. ...@@ -232,37 +217,31 @@ Obtains the size of the element and its position relative to the window.
## createIntersectionObserver ## createIntersectionObserver
createIntersectionObserver(param?: ObserverParam):Observer createIntersectionObserver(param?: ObserverParam): Observer
Gets notified of the visibility of an element on the current page. Gets notified of the visibility of an element on the current page.
- Name - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------------- | --------- | ------------------------------ | | ----- | ------------- | --------- | ------------------------------ |
| param | ObserverParam | - | Obtains the observer callback. | | param | ObserverParam | - | Obtains the observer callback. |
**Table 6** ObserverParam attributes<sup>6+</sup>
**Table 6** ObserverParam<sup>6+</sup>
| Attribute | Type | Description | | Attribute | Type | Description |
| --------- | ------------- | ------------------------------------------------------------ | | --------- | ------------- | ------------------------------------------------------------ |
| ratios | Array\<number> | When the component is out of the range or is less than the range, the observer callback is triggered. | | ratios | Array\<number> | When the component is out of the range or is less than the range, the observer callback is triggered. |
- Return values - Return value
**Table 7** Methods supported by the Observer object<sup>6+</sup> **Table 7** Methods supported by the Observer object<sup>6+</sup>
| Name | Parameter | Description | | Name | Parameter | Description |
| --------- | ------------------ | ------------------------------------------------------------ | | --------- | ------------------ | ------------------------------------------------------------ |
| observe | callback: function | Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold. | | observe | callback: function | Subscribes to events of the observed object. The callback method is called when the value is greater than or less than the threshold. |
| unobserve | - | Unsubscribes from events of the observed object. | | unobserve | - | Unsubscribes from events of the observed object. |
- Example - Example
``` ```
......
en/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ eef60d41
# Universal Styles # Universal Styles
> **NOTE** > **NOTE**
> Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. >
> Universal styles are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
You can set component appearance in the **style** attribute or **.css** files. You can set universal styles for components in the **style** attribute or **.css** files.
...@@ -40,6 +41,7 @@ You can set component appearance in the **style** attribute or **.css** files. ...@@ -40,6 +41,7 @@ You can set component appearance in the **style** attribute or **.css** files.
| box-shadow<sup>5+</sup> | string | 0 | Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow. Example:<br>- box-shadow :10px 20px 5px 10px #888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px | | box-shadow<sup>5+</sup> | string | 0 | Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow. Example:<br>- box-shadow :10px 20px 5px 10px #888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| filter<sup>5+</sup> | string | - | Radius of the blur area within the component layout. If the radius is not set, the default value **0** (no blur area) is used. Percentage values are not supported.Syntax: **filter: blur(px)**<br>Example:<br>- filter: blur(10px) | | filter<sup>5+</sup> | string | - | Radius of the blur area within the component layout. If the radius is not set, the default value **0** (no blur area) is used. Percentage values are not supported.Syntax: **filter: blur(px)**<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Radius of the background blur area within the component layout. If the radius is not set, the default value **0** (no background blur) is used. Percentage values are not supported.Syntax: **backdrop-filter: blur(px)**<br>Example:<br>- backdrop-filter: blur(10px) | | backdrop-filter<sup>5+</sup> | string | - | Radius of the background blur area within the component layout. If the radius is not set, the default value **0** (no background blur) is used. Percentage values are not supported.Syntax: **backdrop-filter: blur(px)**<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available values of **style** are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | | opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout.<br>- **none**: The element is hidden. | | display | string | flex | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout.<br>- **none**: The element is hidden. |
| visibility | string | visible | Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The element is hidden but still takes up space.NOTE:If both **visibility** and **display** are set, only **display** takes effect. | | visibility | string | visible | Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The element is hidden but still takes up space.NOTE:If both **visibility** and **display** are set, only **display** takes effect. |
...@@ -64,5 +66,7 @@ You can set component appearance in the **style** attribute or **.css** files. ...@@ -64,5 +66,7 @@ You can set component appearance in the **style** attribute or **.css** files.
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br/>- **stretch**: stretches the image to fill the border box.<br/>- **repeat**: tiles the image to fill the border box.<br/>- **round**: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements. | | border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br/>- **stretch**: stretches the image to fill the border box.<br/>- **repeat**: tiles the image to fill the border box.<br/>- **round**: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements. |
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>Syntax reference:<'border-image-source'> \|\| <'border-image-slice'> [ <'border-image-width'> <br>- Gradient color border.<br>Example:<br>border-image: linear-gradient(red, yellow) 10px | | border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>Syntax reference:<'border-image-source'> \|\| <'border-image-slice'> [ <'border-image-width'> <br>- Gradient color border.<br>Example:<br>border-image: linear-gradient(red, yellow) 10px |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** The above-mentioned common styles are not mandatory. > **NOTE**
>
> The aforementioned universal styles are not mandatory.
en/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ eef60d41
...@@ -259,7 +259,7 @@ export default { ...@@ -259,7 +259,7 @@ export default {
``` ```
```js ```js
// xxx.js <!-- xxx.js -->
import router from '@ohos.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
``` ```
```css ```css
/* xxx.css */ <!-- xxx.css -->
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
...@@ -316,6 +316,7 @@ export default { ...@@ -316,6 +316,7 @@ export default {
} }
``` ```
2. Page2 2. Page2
...@@ -328,7 +329,7 @@ export default { ...@@ -328,7 +329,7 @@ export default {
``` ```
```js ```js
// xxx.js <!-- xxx.js -->
import router from '@ohos.router'; import router from '@ohos.router';
export default { export default {
data: { data: {
...@@ -338,10 +339,11 @@ export default { ...@@ -338,10 +339,11 @@ export default {
router.back() router.back()
} }
} }
```
```
```css
/* xxx.css */ ```css
<!-- xxx.css -->
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
......
en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md
浏览文件 @ eef60d41
...@@ -35,15 +35,13 @@ export default { ...@@ -35,15 +35,13 @@ export default {
console.log("Component created.") console.log("Component created.")
}, },
onAttached() { onAttached() {
this.value = "Load the component."
},
onDetached() {
this.value = "" this.value = ""
console.log("Component loaded.")
}, },
onPageShow() { onShow() {
console.log ("Page displayed.") console.log ("Page displayed.")
}, },
onPageHide() { onHide() {
console.log ("Page hidden.") console.log ("Page hidden.")
} }
} }
......
en/application-dev/reference/arkui-js/js-components-svg-animatemotion.md
浏览文件 @ eef60d41
...@@ -2,8 +2,9 @@ ...@@ -2,8 +2,9 @@
The **<animateMotion\>** component is used to define the animation along a path. The **<animateMotion\>** component is used to define the animation along a path.
>![](../../public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -36,7 +37,7 @@ The **animate** attributes \(**values** does not take effect\) and the attrib ...@@ -36,7 +37,7 @@ The **animate** attributes \(**values** does not take effect\) and the attrib
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path> <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z"> <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
</animateMotion> </animateMotion>
</path> </path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"> <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
......
en/application-dev/reference/arkui-js/js-components-svg-animatetransform.md
浏览文件 @ eef60d41
...@@ -4,8 +4,9 @@ The **<animateTransform\>** component is used to apply a transform animation a ...@@ -4,8 +4,9 @@ The **<animateTransform\>** component is used to apply a transform animation a
<circle\>, <ellipse\>, <line\>, <path\>, <polygon\>, <polyline\>, <rect\>, <text\> <circle\>, <ellipse\>, <line\>, <path\>, <polygon\>, <polyline\>, <rect\>, <text\>
>![](../../public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -182,6 +183,7 @@ Involved component example ...@@ -182,6 +183,7 @@ Involved component example
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</rect> </rect>
<text x="20" y="700" fill="#D2691E" font-size="40"> <text x="20" y="700" fill="#D2691E" font-size="40">
animate-transform
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
dur="3s" repeatCount="indefinite"></animateTransform> dur="3s" repeatCount="indefinite"></animateTransform>
</text> </text>
......
en/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ eef60d41
...@@ -97,9 +97,9 @@ Combination of **\<textpath>** and **\<tspan>** ...@@ -97,9 +97,9 @@ Combination of **\<textpath>** and **\<tspan>**
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
<text> <text>
<textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" > <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
This is TextPath. This is TextPath.
<tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan> <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
<tspan font-size="30px">Let's play.</tspan> <tspan font-size="30px">Let's play.</tspan>
...@@ -117,11 +117,11 @@ Combination of **\<textpath>** and **\<tspan>** ...@@ -117,11 +117,11 @@ Combination of **\<textpath>** and **\<tspan>**
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00" x="50"> <svg fill="#00FF00" x="50">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<!-- Value percentage --> <!-- Value percentage -->
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue">This is first tspan.</tspan> <tspan x="50" fill="blue">This is first tspan.</tspan>
<tspan x="50%">This is second tspan.</tspan> <tspan x="50%">This is second tspan.</tspan>
...@@ -172,10 +172,10 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination ...@@ -172,10 +172,10 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none"> <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan x="50" fill="blue"> <tspan x="50" fill="blue">
tspan attribute x|rotate tspan attribute x|rotate
...@@ -209,11 +209,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination ...@@ -209,11 +209,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute fill|fill-opacity tspan attribute fill|fill-opacity
...@@ -247,11 +247,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination ...@@ -247,11 +247,11 @@ Attribute animation of the **\<textPath>** and **\<tspan>** in combination
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="#00FF00"> <svg fill="#00FF00">
<path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red" <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red"
fill="none"> fill="none">
</path> </path>
<text> <text>
<textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px"> <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
This is TextPath. This is TextPath.
<tspan dx="20" fill="blue"> <tspan dx="20" fill="blue">
tspan attribute stroke tspan attribute stroke
......
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ eef60d41
...@@ -18,28 +18,28 @@ Circle(options?: {width?: string | number, height?: string | number}) ...@@ -18,28 +18,28 @@ Circle(options?: {width?: string | number, height?: string | number})
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Default Value | Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| Width of the circle.<br>Default value: **0**| | width | string \| number | No| 0 | Width of the circle. |
| height | string \| number | No| Height of the circle.<br>Default value: **0**| | height | string \| number | No| 0 | Height of the circle. |
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description| | Name| Type| Default Value | Description|
| -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color of the fill area.<br>Default value: **Color.Black**| | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | Color of the fill area. |
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.<br>Default value: **1**| | fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area. |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Stroke color. If this attribute is not set, the component does not have any stroke.| | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]** | | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes. |
| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**| | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke. |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**| | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke. |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**| | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke. |
| strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.| | strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join. |
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.| | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used. |
| strokeWidth | Length | Stroke width.<br>Default value: **1**| | strokeWidth | Length | 1 | Stroke width. |
| antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**| | antiAlias | boolean | true | Whether anti-aliasing is enabled. |
## Example ## Example
......
en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ eef60d41
...@@ -18,10 +18,10 @@ ellipse(options?: {width?: string | number, height?: string | number}) ...@@ -18,10 +18,10 @@ ellipse(options?: {width?: string | number, height?: string | number})
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Default Value | Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| Width.<br>Default value: **0**| | width | string \| number | No| 0 | Width. |
| height | string \| number | No| Height.<br>Default value: **0**| | height | string \| number | No| 0 | Height. |
## Attributes ## Attributes
......
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ eef60d41
...@@ -17,11 +17,11 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str ...@@ -17,11 +17,11 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
**Parameters** **Parameters**
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Default Value | Description |
| -------- | ---------------- | ---- | ----------------------------------- | | -------- | ---------------- | ---- | ----------------------------------- | ----------------------------------- |
| width | number \| string | No | Width of the rectangle where the path is located.<br>Default value: **0** | | width | number \| string | No | 0 | Width of the rectangle where the path is located. |
| height | number \| string | No | Height of the rectangle where the path is located.<br>Default value: **0** | | height | number \| string | No | 0 | Height of the rectangle where the path is located. |
| commands | string | No | Command for drawing the path.<br>Default value: **''**| | commands | string | No | '' | Command for drawing the path. |
## Attributes ## Attributes
......
en/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ eef60d41
...@@ -153,12 +153,12 @@ struct ShapeExample { ...@@ -153,12 +153,12 @@ struct ShapeExample {
@Entry @Entry
@Component @Component
struct ShapeMeshExample { struct ShapeMeshExample {
@State columnVal: number = 0 @State columnVal: number = 0;
@State rowVal: number = 0 @State rowVal: number = 0;
@State count: number = 0 @State count: number = 0;
@State verts: Array<number> = [] @State verts: Array<number> = [];
@State shapeWidth: number = 600 @State shapeWidth: number = 600;
@State shapeHeight: number = 600 @State shapeHeight: number = 600;
build() { build() {
Column() { Column() {
...@@ -187,34 +187,34 @@ struct ShapeMeshExample { ...@@ -187,34 +187,34 @@ struct ShapeMeshExample {
.height(this.shapeHeight + 'px') .height(this.shapeHeight + 'px')
// The mesh distortion effect is displayed when the component is touched. // The mesh distortion effect is displayed when the component is touched.
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
var touchX = event.touches[0].x * 2 var touchX = event.touches[0].x * 2;
var touchY = event.touches[0].y * 2 var touchY = event.touches[0].y * 2;
this.columnVal = 20 this.columnVal = 20;
this.rowVal = 20 this.rowVal = 20;
this.count = (this.columnVal + 1) * (this.rowVal + 1) this.count = (this.columnVal + 1) * (this.rowVal + 1);
var orig = [this.count * 2] var orig = [this.count * 2];
var index = 0 var index = 0;
for (var i = 0; i <= this.rowVal; i++) { for (var i = 0; i <= this.rowVal; i++) {
var fy = this.shapeWidth * i / this.rowVal var fy = this.shapeWidth * i / this.rowVal;
for (var j = 0; j <= this.columnVal; j++) { for (var j = 0; j <= this.columnVal; j++) {
var fx = this.shapeWidth * j / this.columnVal var fx = this.shapeWidth * j / this.columnVal;
orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx;
orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy;
index++; index++;
} }
} }
for (var k = 0; k < this.count * 2; k += 2) { for (var k = 0; k < this.count * 2; k += 2) {
var dx = touchX - orig[k + 0] var dx = touchX - orig[k + 0];
var dy = touchY - orig[k + 1] var dy = touchY - orig[k + 1];
var dd = dx * dx + dy * dy var dd = dx * dx + dy * dy;
var d = Math.sqrt(dd) var d = Math.sqrt(dd);
var pull = 80000 / (dd * d) var pull = 80000 / (dd * d);
if (pull >= 1) { if (pull >= 1) {
this.verts[k + 0] = touchX this.verts[k + 0] = touchX;
this.verts[k + 1] = touchY this.verts[k + 1] = touchY;
} else { } else {
this.verts[k + 0] = orig[k + 0] + dx * pull this.verts[k + 0] = orig[k + 0] + dx * pull;
this.verts[k + 1] = orig[k + 1] + dy * pull this.verts[k + 1] = orig[k + 1] + dy * pull;
} }
} }
}) })
......
en/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ eef60d41
...@@ -77,6 +77,23 @@ struct AnimateToExample { ...@@ -77,6 +77,23 @@ struct AnimateToExample {
} }
this.flag = !this.flag this.flag = !this.flag
}) })
Button('change rotate angle')
.margin(50)
.rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
.onClick(() => {
animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times.
playMode: PlayMode.AlternateReverse,
onFinish: () => {
console.info('play end')
}
}, () => {
this.rotateAngle = 90
})
})
}.width('100%').margin({ top: 5 }) }.width('100%').margin({ top: 5 })
} }
} }
......
en/application-dev/ui/js-framework-syntax-js.md
浏览文件 @ eef60d41
...@@ -29,14 +29,13 @@ The ES6 syntax is supported. ...@@ -29,14 +29,13 @@ The ES6 syntax is supported.
## Objects ## Objects
- Application objects - Application objects
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| $def | Object | Object that is exposed in the app.js file and obtained by `this.$app.$def`.<br/>> **NOTE**<br/>> Application objects do not support data binding. Data update should be triggered on the UI. | | $def | Object | Object that is exposed in the app.js file and obtained by `this.$app.$def`.<br/>> **NOTE**<br/>> Application objects do not support data binding. Data update should be triggered on the UI. |
Example Example
```js
```
// app.js // app.js
export default { export default {
onCreate() { onCreate() {
...@@ -56,8 +55,7 @@ The ES6 syntax is supported. ...@@ -56,8 +55,7 @@ The ES6 syntax is supported.
}; };
``` ```
```js
```
// index.js // index.js
export default { export default {
data: { data: {
...@@ -97,8 +95,7 @@ The ES6 syntax is supported. ...@@ -97,8 +95,7 @@ The ES6 syntax is supported.
Example Example
```js
```
// index.js // index.js
export default { export default {
data: { data: {
...@@ -149,7 +146,7 @@ The ES6 syntax is supported. ...@@ -149,7 +146,7 @@ The ES6 syntax is supported.
Example Example
``` ```js
this.$rootElement().scrollTo({position: 0}) this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
``` ```
...@@ -158,24 +155,22 @@ The ES6 syntax is supported. ...@@ -158,24 +155,22 @@ The ES6 syntax is supported.
## Obtaining a DOM Element ## Obtaining a DOM Element
1. Use `$refs` to obtain a DOM element. 1. Use `$refs` to obtain a DOM element.
```html
```
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
```js
```
// index.js // index.js
export default { export default {
data: { data: {
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator. const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
...@@ -193,23 +188,22 @@ The ES6 syntax is supported. ...@@ -193,23 +188,22 @@ The ES6 syntax is supported.
2. Call `$element` to obtain a DOM element. 2. Call `$element` to obtain a DOM element.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="width:500px;height: 700px; margin: 100px;"> <div class="container" style="width:500px;height: 700px; margin: 100px;">
<image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
</div> </div>
``` ```
```js
```
// index.js // index.js
export default { export default {
data: { data: {
images: [ images: [
{ src: '/common/frame1.png' }, { src: '/common/frame1.png' },
{ src: '/common/frame2.png' }, { src: '/common/frame2.png' },
{ src: '/common/frame3.png' }, { src: '/common/frame3.png' }
], ]
}, },
handleClick() { handleClick() {
const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator. const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator.
...@@ -231,7 +225,7 @@ The ES6 syntax is supported. ...@@ -231,7 +225,7 @@ The ES6 syntax is supported.
The following shows files of the root page: The following shows files of the root page:
``` ```html
<!-- root.hml --> <!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element> <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container"> <div class="container">
...@@ -242,8 +236,7 @@ The following shows files of the root page: ...@@ -242,8 +236,7 @@ The following shows files of the root page:
</div> </div>
``` ```
```js
```
// root.js // root.js
export default { export default {
data: { data: {
...@@ -256,26 +249,25 @@ export default { ...@@ -256,26 +249,25 @@ export default {
Customize the parent component. Customize the parent component.
``` ```html
<!-- parent.hml --> <!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element> <element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
<text class="text-style" onclick="parentClicked">Click this parent component</text> <text class="text-style" onclick="parentClicked">Click this parent component</text>
<text class="text-style" if="{{show}}">Hello parent component!</text> <text class="text-style" if="{{showValue}}">hello parent component!</text>
<childComp id = "selfDefineChild"></childComp> <childComp id = "selfDefineChild"></childComp>
</div> </div>
``` ```
```js
```
// parent.js // parent.js
export default { export default {
data: { data: {
show: false, showValue: false,
text: 'I am the parent component!', text: 'I am the parent component!',
}, },
parentClicked () { parentClicked () {
this.show = !this.show; this.showValue = !this.showValue
console.info('parent component get parent text'); console.info('parent component get parent text');
console.info(`${this.$parent().text}`); console.info(`${this.$parent().text}`);
console.info("The parent component gets the child function."); console.info("The parent component gets the child function.");
...@@ -286,8 +278,7 @@ export default { ...@@ -286,8 +278,7 @@ export default {
Customize the child component. Customize the child component.
```html
```
<!-- child.hml --> <!-- child.hml -->
<div class="item" onclick="textClicked"> <div class="item" onclick="textClicked">
<text class="text-style" onclick="childClicked">Child component clicked</text> <text class="text-style" onclick="childClicked">Child component clicked</text>
...@@ -295,8 +286,7 @@ Customize the child component. ...@@ -295,8 +286,7 @@ Customize the child component.
</div> </div>
``` ```
```js
```
// child.js // child.js
export default { export default {
data: { data: {
......
en/application-dev/ui/ui-js-animate-svg.md
浏览文件 @ eef60d41
# Defining Animations for SVG Components # Defining Animations for SVG Components
You can use child components in the &lt;svg&gt; component to animate attributes over time. You can use child components in the **\<svg>** component to animate attributes over time.
#### Attribute Style Animation ## Attribute Style Animation
In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the &lt;svg> component, set attributeName to the attribute you want to animate, set from to the animation start value, and set to to the animation end value. In the [animate](../reference/arkui-js/js-components-svg-animate.md) child component of the **\<svg>** component, set **attributeName** to the attribute you want to animate, set **from** to the animation start value, and set **to** to the animation end value.
```
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg> <svg>
...@@ -32,16 +33,18 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo ...@@ -32,16 +33,18 @@ In the [animate](../reference/arkui-js/js-components-svg-animate.md) child compo
</div> </div>
``` ```
![en-us_image_0000001183871404.gif](figures/en-us_image_0000001183871404.gif) ![en-us_image_0000001183871404](figures/en-us_image_0000001183871404.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) NOTE: > **NOTE**
> When values is also set, the from and to settings do not take effect. >
> When values is also set, the **from** and **to** settings do not take effect.
#### Motion Path Animation ## Motion Path Animation
In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the &lt;svg&gt; component, set path to define a shape for the animation. In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) child component of the **\<svg>** component, set path to define a shape for the animation.
```
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<svg fill="white" width="800" height="900"> <svg fill="white" width="800" height="900">
...@@ -55,13 +58,14 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md) ...@@ -55,13 +58,14 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)
</div> </div>
``` ```
![en-us_image_0000001229510983.gif](figures/en-us_image_0000001229510983.gif) ![en-us_image_0000001229510983](figures/en-us_image_0000001229510983.gif)
#### animateTransform Animation ## animateTransform Animation
In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the &lt;svg&gt; component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value. In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the &lt;svg&gt; component, set attributeName to bind the corresponding attribute to the transform attribute, and set type to the animation type, from to the start value, and to to the end value.
```
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" style=""> <div class="container" style="">
<svg> <svg>
...@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo ...@@ -86,7 +90,8 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
</div> </div>
``` ```
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -97,4 +102,4 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo ...@@ -97,4 +102,4 @@ In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransfo
} }
``` ```
![en-us_image_0000001182832088.gif](figures/en-us_image_0000001182832088.gif) ![en-us_image_0000001182832088](figures/en-us_image_0000001182832088.gif)
\ No newline at end of file \ No newline at end of file
en/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ eef60d41
...@@ -6,10 +6,9 @@ Set the transform attribute for component rotation, scaling, translation, and sk ...@@ -6,10 +6,9 @@ Set the transform attribute for component rotation, scaling, translation, and sk
## Designing Static Animation ## Designing Static Animation
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney. Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the **translate** attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the **position** attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the **scale** attribute to scale up the parent and child components together to determine the window size, and use the **skewX** attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="top"></div> <div class="top"></div>
...@@ -24,8 +23,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -24,8 +23,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -41,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -41,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 428px; height: 428px;
background-color: #860303; background-color: #860303;
transform: rotate(45deg); transform: rotate(45deg);
margin-top: 230px; margin-top: 284px;
margin-left: 266px; margin-left: 148px;
} }
.content{ .content{
margin-top: 500px; margin-top: 500px;
...@@ -55,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -55,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
width: 100px; width: 100px;
height: 150px; height: 150px;
background-color: #1033d9; background-color: #1033d9;
transform: translate(150px,-150px); transform: translate(150px,-137px);
} }
.window{ .window{
z-index: 1; z-index: 1;
...@@ -88,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -88,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 100px; height: 100px;
border-radius: 15px; border-radius: 15px;
background-color: #9a7404; background-color: #9a7404;
transform: translate(200px,-830px) skewX(-5deg); transform: translate(200px,-710px) skewX(-5deg);
} }
``` ```
...@@ -99,8 +97,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -99,8 +97,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created. Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"></div> <div class="circle"></div>
...@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua ...@@ -108,8 +105,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -178,10 +174,9 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua ...@@ -178,10 +174,9 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
## Designing Rotation Animation ## Designing Rotation Animation
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise. Set the rotation center around an element in different transform-origin positions. Of the **rotate3d** values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rotate"> <div class="rotate">
...@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position ...@@ -200,8 +195,7 @@ Set the rotation center around an element in different transform-origin position
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -259,13 +253,13 @@ Set the rotation center around an element in different transform-origin position ...@@ -259,13 +253,13 @@ Set the rotation center around an element in different transform-origin position
.rect4{ .rect4{
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 17ms infinite; animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9) background: linear-gradient(#e6c4ec, #be15d9)
} }
.rect5{ .rect5{
width: 100px; width: 100px;
height: 100px; height: 100px;
animation: rotate3d1 17ms infinite; animation: rotate3d1 1000ms infinite;
margin-left: 100px; margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9) background: linear-gradient(#e6c4ec, #be15d9)
} }
...@@ -275,7 +269,7 @@ Set the rotation center around an element in different transform-origin position ...@@ -275,7 +269,7 @@ Set the rotation center around an element in different transform-origin position
height: 100px; height: 100px;
border-radius: 50px; border-radius: 50px;
border: 1px solid #e70303; border: 1px solid #e70303;
animation: rotate3d2 17ms infinite; animation: rotate3d2 1000ms infinite;
} }
/* Eye animation */ /* Eye animation */
@keyframes rotate3d1{ @keyframes rotate3d1{
...@@ -308,18 +302,18 @@ Set the rotation center around an element in different transform-origin position ...@@ -308,18 +302,18 @@ Set the rotation center around an element in different transform-origin position
![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif) ![en-us_image_0000001222807776](figures/en-us_image_0000001222807776.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > **NOTE**
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis. >
> **transform-origin** specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
## Designing Scaling Animation ## Designing Scaling Animation
This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect. This example implements a ripple animation with the scale attribute. Here is the overall procedure: First, use the positioning function to determine the coordinates of the element's position. Then, create multiple components to achieve the overlapping effect. After that, set the opacity attribute to hide or display the components. To scale and hide/display a component at the same time, set both the scale and opacity attributes. Finally, set different animation durations for different components to achieve the diffusion effect.
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation. Set the scaling values for the x-axis, y-axis, and z-axis in **scale3d** to implement the animation.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="circle"> <div class="circle">
...@@ -334,8 +328,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen ...@@ -334,8 +328,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -423,24 +416,23 @@ text{ ...@@ -423,24 +416,23 @@ text{
![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif) ![en-us_image_0000001267887837](figures/en-us_image_0000001267887837.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > **NOTE**
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element. >
> After the **transform** attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
## Setting matrix ## Setting matrix
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component. The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect"> </div> <div class="rect"> </div>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -474,10 +466,9 @@ The matrix attribute defines a transformation matrix with six input parameters: ...@@ -474,10 +466,9 @@ The matrix attribute defines a transformation matrix with six input parameters:
## Integrating transform Attributes ## Integrating transform Attributes
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously. You can set multiple **transform** attributes at the same time to apply different transformations to a component. The following example applies the **scale**, **translate**, and **rotate** attributes simultaneously.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="rect1"></div> <div class="rect1"></div>
...@@ -488,8 +479,7 @@ You can set multiple transform attributes at the same time to apply different tr ...@@ -488,8 +479,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction:column; flex-direction:column;
...@@ -581,9 +571,10 @@ You can set multiple transform attributes at the same time to apply different tr ...@@ -581,9 +571,10 @@ You can set multiple transform attributes at the same time to apply different tr
![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif) ![en-us_image_0000001223127712](figures/en-us_image_0000001223127712.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/> > **NOTE**
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0). >
> > - When multiple **transform** attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values. >
> > - When using the shorthand notation, note that the animation effect varies according to the sequence of the style values.
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played. >
\ No newline at end of file > - The style values in the **transform** attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
\ No newline at end of file
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ eef60d41
...@@ -8,7 +8,7 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow ...@@ -8,7 +8,7 @@ The **&lt;tabs&gt;** component is a common UI component for navigation. It allow
Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs> <tabs>
...@@ -16,7 +16,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -16,7 +16,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
<text>item1</text> <text>item1</text>
<text>item2</text> <text>item2</text>
</tab-bar> </tab-bar>
<tab-content> <tab-content class="tabContent">
<div class="text"> <div class="text">
<text>content1</text> <text>content1</text>
</div> </div>
...@@ -28,7 +28,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -28,7 +28,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -36,6 +36,10 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -36,6 +36,10 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
.tabContent{
width: 100%;
height: 100%;
}
.text{ .text{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -51,7 +55,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**. ...@@ -51,7 +55,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**. By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true"> <tabs index="1" vertical="true">
...@@ -75,7 +79,7 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s ...@@ -75,7 +79,7 @@ By default, the active tab of a **&lt;tabs&gt;** component is the one with the s
Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**. Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs style="margin-top: 30px;"> <tabs style="margin-top: 30px;">
...@@ -101,8 +105,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g ...@@ -101,8 +105,7 @@ Set the **mode** attribute to enable the child components of the **&lt;tab-bar&g
## Setting Styles ## Setting Styles
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component. Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
```html
```
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<tabs class="tabs"> <tabs class="tabs">
...@@ -122,7 +125,7 @@ Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** ...@@ -122,7 +125,7 @@ Set the background color, border, and tab-content layout of the **&lt;tabs&gt;**
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -157,7 +160,7 @@ Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** ...@@ -157,7 +160,7 @@ Set the background color, border, and tab-content layout of the **&lt;tabs&gt;**
Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching. Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;"> <div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange"> <tabs class="tabs" onchange="tabChange">
...@@ -177,7 +180,7 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index ...@@ -177,7 +180,7 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index
</div> </div>
``` ```
``` ```js
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -203,7 +206,7 @@ In this example, you can switch between tabs and the active tab has the title te ...@@ -203,7 +206,7 @@ In this example, you can switch between tabs and the active tab has the title te
Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline. Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<tabs onchange="changeTabactive"> <tabs onchange="changeTabactive">
...@@ -231,7 +234,7 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo ...@@ -231,7 +234,7 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -267,7 +270,7 @@ background-color:#F1F3F5; ...@@ -267,7 +270,7 @@ background-color:#F1F3F5;
} }
``` ```
``` ```js
/* index.js */ /* index.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ eef60d41
...@@ -9,7 +9,7 @@ Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line s ...@@ -9,7 +9,7 @@ Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line s
Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic. Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -24,9 +24,11 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth ...@@ -24,9 +24,11 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -47,7 +49,7 @@ select{ ...@@ -47,7 +49,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -209,7 +211,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle ...@@ -209,7 +211,7 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -222,11 +224,11 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle ...@@ -222,11 +224,11 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -246,9 +248,7 @@ select{ ...@@ -246,9 +248,7 @@ select{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
this.ctx.setLineDash([0,0]); this.ctx.setLineDash([0,0]);
// Draw a stroked rectangle. // Draw a stroked rectangle.
this.ctx.strokeRect(200, 150, 200, 200); this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value2'){ }else if (e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 30; this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff'; this.ctx.strokeStyle = '#0000ff';
...@@ -283,12 +283,12 @@ export default { ...@@ -283,12 +283,12 @@ export default {
this.ctx.arc(300, 250, 150,0,6.28); this.ctx.arc(300, 250, 150,0,6.28);
// Draw borders. // Draw borders.
this.ctx.stroke(); this.ctx.stroke();
}else if(e.newValue == 'value3'){ }else if (e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5; this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]); this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200); this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value4'){ }else if (e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
// Draw and fill a rectangle. // Draw and fill a rectangle.
this.ctx.fillStyle = '#0000ff'; this.ctx.fillStyle = '#0000ff';
...@@ -307,7 +307,7 @@ export default { ...@@ -307,7 +307,7 @@ export default {
Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**. Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea ...@@ -321,7 +321,7 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -344,7 +344,7 @@ select{ ...@@ -344,7 +344,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -395,9 +395,9 @@ export default { ...@@ -395,9 +395,9 @@ export default {
this.ctx.fillRect(100, 100, 400, 300); this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){ }else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400); let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35'); gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur. // Set the level of shadow blur.
this.ctx.shadowBlur = 30; this.ctx.shadowBlur = 30;
...@@ -408,12 +408,12 @@ export default { ...@@ -408,12 +408,12 @@ export default {
}else if(e.newValue == 'value4'){ }else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
this.ctx.clearRect(0,0,600,500); this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200); let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white'); gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35'); gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur. // Set the level of shadow blur.
this.ctx.shadowBlur = 30; this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30; this.ctx.shadowOffsetY = 30;
// Set the shadow color. // Set the shadow color.
this.ctx.shadowColor = 'rgb(23, 1, 1)'; this.ctx.shadowColor = 'rgb(23, 1, 1)';
...@@ -432,7 +432,7 @@ export default { ...@@ -432,7 +432,7 @@ export default {
Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline. Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas1"></canvas> <canvas ref="canvas1"></canvas>
...@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U ...@@ -445,7 +445,7 @@ Create a text and use the **fillText** method to write the text on the canvas. U
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -468,7 +468,7 @@ select{ ...@@ -468,7 +468,7 @@ select{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -557,7 +557,8 @@ export default { ...@@ -557,7 +557,8 @@ export default {
![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif) ![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**. > In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.
...@@ -566,7 +567,7 @@ export default { ...@@ -566,7 +567,7 @@ export default {
After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating. After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag ...@@ -588,7 +589,7 @@ After creating an image object, use the **drawImage** attribute to draw the imag
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -623,7 +624,7 @@ text{ ...@@ -623,7 +624,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -641,8 +642,7 @@ export default { ...@@ -641,8 +642,7 @@ export default {
// Set the image height. // Set the image height.
img.height=150; img.height=150;
// Create an image tiling container. // Create an image tiling container.
var pat = ctx.createPattern(img, 'repeat'); var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 600, 300); ctx.fillRect(0, 0, 600, 300);
}, },
change(){ change(){
...@@ -729,7 +729,7 @@ export default { ...@@ -729,7 +729,7 @@ export default {
![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif) ![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters. > - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
> >
> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. > - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
...@@ -743,7 +743,7 @@ export default { ...@@ -743,7 +743,7 @@ export default {
Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle. Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -758,9 +758,11 @@ Use the **save** method to save the brush style, and use the **restore** method ...@@ -758,9 +758,11 @@ Use the **save** method to save the brush style, and use the **restore** method
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
align-items: center; align-items: center;
...@@ -792,7 +794,7 @@ text{ ...@@ -792,7 +794,7 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -817,8 +819,7 @@ export default { ...@@ -817,8 +819,7 @@ export default {
restore(){ restore(){
this.ctx.beginPath(); this.ctx.beginPath();
// Restore the brush setting. // Restore the brush setting.
this.ctx.restore(); this.ctx.restore(); this.ctx.fillRect(200, 150, 200, 200);
this.ctx.fillRect(200, 150, 200, 200);
}, },
} }
``` ```
......
en/application-dev/ui/ui-js-components-form.md
浏览文件 @ eef60d41
# &lt;form&gt; Development # &lt;form&gt; Development
The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md). The **&lt;form&gt;** component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> >
> This component is supported since API version 6. > This component is supported since API version 6.
...@@ -13,7 +13,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar ...@@ -13,7 +13,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
Create a **&lt;form&gt;** component in the .hml file under **pages/index**. Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form style="width: 100%; height: 20%"> <form style="width: 100%; height: 20%">
...@@ -22,8 +22,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**. ...@@ -22,8 +22,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width:100%; width:100%;
...@@ -42,7 +41,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**. ...@@ -42,7 +41,7 @@ Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md). To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form id="formId" class="formClass" click-effect="spring-large"> <form id="formId" class="formClass" click-effect="spring-large">
...@@ -58,8 +57,7 @@ To implement the zoom effect after a form is clicked, add the **click-effect** a ...@@ -58,8 +57,7 @@ To implement the zoom effect after a form is clicked, add the **click-effect** a
Add the **background-color** and **border** attributes. Add the **background-color** and **border** attributes.
```css
```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes. ...@@ -85,7 +83,7 @@ Add the **background-color** and **border** attributes.
To submit or reset a form, add the **submit** and **reset** events. To submit or reset a form, add the **submit** and **reset** events.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form"> <form onsubmit='onSubmit' onreset='onReset' class="form">
...@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events. ...@@ -100,12 +98,11 @@ To submit or reset a form, add the **submit** and **reset** events.
</input> </input>
<input type="reset" value="Reset" style="width:120px;"></input> <input type="reset" value="Reset" style="width:120px;"></input>
</div> </div>
</form> </form>
</div> </div>
``` ```
``` ```css
/* index.css */ /* index.css */
.container{ .container{
width: 100%; width: 100%;
...@@ -125,7 +122,7 @@ To submit or reset a form, add the **submit** and **reset** events. ...@@ -125,7 +122,7 @@ To submit or reset a form, add the **submit** and **reset** events.
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default{ export default{
...@@ -152,8 +149,7 @@ Select an option and submit or reset the form data. ...@@ -152,8 +149,7 @@ Select an option and submit or reset the form data.
Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **&lt;form&gt;** component to submit and reset the form data. Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **&lt;form&gt;** component to submit and reset the form data.
```html
```
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<form onsubmit="formSubmit" onreset="formReset"> <form onsubmit="formSubmit" onreset="formReset">
...@@ -188,10 +184,11 @@ Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) compo ...@@ -188,10 +184,11 @@ Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) compo
</div> </div>
``` ```
```css
```
/* index.css */ /* index.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction:column; flex-direction:column;
align-items:center; align-items:center;
background-color:#F1F3F5; background-color:#F1F3F5;
...@@ -206,8 +203,7 @@ label{ ...@@ -206,8 +203,7 @@ label{
} }
``` ```
```js
```
/* xxx.js */ /* xxx.js */
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
en/application-dev/ui/ui-js-components-grid.md
浏览文件 @ eef60d41
...@@ -68,6 +68,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum ...@@ -68,6 +68,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -155,6 +156,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, add a * ...@@ -155,6 +156,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, add a *
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -205,6 +207,7 @@ In this example, the content in the list is output cyclically to create a grid l ...@@ -205,6 +207,7 @@ In this example, the content in the list is output cyclically to create a grid l
flex-direction: column; flex-direction: column;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%; width: 100%;
height: 100%;
} }
text{ text{
color: #0a0aef; color: #0a0aef;
......
en/application-dev/ui/ui-js-components-path2d.md
浏览文件 @ eef60d41
# Path2D # Path2D
**&lt;Path2D&gt;** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
**\<Path2D>** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
## Drawing Line Segments
Create a **&lt;Path2D&gt;** object and use line segments to create different shapes.
## Drawing Line Segments
Create a **\<Path2D>** object and use line segments to create different shapes.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
</div> </div>
``` ```
```css
```
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -26,6 +23,7 @@ Create a **&lt;Path2D&gt;** object and use line segments to create different sha ...@@ -26,6 +23,7 @@ Create a **&lt;Path2D&gt;** object and use line segments to create different sha
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
} }
canvas{ canvas{
width: 600px; width: 600px;
...@@ -35,9 +33,7 @@ canvas{ ...@@ -35,9 +33,7 @@ canvas{
} }
``` ```
```js
```
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -73,7 +69,7 @@ export default { ...@@ -73,7 +69,7 @@ export default {
path.moveTo(600, 535); path.moveTo(600, 535);
path.arc(520, 450, 85, 0, 6); path.arc(520, 450, 85, 0, 6);
ctx.stroke(path); ctx.stroke(path);
}, }
} }
``` ```
...@@ -83,10 +79,10 @@ export default { ...@@ -83,10 +79,10 @@ export default {
## Drawing Graphs ## Drawing Graphs
Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **&lt;text&gt;** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left. Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **\<text>** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<canvas ref="canvas"></canvas> <canvas ref="canvas"></canvas>
...@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl ...@@ -98,7 +94,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container{ .container{
flex-direction: column; flex-direction: column;
...@@ -106,6 +102,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl ...@@ -106,6 +102,7 @@ Use **createPath2D** to create a path object and draw only **path1** so that onl
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
} }
canvas{ canvas{
width: 600px; width: 600px;
...@@ -133,61 +130,69 @@ text{ ...@@ -133,61 +130,69 @@ text{
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data:{ data: {
ctx: null, ctx: null,
path1: null, path1: null,
path2: null, path2: null,
path3: null, path3: null,
isAdd: "addPath2", isAdd: "addPath2",
isChange: true, isChange: true,
textName: 'change' textName: 'change'
}, },
onShow(){ onShow() {
this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); this.ctx = this.$refs.canvas.getContext('2d', {
this.path1 = this.ctx.createPath2D(); antialias: true
this.path1.moveTo(200, 200); });
this.path1.lineTo(400, 200); this.path1 = this.ctx.createPath2D();
this.path1.lineTo(400, 400); // Square
this.path1.lineTo(200, 400); this.path1.moveTo(200, 200);
this.path1.closePath(); this.path1.lineTo(400, 200);
this.path2 = this.ctx.createPath2D(); this.path1.lineTo(400, 400);
this.path2.arc(300, 300, 75, 0, 6.28) this.path1.lineTo(200, 400);
this.ctx.stroke(this.path1); this.path1.closePath();
}, this.path2 = this.ctx.createPath2D();
addPath(){ // Arc
if(this.isAdd == "addPath2"){ this.path2.arc(300, 300, 75, 0, 6.28);
this.ctx.clearRect(0,0,600,600) this.ctx.stroke(this.path1);
this.ctx.beginPath(); },
this.path2.addPath(this.path1) addPath() {
this.ctx.stroke(this.path2); if (this.isAdd == "addPath2") {
this.isAdd = "clearPath2" // Clear the content in the specified area on the canvas.
}else{ this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600) this.ctx.beginPath();
this.ctx.stroke(this.path1); // Add a path to the current path.
this.isAdd = "addPath2" this.path2.addPath(this.path1);
} this.ctx.stroke(this.path2);
}, this.isAdd = "clearPath2";
setTransform(){ } else {
if(this.isChange){ this.ctx.clearRect(0, 0, 600, 600);
this.ctx.clearRect(0,0,600,600) this.ctx.stroke(this.path1);
this.path3 = this.ctx.createPath2D(); this.isAdd = "addPath2";
this.path3.arc(150, 150, 100, 0, 6.28) }
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); },
this.ctx.stroke(this.path3); setTransform() {
this.isChange = !this.isChange; if (this.isChange) {
this.textName = "back" this.ctx.clearRect(0, 0, 600, 600);
}else{ this.path3 = this.ctx.createPath2D();
this.ctx.clearRect(0,0,600,600) this.path3.arc(150, 150, 100, 0, 6.28);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); // Reset and create a new transformation matrix.
this.ctx.stroke(this.path3); this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0);
this.isChange = !this.isChange; this.ctx.stroke(this.path3);
this.textName = "change" this.isChange = !this.isChange;
this.textName = "back"
} else {
this.ctx.clearRect(0, 0, 600, 600);
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change";
}
} }
},
} }
``` ```
......
en/application-dev/ui/ui-js-components-switch.md
浏览文件 @ eef60d41
...@@ -10,7 +10,6 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**. ...@@ -10,7 +10,6 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```html ```html
<!-- xxx.hml -->
<div class="container"> <div class="container">
<switch></switch> <switch></switch>
</div> </div>
...@@ -21,8 +20,6 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**. ...@@ -21,8 +20,6 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
``` ```
...@@ -42,7 +39,7 @@ Use the **textoff** and **showtext** attributes to set the status when text is s ...@@ -42,7 +39,7 @@ Use the **textoff** and **showtext** attributes to set the status when text is s
``` ```
```css ```
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -52,7 +49,7 @@ Use the **textoff** and **showtext** attributes to set the status when text is s ...@@ -52,7 +49,7 @@ Use the **textoff** and **showtext** attributes to set the status when text is s
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
} }
switch { switch{
texton-color: #002aff; texton-color: #002aff;
textoff-color: silver; textoff-color: silver;
text-padding: 20px; text-padding: 20px;
...@@ -61,7 +58,7 @@ switch { ...@@ -61,7 +58,7 @@ switch {
``` ```
```js ```css
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或