diff --git a/en/application-dev/reference/apis/js-apis-workScheduler.md b/en/application-dev/reference/apis/js-apis-workScheduler.md index 725b313ba88bedca924f0f5f1d2f6166308d2b8f..d897bc91717348ee8addd00751741f83cc77c345 100644 --- a/en/application-dev/reference/apis/js-apis-workScheduler.md +++ b/en/application-dev/reference/apis/js-apis-workScheduler.md @@ -8,12 +8,13 @@ The system executes Work Scheduler tasks at an appropriate time, subject to the > > - The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. > - The APIs of this module can be used only in the stage model. +> - For details about the constraints on the Work Scheduler usage, see [Work Scheduler Overview](../../task-management/work-scheduler-overview.md). ## Modules to Import ```js -import workScheduler from '@ohos.workScheduler' +import workScheduler from '@ohos.workScheduler'; ``` ## workScheduler.startWork @@ -53,7 +54,7 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio } } var res = workScheduler.startWork(workInfo); - console.info("workschedulerLog res:" + res); + console.info(`workschedulerLog res: ${res}`); ``` ## workScheduler.stopWork @@ -94,7 +95,7 @@ Instructs the **WorkSchedulerService** to stop the specified task. } } var res = workScheduler.stopWork(workInfo, false); - console.info("workschedulerLog res:" + res); + console.info(`workschedulerLog res: ${res}`); ``` ## workScheduler.getWorkStatus @@ -116,10 +117,10 @@ Obtains the latest task status. This API uses an asynchronous callback to return ```js workScheduler.getWorkStatus(50, (err, res) => { if (err) { - console.info('workschedulerLog getWorkStatus failed, because:' + err.code); + console.info(`workschedulerLog getWorkStatus failed, because: ${err.code}`); } else { for (let item in res) { - console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]); + console.info(`workschedulerLog getWorkStatus success, ${item} is: ${res[item]}`); } } }); @@ -149,10 +150,10 @@ Obtains the latest task status. This API uses a promise to return the result. ```js workScheduler.getWorkStatus(50).then((res) => { for (let item in res) { - console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]); + console.info(`workschedulerLog getWorkStatus success, ${item} is: ${res[item]}`); } }).catch((err) => { - console.info('workschedulerLog getWorkStatus failed, because:' + err.code); + console.info(`workschedulerLog getWorkStatus failed, because: ${err.code}`); }) ``` @@ -167,7 +168,7 @@ Obtains all tasks associated with this application. This API uses an asynchronou | Name | Type | Mandatory | Description | | -------- | -------------------- | ---- | ------------------------------- | -| callback | AsyncCallback\ | Yes | Callback used to return all tasks associated with the current application.| +| callback | AsyncCallback\ | Yes | Callback used to return all tasks associated with the current application. | **Return value** @@ -180,9 +181,9 @@ Obtains all tasks associated with this application. This API uses an asynchronou ```js workScheduler.obtainAllWorks((err, res) =>{ if (err) { - console.info('workschedulerLog obtainAllWorks failed, because:' + err.code); + console.info(`workschedulerLog obtainAllWorks failed, because: ${err.code}`); } else { - console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res)); + console.info(`workschedulerLog obtainAllWorks success, data is: ${JSON.stringify(res)}`); } }); ``` @@ -198,15 +199,15 @@ Obtains all tasks associated with this application. This API uses a promise to r | Type | Description | | -------------------------------------- | ------------------------------ | -| Promise> | Promise used to return all tasks associated with the current application.| +| Promise> | Promise used to return all tasks associated with the current application. | **Example** ```js workScheduler.obtainAllWorks().then((res) => { - console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res)); + console.info(`workschedulerLog obtainAllWorks success, data is: ${JSON.stringify(res)}`); }).catch((err) => { - console.info('workschedulerLog obtainAllWorks failed, because:' + err.code); + console.info(`workschedulerLog obtainAllWorks failed, because: ${err.code}`); }) ``` @@ -221,7 +222,7 @@ Stops and cancels all tasks associated with the current application. ```js let res = workScheduler.stopAndClearWorks(); - console.info("workschedulerLog res:" + res); + console.info(`workschedulerLog res: ${res}`); ``` ## workScheduler.isLastWorkTimeOut @@ -249,9 +250,9 @@ Checks whether the last execution of the specified task timed out. This API uses ```js workScheduler.isLastWorkTimeOut(500, (err, res) =>{ if (err) { - console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.code); + console.info(`workschedulerLog isLastWorkTimeOut failed, because: ${err.code}`); } else { - console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res); + console.info(`workschedulerLog isLastWorkTimeOut success, data is: ${res}`); } }); ``` @@ -280,10 +281,10 @@ Checks whether the last execution of the specified task timed out. This API uses ```js workScheduler.isLastWorkTimeOut(500) .then(res => { - console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res); + console.info(`workschedulerLog isLastWorkTimeOut success, data is: ${res}`); }) .catch(err => { - console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.code); + console.info(`workschedulerLog isLastWorkTimeOut failed, because: ${err.code}`); }); ``` diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md index 1f10982593566d8ad21467a9613d260ab6e6a3ec..066da49683ce647db66b9c8cdecd551550b23844 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-input.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md @@ -20,23 +20,23 @@ Not supported In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. -| Name | Type | Default Value | Mandatory| Description | -| -------------------------------- | ----------------------- | --------- | ---- | ------------------------------------------------------------ | -| type | string | text
| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.
The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.
The **button**, **checkbox**, and **radio** types cannot be dynamically modified.
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **radio**: a radio button that allows users to select one from multiple others with the same name.
- **text**: a single-line text field.
- **email**: a field used for an email address.
- **date**: date component, including the year, month, and day, but excluding time.
- **time**: time component, without the time zone.
- **number**: field for entering digits.
- **password**: password field, in which characters will be shielded.| -| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | -| name | string | - | No | Name of the **\** component.
This attribute is mandatory when **type** is set to **radio**. | -| value | string | - | No | Value of the **\** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| -| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.| -| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.| -| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.
Available values include:
- default
- next
- go
- done
- send
- search
Except for the **next** type, clicking the Enter key hides the soft keyboard.| -| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| -| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | -| menuoptions5+ | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. | -| autofocus6+ | boolean | false | No | Whether to automatically obtain focus.
This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| -| selectedstart6+ | number | -1 | No | Start position for text selection. | -| selectedend6+ | number | -1 | No | End position for text selection. | -| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | -| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | +| Name | Type | Default Value | Mandatory | Description | +| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- | +| type | string | text
| No | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.
The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.
The **button**, **checkbox**, and **radio** types cannot be dynamically modified.
- **button**: a button that can be clicked.
- **checkbox**: a check box.
- **radio**: a radio button that allows users to select one from multiple others with the same name.
- **text**: a single-line text field.
- **email**: a field used for an email address.
- **date**: date component, including the year, month, and day, but excluding time.
- **time**: time component, without the time zone.
- **number**: field for entering digits.
- **password**: password field, in which characters will be shielded.| +| checked | boolean | false | No | Whether the **\** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**. | +| name | string | - | No | Name of the **\** component.
This attribute is mandatory when **type** is set to **radio**. | +| value | string | - | No | Value of the **\** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.| +| placeholder | string | - | No | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.| +| maxlength | number | - | No | Maximum number of characters that can be entered in the input box. The empty value indicates no limit. | +| enterkeytype | string | default | No | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.
Available values include:
- default
- next
- go
- done
- send
- search
Except for the **next** type, clicking the Enter key hides the soft keyboard.| +| headericon | string | - | No | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.| +| showcounter5+ | boolean | false | No | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set. | +| menuoptions5+ | Array<MeunOption> | - | No | Menu options displayed after users click the **More** button. | +| autofocus6+ | boolean | false | No | Whether to automatically obtain focus.
This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.| +| selectedstart6+ | number | -1 | No | Start position for text selection. | +| selectedend6+ | number | -1 | No | End position for text selection. | +| softkeyboardenabled6+ | boolean | true | No | Whether to display the soft keyboard during editing. | +| showpasswordicon6+ | boolean | true | No | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**. | **Table 1** MenuOption5+ @@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. -| Name | Type | Default Value | Mandatory| Description | -| ------------------------ | -------------------------- | ---------- | ---- | ------------------------------------------------------------ | -| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | -| font-size | <length> | 16px | No | Font size of the single-line text box or button. | -| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| -| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| -| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\** component](../arkui-js/js-components-basic-text.md).| -| caret-color6+ | <color> | - | No | Color of the input cursor. | +| Name | Type | Default Value | Mandatory | Description | +| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- | +| color | <color> | \#e6000000 | No | Font color of the single-line text box or button. | +| font-size | <length> | 16px | No | Font size of the single-line text box or button. | +| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| +| placeholder-color | <color> | \#99000000 | No | Color of the hint text in the single-line text box. This attribute is available only when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. | +| font-weight | number \| string | normal | No | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\**](../arkui-js/js-components-basic-text.md) component. | +| caret-color6+ | <color> | - | No | Color of the caret. | ## Events @@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. - When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported. - | Name | Parameter | Description | + + | Name | Parameter | Description | | ------------------------- | ---------------------------------------- | ---------------------------------------- | - | change | {
 value: inputValue
 } | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.
If you change the **value** attribute directly, this event will not be triggered.| - | enterkeyclick | {
 value: enterKey
 } | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
- **2**: returned if **enterkeytype** is **go**.
- **3**: returned if **enterkeytype** is **search**.
- **4**: returned if **enterkeytype** is **send**.
- **5**: returned if **enterkeytype** is **next**.
- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| - | translate5+ | {
 value: selectedText
 } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| - | share5+ | {
 value: selectedText
 } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| - | search5+ | {
 value: selectedText
 } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| - | optionselect5+ | {
 index: optionIndex,
 value: selectedText
 } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| - | selectchange6+ | {
start: number,
end: number
 } | Triggered when the text selection changes. | + | change | {
value: inputValue
} | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.
If you change the **value** attribute directly, this event will not be triggered.| + | enterkeyclick | {
value: enterKey
} | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:
- **2**: returned if **enterkeytype** is **go**.
- **3**: returned if **enterkeytype** is **search**.
- **4**: returned if **enterkeytype** is **send**.
- **5**: returned if **enterkeytype** is **next**.
- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.| + | translate5+ | {
value: selectedText
} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.| + | share5+ | {
value: selectedText
} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.| + | search5+ | {
value: selectedText
} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.| + | optionselect5+ | {
index: optionIndex,
value: selectedText
} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.| + | selectchange6+ | {
start: number,
end: number
} | Triggered when the text selection changes. | - When **type** is set to **checkbox** or **radio**, the following events are supported. + | Name | Parameter | Description | | ------ | ---------------------------------------- | ---------------------------------------- | - | change | {
 checked:true \| false 
} | Triggered when the checked status of the **checkbox** or **radio** button changes.| + | change | {
checked:true \| false
} | Triggered when the checked status of the **checkbox** or **radio** button changes.| ## Methods In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. -| Name | Parameter | Description | -| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| focus | {
 focus: true\|false
 }:
If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.| -| showError | {
 error: string 
} | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.| -| delete6+ | - | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.| +| Name | Parameter | Description | +| ------------------- | ---------------------------------------- | ---------------------------------------- | +| focus | {
focus: true\|false
}:
If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. | +| showError | {
error: string
} | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. | +| delete6+ | - | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. | ## Example diff --git a/en/application-dev/reference/arkui-js/js-components-basic-web.md b/en/application-dev/reference/arkui-js/js-components-basic-web.md index 7130a68b89c88a8e02cc9872a0eaa29d17807105..0342d75b5b9183f396ab4fec35c212de5ea9617d 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-web.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-web.md @@ -1,7 +1,8 @@ # web The **\** component displays web page content. ->![](../../public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version. +>**NOTE** +> +>This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions ohos.permission.INTERNET, required only for accessing online web pages. @@ -25,6 +26,7 @@ Universal style settings are not supported. ## Events The following events are supported. + | Name| Parameter| Description| | -------- | -------- | -------- | | pagestart | {url: string} | Triggered when web page loading starts.| @@ -33,12 +35,13 @@ The following events are supported. ## Methods The following methods are supported. + | Name| Parameter| Description| | -------- | -------- | -------- | | reload | - | Reloads a page.| ## Example -``` +```html
@@ -46,7 +49,7 @@ The following methods are supported.
``` -``` +```js // xxx.js export default { reloadWeb() { diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md index 8a29479f73e396ee3b4d7a591025ce538b70967e..edf0d3afa3412cb67b3d97f38036218f46e1de33 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md @@ -1,171 +1,88 @@ -# canvas +# canvas -The **** component is used for customizing drawings. +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions +The **\** component is used for customizing drawings. + +## Required Permissions None -## Child Components + +## Child Component Not supported -## Attributes - -Attributes in [Universal Attributes](js-components-common-attributes.md) are supported. - -## Styles - -Styles in [Universal Styles](js-components-common-styles.md) are supported. - -## Events - -Events in [Universal Events](js-components-common-events.md) are supported. - -## Methods - -In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. - -### getContext - -getContext\(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext - -Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**. - -- Parameters - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

type

-

string

-

Yes

-

The value is set to '2d', indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.

-

options6+

-

ContextAttrOptions

-

No

-

Whether to enable anti-aliasing. By default, anti-aliasing is disabled.

-
- - **Table 1** ContextAttrOptions - - - - - - - - - - - - -

Name

-

Type

-

Description

-

antialias

-

boolean

-

Whether to enable anti-aliasing. The default value is false.

-
- -- Return values - - - - - - - - - - -

Type

-

Description

-

CanvasRenderingContext2D

-

2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.

-
- - -### toDataURL6+ - -toDataURL\(type?: string, quality?: number\): string + +## Attributes + +The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported. + + +## Styles + +The [universal styles](../arkui-js/js-components-common-styles.md) are supported. + + +## Events + +The [universal events](../arkui-js/js-components-common-events.md) are supported. + + +## Methods + +In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported. + + +### getContext + +getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext + +Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| -------------------- | ------------------ | ---- | ---------------------------------------- | +| type | string | Yes | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.| +| options6+ | ContextAttrOptions | No | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. | + +**Table 1** ContextAttrOptions + +| Name | Type | Description | +| --------- | ------- | ------------------- | +| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.| + +**Return value** + +| Type | Description | +| ---------------------------------------- | -------------------- | +| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the canvas component. | + +### toDataURL6+ + +toDataURL(type?: string, quality?: number): string Generates a URL containing image display information. -- Parameters - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

type

-

string

-

No

-

Image format. The default value is image/png.

-

quality

-

number

-

No

-

Image quality, which ranges from 0 to 1, when the image format is image/jpeg or image/webp. If the set value is beyond the value range, the default value 0.92 is used.

-
- -- Return values - - - - - - - - - - -

Type

-

Description

-

string

-

Image URL.

-
- - -## Example +**Parameters** -``` +| Name | Type | Mandatory | Description | +| ------- | ------ | ---- | ---------------------------------------- | +| type | string | No | Image format. The default value is **image/png**. | +| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.| + +**Return value** + +| Type | Description | +| ------ | --------- | +| string | Image URL.| + +## Example + +```html
@@ -173,7 +90,7 @@ Generates a URL containing image display information.
``` -``` +```js // xxx.js export default { handleClick() { @@ -184,4 +101,3 @@ export default { } } ``` - diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md index 7a94f110d4680dbd6115fbab80684f2287086722..9bc724d26a7610fa4b7fdbd48b21811a2f472cf2 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md @@ -4,7 +4,7 @@ > > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. -**CanvasGradient** provides a gradient object. +**CanvasGradient** provides a gradient object. ## addColorStop @@ -20,6 +20,7 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse | color | string | Gradient color to set. | **Example** + ```html
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md index 0747f7fa8f9b9800ff315dc6f0102736cbd00ab6..4100f9429985f1df7dd1e52087c842f128496226 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md @@ -48,25 +48,25 @@ ## Attributes -| Name | Type | Default Value | Description | -| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | \ \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | - | Style to fill an area.
- When the type is **\**, this parameter indicates the color of the filling area.
- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.
- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. | -| [lineWidth](#linewidth) | number | - | Line width. | -| [strokeStyle](#strokestyle) | \ \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | - | Stroke style.
- When the type is **\**, this parameter indicates the stroke color.
- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.
- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method. | -| [lineCap](#linecap) | string | butt | Style of the specified line endpoint. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.| -| [lineJoin](#linejoin) | string | miter | Style of the intersection point between line segments. The options are as follows:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.| -| [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. | -| [font](#font) | string | "normal normal 14px sans-serif" | Font style.
Syntax: ctx.font="font-style font-weight font-size font-family"5+
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**. | -| [textAlign](#textalign) | string | left | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.| -| [textBaseline](#textbaseline) | string | alphabetic | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.
- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.| -| [globalAlpha](#globalalpha) | number | - | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | -| [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. | -| [globalCompositeOperation](#globalcompositeoperation) | string | source-over | Composition operation type. Available values are as follows: **source-over**, **source-atop**, **source-in**, **source-out**, **destination-over**, **destination-atop**, **destination-in**, **destination-out**, **lighter**, copy, and **xor**. For details, see [Operation types](#globalcompositeoperation).| -| [shadowBlur](#shadowblur) | number | 0.0 | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. | -| [shadowColor](#shadowcolor) | <color> | - | Shadow color. | -| [shadowOffsetX](#shadowoffsetx) | number | - | X-axis shadow offset relative to the original object. | -| [shadowOffsetY](#shadowoffsety) | number | - | Y-axis shadow offset relative to the original object. | -| [imageSmoothingEnabled](#imagesmoothingenabled6)6+ | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. | +| Name | Type | Description | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | Style to fill an area.
- When the type is **\**, this parameter indicates the color of the filling area.
- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.
- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method.| +| [lineWidth](#linewidth) | number | Line width. | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md) \| CanvasPattern | Stroke style.
- When the type is **\**, this parameter indicates the stroke color.
- When the type is **CanvasGradient**, this parameter indicates a gradient object, which is created using the **createLinearGradient()** method.
- When the type is **CanvasPattern**, this parameter indicates a canvas pattern, which is created using the **createPattern()** method.| +| [lineCap](#linecap) | string | Style of the specified line endpoint. The options are as follows:
- **butt**: The endpoints of the line are squared off.
- **round**: The endpoints of the line are rounded.
- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
Default value: **butt**| +| [lineJoin](#linejoin) | string | Style of the intersection point between line segments. The options are as follows:
- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.
- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
Default value: **miter**| +| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
Default value: **10** | +| [font](#font) | string | Font style.
Syntax: ctx.font="font-style font-weight font-size font-family"5+
- (Optional) **font-style**: font style. Available values are **normal** and **italic**.
- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.
Default value: **"normal normal 14px sans-serif"**| +| [textAlign](#textalign) | string | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **right**: The text is right-aligned.
- **center**: The text is center-aligned.
- **start**: The text is aligned with the start bound.
- **end**: The text is aligned with the end bound.
In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.
Default value: **left**| +| [textBaseline](#textbaseline) | string | Horizontal alignment mode of text. Available values are as follows:
- **alphabetic**: The text baseline is the normal alphabetic baseline.
- **top**: The text baseline is on the top of the text bounding box.
- **hanging**: The text baseline is a hanging baseline over the text.
- **middle**: The text baseline is in the middle of the text bounding box.
- **ideographic**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.
- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
Default value: **alphabetic**| +| [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque. | +| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.
Default value: **0.0** | +| [globalCompositeOperation](#globalcompositeoperation) | string | Composition operation type. Available values are as follows: **source-over**, **source-atop**, **source-in**, **source-out**, **destination-over**, **destination-atop**, **destination-in**, **destination-out**, **lighter**, copy, and **xor**. For details, see [Operation types](#globalcompositeoperation).
Default value: **ource-over**| +| [shadowBlur](#shadowblur) | number | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
Default value: **0.0**| +| [shadowColor](#shadowcolor) | <color> | Shadow color. | +| [shadowOffsetX](#shadowoffsetx) | number | X-axis shadow offset relative to the original object. | +| [shadowOffsetY](#shadowoffsety) | number | Y-axis shadow offset relative to the original object. | +| [imageSmoothingEnabled](#imagesmoothingenabled6)6+ | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
Default value: **true**| ### fillStyle @@ -380,7 +380,8 @@ export default { ### globalCompositeOperation -Operation types +Enumerates the operation types. + | Value | Description | | ---------------- | ------------------------ | | source-over | Displays the new drawing above the existing drawing. This attribute is used by default. | @@ -425,7 +426,7 @@ export default { } ``` - ![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png) +![en-us_image_0000001213192781](figures/en-us_image_0000001213192781.png) In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. @@ -571,6 +572,7 @@ fillRect(x: number, y: number, width:number, height: number): void Fills a rectangle on the canvas. **Parameters** + | Name | Type | Description | | ------ | ------ | ------------- | | x | number | X-coordinate of the upper left corner of the rectangle.| @@ -607,6 +609,7 @@ clearRect(x: number, y: number, width:number, height: number): void Clears the content in a rectangle on the canvas. **Parameters** + | Name | Type | Description | | ------ | ------ | ------------- | | x | number | X-coordinate of the upper left corner of the rectangle.| @@ -645,6 +648,7 @@ strokeRect(x: number, y: number, width:number, height: number): void Draws a rectangle stroke on the canvas. **Parameters** + | Name | Type | Description | | ------ | ------ | ------------ | | x | number | X-coordinate of the upper left corner of the rectangle stroke.| @@ -681,6 +685,7 @@ fillText(text: string, x: number, y: number): void Draws filled text on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | --------------- | | text | string | Text to draw. | @@ -716,6 +721,7 @@ strokeText(text: string, x: number, y: number): void Draws a text stroke on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | --------------- | | text | string | Text to draw. | @@ -751,11 +757,13 @@ measureText(text: string): TextMetrics Returns a **TextMetrics** object used to obtain the width of specified text. **Parameters** + | Name | Type | Description | | ---- | ------ | ---------- | | text | string | Text to be measured.| **Return value** + | Type | Description | | ----------- | -------------------------------------- | | TextMetrics | Object that contains the text width. You can obtain the width by **TextMetrics.width**.| @@ -854,6 +862,7 @@ moveTo(x: number, y: number): void Moves a drawing path to a target position on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | --------- | | x | number | X-coordinate of the target position.| @@ -890,6 +899,7 @@ lineTo(x: number, y: number): void Connects the current point to a target position using a straight line. **Parameters** + | Name | Type | Description | | ---- | ------ | --------- | | x | number | X-coordinate of the target position.| @@ -958,12 +968,14 @@ createPattern(image: Image, repetition: string): Object Creates a pattern for image filling based on a specified source image and repetition mode. **Parameters** + | Name | Type | Description | | ---------- | ------ | ---------------------------------------- | | image | Image | Source image. For details, see [Image](../arkui-js/js-components-canvas-image.md).| | repetition | string | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.| **Return value** + | Type | Description | | ------ | ----------------- | | Object | Pattern of image filling.| @@ -1000,6 +1012,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | -------------- | | cp1x | number | X-coordinate of the first parameter of the bezier curve.| @@ -1040,6 +1053,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void Draws a quadratic curve on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | ----------- | | cpx | number | X-coordinate of the bezier curve parameter.| @@ -1078,6 +1092,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, Draws an arc on the canvas. **Parameters** + | Name | Type | Description | | ------------- | ------- | ---------- | | x | number | X-coordinate of the center point of the arc.| @@ -1117,6 +1132,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void Draws an arc based on the radius and points on the arc. **Parameters** + | Name | Type | Description | | ------ | ------ | --------------- | | x1 | number | X-coordinate of the first point on the arc.| @@ -1155,6 +1171,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region on the canvas. **Parameters** + | Name | Type | Description | | ------------- | ------ | ------------------------------------ | | x | number | X-coordinate of the ellipse center. | @@ -1196,6 +1213,7 @@ rect(x: number, y: number, width: number, height: number): void Creates a rectangle on the canvas. **Parameters** + | Name | Type | Description | | ------ | ------ | ------------- | | x | number | X-coordinate of the upper left corner of the rectangle.| @@ -1292,6 +1310,7 @@ rotate(rotate: number): void Rotates a canvas clockwise around its coordinate axes. **Parameters** + | Name | Type | Description | | ------ | ------ | ---------------------------------------- | | rotate | number | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.| @@ -1325,6 +1344,7 @@ scale(x: number, y: number): void Scales the canvas based on scale factors. **Parameters** + | Name | Type | Description | | ---- | ------ | ----------- | | x | number | Horizontal scale factor.| @@ -1367,6 +1387,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para > - y' = skewX \* x + scaleY \* y + translateY **Parameters** + | Name | Type | Description | | ---------- | ------ | -------- | | scaleX | number | X-axis scale.| @@ -1411,6 +1432,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function. **Parameters** + | Name | Type | Description | | ---------- | ------ | -------- | | scaleX | number | X-axis scale.| @@ -1452,6 +1474,7 @@ translate(x: number, y: number): void Moves the origin of the coordinate system. **Parameters** + | Name | Type | Description | | ---- | ------ | -------- | | x | number | X-axis translation.| @@ -1487,6 +1510,7 @@ createPath2D(path: Path2D, cmds: string): Path2D Creates a **Path2D** object. **Parameters** + | Name | Type | Description | | ---- | ------ | -------------- | | path | Path2D | **Path2D** object. | @@ -1494,10 +1518,9 @@ Creates a **Path2D** object. **Return value** -[Path2D object](../arkui-js/js-components-canvas-path2d.md) + [Path2D object](../arkui-js/js-components-canvas-path2d.md) **Example** - ```html
@@ -1534,6 +1557,7 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig Draws an image on the canvas. **Parameters** + | Name | Type | Description | | ------- | ------------------------------ | ---------------------------------------- | | image | Image \| PixelMap9+ | Image resource. For details, see [Image](../arkui-js/js-components-canvas-image.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7).| @@ -1626,6 +1650,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object Creates a linear gradient and returns a **CanvasGradient** object. For details, see [CanvasGradient](../arkui-js/js-components-canvas-canvasgradient.md). **Parameters** + | Name | Type | Description | | ---- | ------ | -------- | | x0 | number | X-coordinate of the start point.| @@ -1634,6 +1659,7 @@ Creates a linear gradient and returns a **CanvasGradient** object. For details, | y1 | number | Y-coordinate of the end point.| **Return value** + | Type | Description | | ------ | ---------------------- | | Object | Created **CanvasGradient** object.| @@ -1675,6 +1701,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, Creates a radial gradient and returns a **CanvasGradient** object. **Parameters** + | Name | Type | Description | | ---- | ------ | ----------------- | | x0 | number | X-coordinate of the center of the start circle. | @@ -1685,6 +1712,7 @@ Creates a radial gradient and returns a **CanvasGradient** object. | r1 | number | Radius of the end circle, which must be a non-negative finite number.| **Return value** + | Type | Description | | ------ | ---------------------- | | Object | Created **CanvasGradient** object.| @@ -1726,6 +1754,7 @@ createImageData(width: number, height: number, imageData: Object): Object Creates an **ImageData** object. For details, see [ImageData](../arkui-js/js-components-canvas-imagedata.md). **Parameters** + | Name | Type | Description | | --------- | ------ | ----------------- | | width | number | Width of the **ImageData** object. | @@ -1733,6 +1762,7 @@ Creates an **ImageData** object. For details, see [ImageData](../arkui-js/js-com | imagedata | Object | **ImageData** object with the same width and height copied from the original **ImageData** object.| **Return value** + | Type | Description | | ------ | ----------------- | | Object | Created **ImageData** object.| @@ -1764,6 +1794,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object Obtains the **ImageData** object created with the pixels within the specified area on the canvas. **Parameters** + | Name | Type | Description | | ---- | ------ | --------------- | | sx | number | X-coordinate of the upper left corner of the output area.| @@ -1772,6 +1803,7 @@ Obtains the **ImageData** object created with the pixels within the specified ar | sh | number | Height of the output area. | **Return value** + | Type | Description | | ------ | ----------------------- | | Object | **ImageData** object that contains pixels in the specified area on the canvas.| @@ -1802,6 +1834,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: Puts the **ImageData** onto a rectangular area on the canvas. **Parameters** + | Name | Type | Description | | ----------- | ------ | ----------------------------- | | imagedata | Object | **ImageData** object with pixels to put onto the canvas. | @@ -1888,6 +1921,7 @@ setLineDash(segments: Array): void Sets the dash line style. **Parameters** + | Name | Type | Description | | -------- | ----- | -------------------- | | segments | Array | An array describing the interval of alternate line segments and length of spacing.| @@ -1922,6 +1956,7 @@ getLineDash(): Array Obtains the dash line style. **Return value** + | Type | Description | | ----- | ------------------------ | | Array | An array describing the interval of alternate line segments and length of spacing.| @@ -1952,6 +1987,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void Displays the specified **ImageBitmap** object. **Parameters** + | Name | Type | Description | | ------ | ----------- | ------------------ | | bitmap | ImageBitmap | **ImageBitmap** object to display.| diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md index ff809fb5f91c182738670f03821508e6de31e301..16a15bb2edfbd402b9065980bdee6a3357c5d4f1 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md @@ -1,190 +1,87 @@ -# OffscreenCanvas - ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->**OffscreenCanvas** is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - -**OffscreenCanvas** defines a canvas object that can be rendered off the screen. - -## Attributes - - - - - - - - - - - - - - - - -

Name

-

Type

-

Description

-

width

-

number

-

Width of the OffscreenCanvas object.

-

height

-

number

-

Height of the OffscreenCanvas object.

-
- -## Methods - -### getContext - -getContext\(type: string, options?: CanvasRenderingContext2DSettings\): OffscreenCanvasRenderingContext2D - -Obtains the **OffscreenCanvas** context. This method returns a 2D drawing object. - -- Parameters - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

contextId

-

string

-

Yes

-

The value can only be "2d".

-

options

-

CanvasRenderingContext2DSettings

-

No

-

2D drawing object, which can be used to draw rectangles, images, and texts, on the OffscreenCanvas.

-
- -- Return values - - - - - - - - - - -

Type

-

Description

-

OffscreenCanvasRenderingContext2D

-

2D drawing object, which can be used to draw rectangles, images, and texts, on the OffscreenCanvas.

-
- - -### toDataURL - -toDataURL\(type?: string, quality?:number\): +# OffscreenCanvas + +> **NOTE** +> +> The APIs of this component are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. + + +**OffscreenCanvas** defines a canvas object that can be rendered off the screen. + + +## Attributes + +| Name | Type | Description | +| ------ | ------ | --------------------------- | +| width | number | Width of the **OffscreenCanvas** object.| +| height | number | Height of the **OffscreenCanvas** object.| + + +## Methods + + +### getContext + +getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D + +Obtains the **OffscreenCanvas** context. This API returns a 2D drawing object. + +**Parameters** + +| Name | Type | Mandatory | Description | +| --------- | ---------------------------------------- | ---- | ---------------------- | +| contextId | string | Yes | Context ID. The value can only be **"2d"**. | +| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | No | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. | + +**Return value** + +| Type | Description | +| ---------------------------------------- | --------------------------- | +| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts, on the **OffscreenCanvas**. | + + +### toDataURL + +toDataURL(type?: string, quality?:number): Generates a URL containing image display information. -- Parameters - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Mandatory

-

Description

-

type

-

string

-

No

-

Image format. The default value is image/png.

-

quality

-

number

-

No

-

Image quality, which ranges from 0 to 1, when the image format is image/jpeg or image/webp. If the set value is beyond the value range, the default value 0.92 is used.

-
- -- Return values - - - - - - - - - - -

Type

-

Description

-

string

-

Image URL.

-
- - -### transferToImageBitmap - -transferToImageBitmap\(\): ImageBitmap - -Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**. - -- Return values - - - - - - - - - - -

Type

-

Description

-

ImageBitmap

-

Pixel data rendered on the OffscreenCanvas.

-
- - -## Example +**Parameters** -``` +| Name | Type | Mandatory | Description | +| ------- | ------ | ---- | ---------------------------------------- | +| type | string | No | Image format. The default value is **image/png**. | +| quality | number | No | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.| + +**Return value** + +| Type | Description | +| ------ | --------- | +| string | Image URL.| + + +### transferToImageBitmap + +transferToImageBitmap(): ImageBitmap + +Creates an **ImageBitmap** object on the most recently rendered image of the **OffscreenCanvas**. + +**Return value** + +| Type | Description | +| ---------------------------------------- | --------------- | +| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.| + + +## Example + +```html
``` -``` +```js //xxx.js export default { onShow() { @@ -202,4 +99,3 @@ export default { } } ``` - diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md index f0d8345a3bac2c96c323c94731e3244b1ff8df77..f5f4179442862246d1c3171dde95879efbe4c532 100644 --- a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md @@ -19,6 +19,7 @@ Adds a path to this path. | path | Object | Path to be added to this path. | **Example** + ```html
@@ -60,6 +61,7 @@ Sets the path transformation matrix. | translateY | number | Translation distance of the y-axis. | **Example** + ```html
@@ -130,6 +132,7 @@ Moves the current coordinate point of the path to the target point, without draw | y | number | Y-coordinate of the target point. | **Example** + ```html
@@ -216,6 +219,7 @@ Draws a cubic bezier curve on the canvas. | y | number | Y-coordinate of the end point on the bezier curve. | **Example** + ```html
@@ -256,6 +260,7 @@ Draws a quadratic curve on the canvas. | y | number | Y-coordinate of the end point on the bezier curve. | **Example** + ```html
@@ -298,6 +303,7 @@ Draws an arc on the canvas. | anticlockwise | boolean | Whether to draw the arc counterclockwise. | **Example** + ```html
@@ -338,6 +344,7 @@ Draws an arc based on the radius and points on the arc. | radius | number | Radius of the arc. | **Example** + ```html
@@ -381,6 +388,7 @@ Draws an ellipse in the specified rectangular region. | anticlockwise | number | Whether to draw the ellipse in the anticlockwise direction. The value **0** indicates clockwise and the value **1** indicates anticlockwise. This parameter is optional. The default value is **0**. | **Example** + ```html
@@ -420,6 +428,7 @@ Creates a rectangle. | height | number | Height of the rectangle. | **Example** + ```html
diff --git a/en/application-dev/reference/arkui-js/js-components-common-events.md b/en/application-dev/reference/arkui-js/js-components-common-events.md index 572360f56518f2a6da4df7366528a5c7a0d01c45..8461a469536052368d330ad2ad5574be941f34b5 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-events.md +++ b/en/application-dev/reference/arkui-js/js-components-common-events.md @@ -1,6 +1,7 @@ # Universal Events -> **NOTE**
+> **NOTE** +> > Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. ## Event Description @@ -13,32 +14,33 @@ Different from private events, universal events can be bound to most components. -| Name | Parameter | Description | Support Bubbling | -| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- | -| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes5+ | -| touchmove | TouchEvent | Triggered when the tapping moves. | Yes5+ | -| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes5+ | -| touchend | TouchEvent | Triggered when the tapping ends. | Yes5+ | -| click | - | Triggered when a component is clicked. | Yes6+ | -| doubleclick7+ | - | Triggered when a component is double-clicked. | No
Bubbling is supported since API version 9. | -| longpress | - | Triggered when a component is long pressed. | No
Bubbling is supported since API version 9.| -| swipe5+ | SwipeEvent | Triggered when a user quickly swipes on a component.
For details about **SwipeEvent**, see Table 4. | No
Bubbling is supported since API version 9.| -| attached6+ | - | Triggered after the current component node is mounted to the render tree. | No | -| detached6+ | - | Triggered when the current component node is removed from the render tree. | No | -| pinchstart7+ | PinchEvent | Triggered when a pinch operation is started.
For details about **PinchEvent**, see Table 5.| No | -| pinchupdate7+ | PinchEvent | Triggered when a pinch operation is in progress. | No | -| pinchend7+ | PinchEvent | Triggered when a pinch operation is ended. | No | -| pinchcancel7+ | PinchEvent | Triggered when a pinch operation is interrupted. | No | -| dragstart7+ | DragEvent | Triggered when dragging starts.
For details about **DragEvent**, see Table 6. | No | -| drag7+ | DragEvent | Triggered when dragging is in progress. | No | -| dragend7+ | DragEvent | Triggered when dragging is ended. | No | -| dragenter7+ | DragEvent | Triggered when the dragged component enters a drop target. | No | -| dragover7+ | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | -| dragleave7+ | DragEvent | Triggered when the dragged component leaves a drop target. | No | -| drop7+ | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | - - -> **NOTE**
+| Name | Parameter | Description | Bubbling Supported | Capturing Supported | +| ------------------------ | ---------- | ------------------------------------------------------------ | ----------------------------------------------------- | --------------- | +| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes5+ | Yes5+| +| touchmove | TouchEvent | Triggered when the tapping moves. | Yes5+ | Yes5+| +| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes5+ | Yes5+| +| touchend | TouchEvent | Triggered when the tapping ends. | Yes5+ | Yes5+| +| click | - | Triggered when a component is clicked. | Yes6+ | No | +| doubleclick7+ | - | Triggered when a component is double-clicked. | No
Bubbling is supported since API version 9. | No | +| longpress | - | Triggered when a component is long pressed. | No
Bubbling is supported since API version 9. | No | +| swipe5+ | SwipeEvent | Triggered when a user quickly swipes on a component. For details about **SwipeEvent**, see Table 4. | No
Bubbling is supported since API version 9. | No | +| attached6+ | - | Triggered after the current component node is mounted to the render tree. | No | No | +| detached6+ | - | Triggered when the current component node is removed from the render tree. | No | No | +| pinchstart7+ | PinchEvent | Triggered when a pinch operation is started.
For details about **PinchEvent**, see Table 5.| No | No | +| pinchupdate7+ | PinchEvent | Triggered when a pinch operation is in progress. | No | No | +| pinchend7+ | PinchEvent | Triggered when a pinch operation is ended. | No | No | +| pinchcancel7+ | PinchEvent | Triggered when a pinch operation is interrupted. | No | No | +| dragstart7+ | DragEvent | Triggered when dragging starts.
For details about **DragEvent**, see Table 6. | No | No | +| drag7+ | DragEvent | Triggered when dragging is in progress. | No | No | +| dragend7+ | DragEvent | Triggered when dragging is ended. | No | No | +| dragenter7+ | DragEvent | Triggered when the dragged component enters a drop target. | No | No | +| dragover7+ | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | No | +| dragleave7+ | DragEvent | Triggered when the dragged component leaves a drop target. | No | No | +| drop7+ | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | No | + + +> **NOTE** +> > Events not listed in the preceding table do not support bubbling, such as the [change event](../arkui-js/js-components-basic-input.md#events) of the **** component. For details, see the description of the specific component. **Table 1** BaseEvent @@ -133,12 +135,13 @@ Sets the data associated with the specified key. If there is no data associated **Parameters** -| Name | Type | Mandatory | Name | +| Name | Type | Mandatory | Description | | ----- | ------ | ---- | ------- | | key | string | Yes | Data key. | | value | object | Yes | Data to be stored.| **Return value** + | Type | Description | | ------- | ------------------------ | | boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| @@ -166,11 +169,12 @@ Obtains the data associated with the specified key. If no data is associated wit **Parameters** -| Name | Type | Mandatory | Name | +| Name | Type | Mandatory | Description | | ---- | ------ | ---- | ----- | | key | string | Yes | Data key.| **Return value** + | Type | Description | | ------ | ------ | | object | Obtained data.| @@ -197,11 +201,12 @@ If the key is null, all data will be deleted. **Parameters** -| Name | Type | Mandatory | Name | +| Name | Type | Mandatory | Description | | ---- | ------ | ---- | ----- | | key | string | No | Data key.| **Return value** + | Type | Description | | ------- | ------------------------ | | boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| @@ -221,13 +226,14 @@ Sets a custom drag image. **Parameters** -| Name | Type | Mandatory | Name | +| Name | Type | Mandatory | Description | | -------- | -------- | ---- | ---------------------------------------- | -| pixelmap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | Image transferred from the frontend. | +| pixelmap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | Image transferred from the frontend.| | offsetX | number | Yes | Horizontal offset relative to the image. | | offsetY | number | Yes | Vertical offset relative to the image. | **Return value** + | Type | Description | | ---- | ------------------------ | | boolean | Operation result. The value **true** means that the operation is successful, and **false** means otherwise.| diff --git a/en/application-dev/reference/arkui-js/js-components-common-gradient.md b/en/application-dev/reference/arkui-js/js-components-common-gradient.md index e5458a9628650b97d64aac832b8c0a66ba946c74..db20300ae736b8195691bb1940c2a8c1abdcb38d 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-gradient.md +++ b/en/application-dev/reference/arkui-js/js-components-common-gradient.md @@ -1,121 +1,86 @@ -# Gradient Styles +# Gradient Styles +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors. -Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors. This framework supports two gradient styles: linear gradient and repeating linear gradient. -## Linear Gradient/Repeating Linear Gradient + +## Linear Gradient/Repeating Linear Gradient To use the gradient style, you need to specify the transition direction and transition color. -### Transition Direction + +### Transition Direction The available values are as follows: +- **direction**: gradient by direction. -- **direction**: gradient by direction -- **angle**: gradient by angle +- **angle**: gradient by angle. ``` background: linear-gradient(direction/angle, color, color, ...); background: repeating-linear-gradient(direction/angle, color, color, ...); ``` -### Transition Color - -The following four colors are supported: \#ff0000, \#ffff0000, rgb \(255, 0, 0\) and rgba \(255, 0, 0, 1\). At least two colors must be specified. - -- Name - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

direction

-

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

-

to bottom (gradient from top to bottom)

-

No

-

Transition direction. For example, to right (gradient from left to right) or

-

to bottom right (from the top left to the bottom right).

-

angle

-

<deg>

-

180deg

-

No

-

Transition direction. Angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.

-

color

-

<color> [<length>|<percentage>]

-

-

-

Yes

-

Colors among which smooth transitions are rendered.

-
- -- Example - - 1. Gradient from top to bottom \(default\) - - ``` - #gradient { - height: 300px; - width: 600px; - /* Gradient starts from red at the top to green at the bottom. */ - background: linear-gradient(red, #00ff00); - } - ``` - - ![](figures/111.png) - - 2. Gradient at an angle of 45° - - ``` - /* Gradient at an angle of 45°, changing from red to green */ - background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); - ``` - - ![](figures/222.png) - - 3. Gradient from left to right - - ``` - /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); - ``` - - ![](figures/333.png) - - 4. Repeating gradient - - ``` - /* Repeating gradient from left to right, the area of which is 30 px (60-30) and the opacity is 0.5 */ - background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); - ``` - - ![](figures/444.png) +### Transition Color + +The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb (255, 0, 0), and rgba (255, 0, 0, 1). At least two colors must be specified. + +**Parameters** + +| Style | Type | Default Value | Mandatory | Description | +| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | +| direction | to <side-or-corner> <side-or-corner> = [left \| right] \| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction, for example, **to left** (gradient from right to left) or
**to bottom right** (gradient from the top left to the bottom right).| +| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.| +| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. | + +**Example** +1. Gradient from top to bottom (default) + + ```css + #gradient { + height: 300px; + width: 600px; + /* Gradient starts from red at the top to green at the bottom. */ + background: linear-gradient(red, #00ff00); + } + ``` + + + +![111](figures/111.png) + +2. Gradient at an angle of 45° + + ```css + /* Gradient at an angle of 45°, changing from red to green */ + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); + ``` + + + +![222](figures/222.png) + +3. Gradient from left to right + + ```css + /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */ + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); + ``` + +![333](figures/333.png) + +4. Repeating gradient + + ```css + /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */ + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); + ``` + +![444](figures/444.png) diff --git a/en/application-dev/reference/arkui-js/js-components-common-styles.md b/en/application-dev/reference/arkui-js/js-components-common-styles.md index 443784eabf9792ff3db2c720f7910a6585ccf25c..4a3a7f2973f4dca4b3e4b6b5267f35fd71eb3241 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-styles.md +++ b/en/application-dev/reference/arkui-js/js-components-common-styles.md @@ -9,34 +9,34 @@ You can set universal styles for components in the **style** attribute or **.css | Name | Type | Default Value | Description | | ---------------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- | -| width | \ \| \ | - | Component width.
If this attribute is not set, the width required for the element content is used.
| -| height | \ \| \ | - | Component height.
If this attribute is not set, the height required for the element content is used.
| -| min-width5+ | \ \| \6+ | 0 | Minimum component width. | -| min-height5+ | \ \| \6+ | 0 | Minimum component height. | -| max-width5+ | \ \| \6+ | - | Maximum component width, which has no restriction by default. | -| max-height5+ | \ \| \6+ | - | Maximum component height, which has no restriction by default. | -| padding | \ \| \5+ | 0 | Shorthand attribute to set the padding for all sides in a declaration.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| -| padding-[left\|top\|right\|bottom] | \ \| \5+ | 0 | Left, top, right, and bottom padding. | -| padding-[start\|end] | \ \| \5+ | 0 | Start and end padding. | -| margin | \ \| \5+ | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| -| margin-[left\|top\|right\|bottom] | \ \| \5+ | 0 | Left, top, right, and bottom margins. | -| margin-[start\|end] | \ \| \5+ | 0 | Start and end margins. | +| width | <length> \| <percentage> | - | Component width.
If this attribute is not set, the width required for the element content is used.
| +| height | <length> \| <percentage> | - | Component height.
If this attribute is not set, the height required for the element content is used.
| +| min-width5+ | <length> \| <percentage>6+ | 0 | Minimum component width. | +| min-height5+ | <length> \| <percentage>6+ | 0 | Minimum component height. | +| max-width5+ | <length> \| <percentage>6+ | - | Maximum component width, which has no restriction by default. | +| max-height5+ | <length> \| <percentage>6+ | - | Maximum component height, which has no restriction by default. | +| padding | <length> \| <percentage>5+ | 0 | Shorthand attribute to set the padding for all sides in a declaration.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| +| padding-[left \| top \| right \| bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom padding. | +| padding-[start \| end] | <length> \| <percentage>5+ | 0 | Start and end padding. | +| margin | <length> \| <percentage>5+ | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| +| margin-[left \| top \| right \| bottom] | <length> \| <percentage>5+ | 0 | Left, top, right, and bottom margins. | +| margin-[start \| end] | <length> \| <percentage>5+ | 0 | Start and end margins. | | border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| | border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:
- **dotted**: dotted border. The radius of a dot is half of **border-width**.
- **dashed**: dashed border.
- **solid**: solid border.| | border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.| -| border-[left\|top\|right\|bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| -| border-width | \ | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. | -| border-[left\|top\|right\|bottom]-width | \ | 0 | Attribute to set widths of left, top, right, and bottom borders. | -| border-color | \ | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. | -| border-[left\|top\|right\|bottom]-color | \ | black | Attribute to set colors for left, top, right, and bottom borders. | -| border-radius | \ | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.
In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.| -| border-[top\|bottom]-[left\|right]-radius | \ | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners | -| background | \ | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.| -| background-color | \ | - | Background color. | +| border-[left \| top \| right \| bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.| +| border-width | <length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. | +| border-[left \| top \| right \| bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. | +| border-color | <color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. | +| border-[left \| top \| right \| bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. | +| border-radius | <length> | - | Attribute to set the radius for round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set **border-width**, **border-color**, or **border-style** for all the borders at the same time.| +| border-[top \| bottom]-[left \| right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners | +| background | <linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.| +| background-color | <color> | - | Background color. | | background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.
Example:
- background-image: url("/common/background.png")
The SVG format is not supported.| -| background-size | - string
- \ \
- \ \ | auto | Background image size.
- The **string** values are as follows:
- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: Retains the original aspect ratio of the image.
- The two **** values are as follows:
Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
- The two **** values are as follows:
Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.| +| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | Background image size.
- The **string** values are as follows:
- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: Retains the original aspect ratio of the image.
- The two **** values are as follows:
Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
- The two **** values are as follows:
Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.| | background-repeat | string | repeat | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.
- **repeat**: The image is repeated along the x-axis and y-axis at the same time.
- **repeat-x**: The image is repeated along the x-axis.
- **repeat-y**: The image is repeated along the y-axis.
- **no-repeat**: The image is not repeated.| -| background-position | - string string
- \ \
- \ \ | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center position.
- Using ****: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.
- Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.
- Using both **\** and **\**. | +| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | - Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center position.
- Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.
- Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.
- Using both **\** and **\**. | | box-shadow5+ | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**
Shadow style of the current component. The value includes 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:
- box-shadow :10px 20px 5px 10px \#888888
- box-shadow :100px 100px 30px red
- box-shadow :-100px -100px 0px 40px | | filter5+ | string | - | Syntax: **filter: blur(px)**
Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- filter: blur(10px) | | backdrop-filter5+ | string | - | Syntax: **backdrop-filter: blur(px)**
Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.
Example:
- backdrop-filter: blur(10px) | @@ -47,22 +47,22 @@ You can set universal styles for components in the **style** attribute or **.css | flex | number \| string | - | How to divide available space of the parent component for each child component.
You can set one, two5+, or three5+ values for this style.
Set one value in either of the following ways:
- A unitless number to set **flex-grow**.
- A valid width value5+ to set **flex-basis**.
Set two values5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:
- A unitless number to set **flex-shrink**.
- A valid width value to set **flex-basis**.
Set three values5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | flex-shrink | number | 1 | How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value **0** indicates that the child component does not shrink.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| -| flex-basis | \ | - | Initial length of the flex item on the main axis.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| +| flex-basis | <length> | - | Initial length of the flex item on the main axis.
This style takes effect only when the container is any of the following components: **\
**, **\**, **\**, **\**, and **\5+**.| | align-self6+ | string | - | Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.
- **flex-start**: Items are aligned to the start of the cross axis.
- **flex-end**: Items are aligned to the end of the cross axis.
- **center**: Items are aligned in the center of the cross axis.
- **baseline**: Items are aligned on the peracross axis.| | position | string | relative | Positioning type of an element. Dynamic changes are not supported.
- **fixed**: The element is positioned related to the browser window.
- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\
** or **\**.
- **relative**: The element is positioned relative to its normal position.| -| [left\|top\|right\|bottom] | \ \| \6+ | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.
- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. | -| [start \| end]6+ | \ \| \ | - | **start | end** must be used together with **position** to determine the offset of an element.
- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.
- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. | +| [left \| top \| right \| bottom] | <length> \| <percentage>6+ | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.
- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- The **top** attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
- The **right** attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
- The **bottom** attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element. | +| [start \| end]6+ | <length> \| <percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.
- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.
- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. | | z-index6+ | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.
z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.| -| image-fill6+ | \ | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)
The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.| -| clip-path6+ | [ \ \| \| \ ] \| none | - | Clip area of a component. Only the content within this area is displayed.
**\**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:
- **margin-box**: The width and height includes the margin.
- **border-box**: The width and height includes the border.
- **padding-box**: The width and height includes the padding.
- **content-box**: The width and height does not include any margin, border, or padding.
- **\**: shape of the clip area. Available values include:
- **inset**, in the format of inset( \{1,4} [ round \<'border-radius'> ]? ).
- **circle**, in the format of circle( [ \ ]? [ at \ \ ]? ).
- **ellipse**, in the format of ellipse( [ \{2} ]? [ at \ \ ]? ).
- **polygon**, in the format of polygon( [ \ \ ]\# ).
- **path**, in the format of path( \ ).| -| mask-image6+ | - \
- string | - | Image used for the mask of a component:
Gradient color mask, for example:
linear-gradient(to left, black, white)
Solid color mask, for example:
linear-gradient(to right, grey , grey)
Mask filled by a local SVG image, for example, **url(common/mask.svg)**| -| mask-size6+ | - string
- \\
- \ \ | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.
The **string** values are as follows:
- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: Retains the original aspect ratio of the image.
The two **** values are as follows: The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
The two **** values indicate the image size in relative to the original image size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.| -| mask-position6+ | - string string
- \ \
- \ \ | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
The **string** values are as follows:
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center position.
Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.
Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.
Using both **\** and **\**.| +| image-fill6+ | <color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)
The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.| +| clip-path6+ | [ <geometry-box> \| <basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.
****: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:
- **margin-box**: The width and height includes the margin.
- **border-box**: The width and height includes the border.
- **padding-box**: The width and height includes the padding.
- **content-box**: The width and height does not include any margin, border, or padding.
****: shape of the clip area. Available values include:
- **inset**, in the format of inset( \{1,4} [ round \<'border-radius'> ]? ).
- **circle**, in the format of circle( [ \ ]? [ at <percentage> <percentage> ]? ).
- **ellipse**, in the format of ellipse( [ \{2} ]? [ at <percentage> <percentage> ]? ).
- **polygon**, in the format of polygon( [ \ \ ]\# ).
- **path**, in the format of path( \ ).| +| mask-image6+ | - <linear-gradient>
- string | - | Image used for the mask of a component:
Gradient color mask, for example:
linear-gradient(to left, black, white)
Solid color mask, for example:
linear-gradient(to right, grey , grey)
Mask filled by a local SVG image, for example, **url(common/mask.svg)**| +| mask-size6+ | - string
- <length><length>
- <percentage> <percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.
The **string** values are as follows:
- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.
- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.
- **auto**: Retains the original aspect ratio of the image.
The two **\** values are as follows: The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.
The two **\** values indicate the image size in relative to the original image size. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. | +| mask-position6+ | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.
The **string** values are as follows:
- **left**: leftmost in the horizontal direction.
- **right**: rightmost in the horizontal direction.
- **top**: top in the vertical direction.
- **bottom**: bottom in the vertical direction.
- **center**: center position.
Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.
Using **\**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.
Using both **\** and **\**. | | border-image-source7+ | string | - | Border image of the specified element.
Example:
border-image-source: url("/common/images/border.png") | -| border-image-slice7+ | \ \| \ | 0 | Padding of the image.
The attribute can have one to four values:
If you set only one value, it specifies the padding for four sides.
If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| -| border-image-width7+ | \ \| \ | 0 | Width of the border image.
If you set only one value, it specifies the width for four sides.
If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.
If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.
If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).| -| border-image-outset7+ | \ \| \ | 0 | How far the border image can extend beyond the border box.
If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.
If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.
If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.
If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).| -| border-image-repeat7+ | string | stretch | How the border image fills the border box.
**stretch**: stretches the image to fill the border box.
**repeat**: tiles the image to fill the border box.
**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-slice7+ | <length> \| <percentage> | 0 | Padding of the image.
The attribute can have one to four values:
If you set only one value, it specifies the padding for four sides.
If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| +| border-image-width7+ | <length> \| <percentage> | 0 | Width of the border image.
If you set only one value, it specifies the width for four sides.
If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.
If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width.
If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).| +| border-image-outset7+ | <length> \| <percentage> | 0 | How far the border image can extend beyond the border box.
If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.
If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder.
If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder.
If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order).| +| border-image-repeat7+ | string | stretch | How the border image fills the border box.
**stretch**: stretches the image to fill the border box.
**repeat**: tiles the image to fill the border box.
**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-image7+ | string | - | Shorthand attribute. The options are as follows:
- 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.
- Gradient color border.
Example:
border-image: linear-gradient(red, yellow) 10px | | box-sizing9+ | string | border-box | Border type of the component.
**content-box**: standard box. Its width and height contain only the width and height of the content, and does not include the border and padding.
**border-box**: The width and height include the content, border, and padding, that is, the actual width of the component content area = width - (border + padding).| diff --git a/en/application-dev/task-management/work-scheduler-dev-guide.md b/en/application-dev/task-management/work-scheduler-dev-guide.md index 20a22b7613403e76e8efd0acc127733e4a85e628..27d29f2806f41c32fba59aacef8fd10a3dbde760 100644 --- a/en/application-dev/task-management/work-scheduler-dev-guide.md +++ b/en/application-dev/task-management/work-scheduler-dev-guide.md @@ -2,7 +2,7 @@ ## When to Use -If your application needs to execute a non-real-time task, for example, data learning, you can harness the Work Scheduler mechanism, which will schedule the task based on the storage space, power consumption, temperature, and more when the preset conditions are met. +If your application needs to execute a non-real-time task, for example, data learning, you can harness the Work Scheduler mechanism, which will schedule the task based on the storage space, power consumption, temperature, and more when the preset conditions are met. For details about the constraints on the Work Scheduler usage, see [Work Scheduler Overview](./work-scheduler-overview.md). ## Available APIs @@ -20,46 +20,46 @@ import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility'; **Table 1** Major workScheduler APIs - Name | Description + API | Description ------------------------------------------------------------ | ------------------------------------------------------------ - startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task. - stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops a Work Scheduler task. - getWorkStatus(workId: number, callback: AsyncCallback\): void; | Obtains the status of a Work Scheduler task. This API uses an asynchronous callback to return the result. - getWorkStatus(workId: number): Promise\; | Obtains the status of a Work Scheduler task. This API uses a promise to return the result. - obtainAllWorks(callback: AsyncCallback\): Array\; | Obtains Work Scheduler tasks. This API uses an asynchronous callback to return the result. - obtainAllWorks(): Promise>; | Obtains Work Scheduler tasks. This API uses a promise to return the result. + startWork(work: WorkInfo): boolean | Starts a Work Scheduler task. + stopWork(work: WorkInfo, needCancel?: boolean): boolean | Stops a Work Scheduler task. + getWorkStatus(workId: number, callback: AsyncCallback\): void | Obtains the status of a Work Scheduler task. This API uses an asynchronous callback to return the result. + getWorkStatus(workId: number): Promise\ | Obtains the status of a Work Scheduler task. This API uses a promise to return the result. + obtainAllWorks(callback: AsyncCallback\): Array\ | Obtains Work Scheduler tasks. This API uses an asynchronous callback to return the result. + obtainAllWorks(): Promise> | Obtains Work Scheduler tasks. This API uses a promise to return the result. stopAndClearWorks(): boolean; | Stops and clears Work Scheduler tasks. - isLastWorkTimeOut(workId: number, callback: AsyncCallback\): boolean; | Checks whether the last execution of the specified task has timed out. This API uses an asynchronous callback to return the result. It is applicable to repeated tasks. - isLastWorkTimeOut(workId: number): Promise\; | Checks whether the last execution of the specified task has timed out. This API uses a promise to return the result. It is applicable to repeated tasks. + isLastWorkTimeOut(workId: number, callback: AsyncCallback\): boolean | Checks whether the last execution of the specified task has timed out. This API uses an asynchronous callback to return the result. It is applicable to repeated tasks. + isLastWorkTimeOut(workId: number): Promise\ | Checks whether the last execution of the specified task has timed out. This API uses a promise to return the result. It is applicable to repeated tasks. **Table 2** WorkInfo parameters > **NOTE** > -> For details about the constraints on configuring WorkInfo, see [Work Scheduler Overview](./work-scheduler-overview.md). +> For details about the constraints on configuring **WorkInfo**, see [Work Scheduler Overview](./work-scheduler-overview.md). -Name|Description|Type +Name| Type|Description ---------------------------------------------------------|-----------------------------------------|--------------------------------------------------------- -workId | Work ID. Mandatory.|number -bundleName | Name of the Work Scheduler task bundle. Mandatory.|string -abilityName | Name of the component to be notified by a Work Scheduler callback. Mandatory.|string -networkType | Network type.| NetworkType -isCharging | Whether the device is charging.| boolean -chargerType | Charging type.| ChargingType -batteryLevel | Battery level.| number -batteryStatus| Battery status.| BatteryStatus -storageRequest|Storage status.| StorageRequest -isRepeat|Whether the task is repeated.| boolean -repeatCycleTime |Repeat interval.| number -repeatCount |Number of repeat times.| number -parameters |Carried parameters.| {[key: string]: any} +workId| number | Work ID. Mandatory. +bundleName| string | Name of the Work Scheduler task bundle. Mandatory. +abilityName| string | Name of the component to be notified by a Work Scheduler callback. Mandatory. +networkType | [NetworkType](../reference/apis/js-apis-workScheduler.md#networktype) | Network type. +isCharging| boolean | Whether the device is charging. +chargerType| [ChargingType](../reference/apis/js-apis-workScheduler.md#chargingtype) | Charging type. +batteryLevel| number | Battery level. +batteryStatus| [BatteryStatus](../reference/apis/js-apis-workScheduler.md#batterystatus) | Battery status. +storageRequest| [StorageRequest](../reference/apis/js-apis-workScheduler.md#storagerequest) |Storage status. +isRepeat| boolean |Whether the task is repeated. +repeatCycleTime| number |Repeat interval. +repeatCount | number|Number of repeat times. +parameters | {[key: string]: any} |Carried parameters. **Table 3** Work Scheduler callbacks - Name | Description - ------------------------------------------- | ---------------------------------------------- - onWorkStart(work: WorkInfo): void; | Triggered when the Work Scheduler task starts. - onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler task stops. +Name | Description +---------------------------------------------------------|----------------------------------------- +onWorkStart(work: WorkInfo): void | Triggered when the Work Scheduler task starts. +onWorkStop(work: WorkInfo): void | Triggered when the Work Scheduler task stops. ### How to Develop