diff --git a/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md b/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md index 14a5ed2b9a6fee26af15baabfeb07470e9a0f658..f0a38ede3b18acb04b2286651afa9fe2d9ae8a25 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md +++ b/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md @@ -18,15 +18,15 @@ import InputMethodSubtype from '@ohos.InputMethodSubtype'; **System capability**: SystemCapability.MiscServices.InputMethodFramework -| Name| Type| Readable| Writable| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -------- | -| label | string | Yes| No| No| Label of the input method subtype.| -| labelId10+ | string | Yes| No| No| Label ID of the input method subtype.| -| name | string | Yes| No| Yes| Bundle name of the input method.| -| id | string | Yes| No| Yes| ID of the input method subtype.| -| mode | string | Yes| No| No| Mode of the input method subtype, including **upper** (uppercase) and **lower** (lowercase).| -| locale | string | Yes| No| Yes| Locale of the input method subtype.| -| language | string | Yes| No| Yes| Language of the input method subtype.| -| icon | string | Yes| No| No| Icon of the input method subtype.| -| iconId | number | Yes| No| No| Icon ID of the input method subtype.| -| extra | object | Yes| Yes| No| Extra information of the input method subtype.
**NOTE**
This parameter is optional since API version 10.| +| Name| Type| Readable| Writable| Description| +| -------- | -------- | -------- | -------- | -------- | +| label | string | Yes| No| Optional. Label of the input method subtype.| +| labelId10+ | string | Yes| No| Optional. Label ID of the input method subtype.| +| name | string | Yes| No| Mandatory. Bundle name of the input method.| +| id | string | Yes| No| Mandatory. ID of the input method subtype.| +| mode | string | Yes| No| Optional. Mode of the input method subtype, including **upper** (uppercase) and **lower** (lowercase).| +| locale | string | Yes| No| Mandatory. Locale of the input method subtype.| +| language | string | Yes| No| Mandatory. Language of the input method subtype.| +| icon | string | Yes| No| Optional. Icon of the input method subtype. It can be obtained by using **iconId**. This parameter is reserved.| +| iconId | number | Yes| No| Optional. Icon ID of the input method subtype.| +| extra | object | Yes| Yes| Optional. Extra information of the input method subtype. This parameter is reserved and currently has no specific meaning.
**NOTE**
This parameter is optional since API version 10.| diff --git a/en/application-dev/reference/apis/js-apis-inputmethod.md b/en/application-dev/reference/apis/js-apis-inputmethod.md index 553c448b9a148406d548ae6bae0fcfe864d95eb9..b7f0b58fda7dc1f3c1b79d840d39756db8ceeb29 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethod.md +++ b/en/application-dev/reference/apis/js-apis-inputmethod.md @@ -35,9 +35,9 @@ Describes the input method application attributes. | id9+ | string | Yes| No| Mandatory. Unique ID of the input method.| | label9+ | string | Yes| No| Optional. External name of the input method.| | labelId10+ | string | Yes| No| Optional. External ID of the input method.| -| icon9+ | string | Yes| No| Optional. Icon of the input method.| +| icon9+ | string | Yes| No| Optional. Icon of the input method. It can be obtained by using **iconId**. This parameter is reserved.| | iconId9+ | number | Yes| No| Optional. Icon ID of the input method.| -| extra9+ | object | Yes| Yes| Extra information about the input method.
- API version 10 and later: optional
- API version 9: mandatory| +| extra9+ | object | Yes| Yes| Extra information about the input method. This parameter is reserved and currently has no specific meaning.
- API version 10 and later: optional
- API version 9: mandatory| | packageName(deprecated) | string | Yes| No| Name of the input method package. Mandatory.
**NOTE**
This API is supported since API version 8 and deprecated since API version 9. You are advised to use **name**.| | methodId(deprecated) | string | Yes| No| Unique ID of the input method. Mandatory.
**NOTE**
This API is supported since API version 8 and deprecated since API version 9. You are advised to use **id**.| @@ -154,15 +154,15 @@ Switches to another input method. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -|target | [InputMethodProperty](#inputmethodproperty8)| Yes| Input method to switch to.| + | Name| Type| Mandatory| Description| + | -------- | -------- | -------- | -------- | + |target | [InputMethodProperty](#inputmethodproperty8)| Yes| Input method to switch to.| **Return value** -| Type | Description | -| ----------------------------------------- | ---------------------------- | -| Promise\ | Promise used to return the result. The value **true** means that the switching is successful, and **false** means the opposite.| + | Type | Description | + | ----------------------------------------- | ---------------------------- | + | Promise\ | Promise used to return the result. The value **true** means that the switching is successful, and **false** means the opposite.| **Error codes** @@ -606,9 +606,12 @@ Describes the configuration of the editor component. When the editor component r **System capability**: SystemCapability.MiscServices.InputMethodFramework -| Name| Type| Readable| Writable| Description| +| Name| Type| Read-only| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| inputAttribute10+ | [InputAttribute](#inputattribute10) | Yes| Yes| Edit box attribute.| +| inputAttribute10+ | [InputAttribute](#inputattribute10) | No| Yes| Edit box attribute.| +| cursorInfo10+ | [CursorInfo](#cursorinfo10) | No| No| Cursor information.| +| selection10+ | [Range](#range10) | No| No| Text selection range.| +| windowId10+ | number | No| No| ID of the window where the editor component is located.| ## CursorInfo10+ @@ -1684,7 +1687,7 @@ try { ### off('insertText')10+ -off(type: 'insertText'): void +off(type: 'insertText', callback?: (text: string) => void): void Disables listening for the text insertion event of the input method. @@ -1692,13 +1695,18 @@ Disables listening for the text insertion event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'insertText'** indicates the text insertion event.| +| Name | Type | Mandatory| Description | +| -------- | ---------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'insertText'** indicates the text insertion event.| +| callback | (text: string) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onInsertTextCallback = (text: string) => { + console.log(`Succeeded in subscribing insertText: ${text}`); +}; +inputMethodController.off('insertText', onInsertTextCallback); inputMethodController.off('insertText'); ``` @@ -1773,7 +1781,7 @@ try { ``` ### off('deleteLeft')10+ -off(type: 'deleteLeft'): void +off(type: 'deleteLeft', callback?: (length: number) => void): void Disables listening for the backward delete event. @@ -1781,19 +1789,24 @@ Disables listening for the backward delete event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'deleteLeft'** indicates the backward delete event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'deleteLeft'** indicates the backward delete event.| +| callback | (length: number) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onDeleteLeftCallback = (length: number) => { + console.log(`Succeeded in subscribing deleteLeft, length: ${length}`); +}; +inputMethodController.off('deleteLeft', onDeleteLeftCallback); inputMethodController.off('deleteLeft'); ``` ### off('deleteRight')10+ -off(type: 'deleteRight'): void +off(type: 'deleteRight', callback?: (length: number) => void): void Disables listening for the forward delete event. @@ -1801,19 +1814,24 @@ Disables listening for the forward delete event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'deleteRight'** indicates the forward delete event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'deleteRight'** indicates the forward delete event.| +| callback | (length: number) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onDeleteRightCallback = (length: number) => { + console.log(`Succeeded in subscribing deleteRight, length: ${length}`); +}; +inputMethodController.off('deleteRight', onDeleteRightCallback); inputMethodController.off('deleteRight'); ``` ### on('sendKeyboardStatus')10+ -on(type: 'sendKeyboardStatus', callback: (keyBoardStatus: KeyboardStatus) => void): void +on(type: 'sendKeyboardStatus', callback: (keyboardStatus: KeyboardStatus) => void): void Enables listening for the keyboard status event of the input method. This API uses an asynchronous callback to return the result. @@ -1824,7 +1842,7 @@ Enables listening for the keyboard status event of the input method. This API us | Name | Type | Mandatory| Description | | -------- | ------ | ---- | ---- | | type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| -| callback | (keyBoardStatus: [KeyboardStatus](#keyboardstatus10)) => void | Yes | Callback used to return the keyboard status.
Your application needs to perform operations based on the keyboard state returned in the callback.| +| callback | (keyboardStatus: [KeyboardStatus](#keyboardstatus10)) => void | Yes | Callback used to return the keyboard status.
Your application needs to perform operations based on the keyboard state returned in the callback.| **Error codes** @@ -1838,8 +1856,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e ```js try { - inputMethodController.on('sendKeyboardStatus', (keyBoardStatus) => { - console.log(`Succeeded in subscribing sendKeyboardStatus, keyBoardStatus: ${keyBoardStatus}`); + inputMethodController.on('sendKeyboardStatus', (keyboardStatus) => { + console.log(`Succeeded in subscribing sendKeyboardStatus, keyboardStatus: ${keyboardStatus}`); }); } catch(err) { console.error(`Failed to subscribe sendKeyboardStatus: ${JSON.stringify(err)}`); @@ -1848,7 +1866,7 @@ try { ### off('sendKeyboardStatus')10+ -off(type: 'sendKeyboardStatus'): void +off(type: 'sendKeyboardStatus', callback?: (keyboardStatus: KeyboardStatus) => void): void Disables listening for the keyboard status event of the input method. @@ -1856,13 +1874,18 @@ Disables listening for the keyboard status event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| +| callback | (keyboardStatus: [KeyboardStatus](#keyboardstatus10)) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSendKeyboardStatus = (keyboardStatus: KeyboardStatus) => { + console.log(`Succeeded in subscribing sendKeyboardStatus, keyboardStatus: ${keyboardStatus}`); +}; +inputMethodController.off('sendKeyboardStatus', onSendKeyboardStatus); inputMethodController.off('sendKeyboardStatus'); ``` @@ -1903,7 +1926,7 @@ try { ### off('sendFunctionKey')10+ -off(type: 'sendFunctionKey'): void +off(type: 'sendFunctionKey', callback?: (functionKey: FunctionKey) => void): void Disables listening for the function key sending event of the input method. @@ -1911,13 +1934,18 @@ Disables listening for the function key sending event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'sendFunctionKey'** indicates the function key sending event.| +| Name | Type | Mandatory| Description | +| -------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'sendFunctionKey'** indicates the function key sending event.| +| callback | (functionKey: [FunctionKey](#functionkey10)) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSendFunctionKey = (functionKey: FunctionKey) => { + console.log(`Succeeded in subscribing sendFunctionKey, functionKey: ${functionKey.enterKeyType}`); +}; +inputMethodController.off('sendFunctionKey', onSendFunctionKey); inputMethodController.off('sendFunctionKey'); ``` @@ -1958,7 +1986,7 @@ try { ### off('moveCursor')10+ -off(type: 'moveCursor'): void +off(type: 'moveCursor', callback?: (direction: Direction) => void): void Disables listening for the cursor movement event of the input method. @@ -1969,10 +1997,15 @@ Disables listening for the cursor movement event of the input method. | Name | Type | Mandatory| Description | | ------ | ------ | ---- | ---- | | type | string | Yes | Listening type.
The value **'moveCursor'** indicates the cursor movement event.| +| callback | (direction: [Direction10+](#direction10)) => void | No| Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onMoveCursorCallback = (direction: Direction) => { + console.log(`Succeeded in subscribing moveCursor, direction: ${direction}`); +}; +inputMethodController.off('moveCursor', onMoveCursorCallback); inputMethodController.off('moveCursor'); ``` @@ -2013,7 +2046,7 @@ try { ### off('handleExtendAction')10+ -off(type: 'handleExtendAction'): void +off(type: 'handleExtendAction', callback?: (action: ExtendAction) => void): void Disables listening for the extended action handling event of the input method. @@ -2024,10 +2057,15 @@ Disables listening for the extended action handling event of the input method. | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------- | | type | string | Yes | Listening type.
The value **'handleExtendAction'** indicates the extended action handling event.| +| callback | (action: [ExtendAction](#extendaction10)) => void | No| Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onHandleExtendActionCallback = (action: ExtendAction) => { + console.log(`Succeeded in subscribing handleExtendAction, action: ${action}`); +}; +inputMethodController.off('handleExtendAction', onHandleExtendActionCallback); inputMethodController.off('handleExtendAction'); ``` @@ -2056,7 +2094,7 @@ inputMethodController.on('selectByRange', (range) => { ### off('selectByRange')10+ -off(type: 'selectByRange'): void +off(type: 'selectByRange', callback?: Callback<Range>): void Disables listening for the select-by-range event. @@ -2064,13 +2102,18 @@ Disables listening for the select-by-range event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'selectByRange'** indicates the select-by-range event.| +| Name | Type | Mandatory| Description | +| -------- | --------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'selectByRange'** indicates the select-by-range event.| +| callback | Callback<[Range](#range10)> | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSelectByRangeCallback = (range: Range) => { + console.log(`Succeeded in subscribing selectByRange, range: ${JSON.stringify(range)}`); +}; +inputMethodController.off('selectByRange', onSelectByRangeCallback); inputMethodController.off('selectByRange'); ``` @@ -2099,7 +2142,7 @@ inputMethodController.on('selectByMovement', (movement) => { ### off('selectByMovement')10+ -off(type: 'selectByMovement'): void +off(type: 'selectByMovement', callback?: Callback<Movement>): void Disables listening for the select-by-cursor-movement event. @@ -2107,13 +2150,18 @@ Disables listening for the select-by-cursor-movement event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'selectByMovement'** indicates the select-by-cursor-movement event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'selectByMovement'** indicates the select-by-cursor-movement event.| +| callback | Callback<[Movement](#movement10)> | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSelectByMovementCallback = (movement: Movement) => { + console.log(`Succeeded in subscribing selectByMovement, movement.direction: ${movement.direction}`); +}; +inputMethodController.off('selectByMovement', onSelectByMovementCallback); inputMethodController.off('selectByMovement'); ``` @@ -2132,6 +2180,14 @@ Enables listening for the event of obtaining the length of text deleted backward | type | string | Yes | Listening type.
The value **'getLeftTextOfCursor'** indicates the event of obtaining the length of text deleted backward.| | callback | (length: number) => string | Yes | Callback used to obtain the text of the specified length deleted backward.
In this callback, obtain the text of the specified length on the left of the cursor in the latest state of the edit box and return the text.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2150,7 +2206,7 @@ try { off(type: 'getLeftTextOfCursor', callback?: (length: number) => string): void; -Disables listening for the event of obtaining the length of text deleted backward. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the length of text deleted backward. **System capability**: SystemCapability.MiscServices.InputMethodFramework @@ -2190,6 +2246,14 @@ Enables listening for the event of obtaining the length of text deleted forward. | type | string | Yes | Listening type.
The value **'getRightTextOfCursor'** indicates the event of obtaining the length of text deleted forward.| | callback | (length: number) => string | Yes | Callback used to obtain the text of the specified length deleted forward.
In this callback, obtain the text of the specified length on the right of the cursor in the latest state of the edit box and return the text.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2208,7 +2272,7 @@ try { off(type: 'getRightTextOfCursor', callback?: (length: number) => string): void; -Disables listening for the event of obtaining the length of text deleted forward. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the length of text deleted forward. **System capability**: SystemCapability.MiscServices.InputMethodFramework @@ -2248,6 +2312,14 @@ Enables listening for the event of obtaining the index of text at the cursor. Th | type | string | Yes | Listening type.
The value **'getTextIndexAtCursor'** indicates the event of obtaining the index of text at the cursor.| | callback | () => number | Yes | Callback used to obtain the index of text at the cursor.
In this callback, obtain the index of text at the cursor in the latest state of the edit box and return the index.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2266,7 +2338,7 @@ try { off(type: 'getTextIndexAtCursor', callback?: () => number): void; -Disables listening for the event of obtaining the index of text at the cursor. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the index of text at the cursor. **System capability**: SystemCapability.MiscServices.InputMethodFramework diff --git a/en/application-dev/reference/apis/js-apis-inputmethodengine.md b/en/application-dev/reference/apis/js-apis-inputmethodengine.md index 36e504d702912c310765d0afc448ebffc9a34517..7b8283d50367e9cd121bd84c714347992e6e1bb7 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethodengine.md +++ b/en/application-dev/reference/apis/js-apis-inputmethodengine.md @@ -923,6 +923,50 @@ inputMethodEngine.getKeyboardDelegate().off('textChange', (text) => { }); ``` +### on('editorAttributeChanged')10+ + +on(type: 'editorAttributeChanged', callback: (attr: EditorAttribute) => void): void + +Enables listening for the edit box attribute change event. This API uses an asynchronous callback to return the result. + +**System capability**: SystemCapability.MiscServices.InputMethodFramework + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'editorAttributeChanged'** indicates the edit box attribute change event.| +| callback | (attr: EditorAttribute) => void | Yes | Callback used to return the edit box attribute change.| + +**Example** + +```js +inputMethodEngine.getKeyboardDelegate().on('editorAttributeChanged', (attr) => { + console.log(`Succeeded in receiving attribute of editor, inputPattern = ${attr.inputPattern}, enterKeyType = ${attr.enterKeyType}`); +}); +``` + +### off('editorAttributeChanged')10+ + +off(type: 'editorAttributeChanged', callback?: (attr: EditorAttribute) => void): void + +Cancels listening for the edit box attribute change event. + +**System capability**: SystemCapability.MiscServices.InputMethodFramework + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'editorAttributeChanged'** indicates the edit box attribute change event.| +| callback | (attr: EditorAttribute) => void | No | Callback for the edit box attribute change event. It must correspond to the one in the **on** API.| + +**Example** + +```js +inputMethodEngine.getKeyboardDelegate().off('editorAttributeChanged'); +``` + ## Panel10+ In the following API examples, you must first use **[createPanel](#createpanel10)** to obtain a **Panel** instance, and then call the APIs using the obtained instance. diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index ae261c21ebc5779e283e8e4e19d1355de9216cda..adea4c22a9473f43b8092d0314918537ecaa98b6 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -208,7 +208,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100010 | Can not post message using this port. | - ### onMessageEventExt10+ onMessageEventExt(callback: (result: WebMessageExt) => void): void @@ -358,7 +357,7 @@ window.addEventListener('message', function(event) { h5Port = event.ports[0]; // 1. Save the port number sent from the eTS side. h5Port.onmessage = function(event) { console.log("hwd In html got message"); - // 2. Receive the message sent from the ArkTS side. + // 2. Receive the message sent from the eTS side. var result = event.data; console.log("In html got message, typeof: ", typeof(result)); console.log("In html got message, result: ", (result)); @@ -401,7 +400,7 @@ window.addEventListener('message', function(event) { } }) -// Use h5Port to send a message of the string type to the ArkTS side. +// Use h5Port to send a message of the string type to the ets side. function postStringToApp() { if (h5Port) { console.log("In html send string message"); @@ -638,7 +637,7 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - // The headers parameter is carried. + // The headers parameter is passed. this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -999,7 +998,7 @@ struct WebComponent { onActive(): void -Invoked to instruct the **\** component to enter the foreground, active state. +Invoked to instruct the **\** component to enter the active foreground state. **System capability**: SystemCapability.Web.Webview.Core @@ -1348,12 +1347,14 @@ HTML file to be loaded: - Hello world! + +

@@ -3866,7 +3867,7 @@ struct WebComponent { getCertificate(): Promise> -Obtains the certificate information of the current website. When the \ component is used to load an HTTPS website, SSL certificate verification is performed. This API uses a promise to return the [X.509 certificate](./js-apis-cert.md) of the current website. +Obtains the certificate information of this website. When the **\** component is used to load an HTTPS website, SSL certificate verification is performed. This API uses a promise to return the [X.509 certificate](./js-apis-cert.md) of the current website. **System capability**: SystemCapability.Web.Webview.Core @@ -3943,7 +3944,7 @@ struct Index { } .type(ButtonType.Capsule) .onClick(() => { - //Load an HTTPS website and view the certificate information of the website. + // Load an HTTPS website and view the certificate information of the website. this.webviewCtl.loadUrl('https://www.example.com') }) .height(50) @@ -4023,7 +4024,7 @@ struct Index { getCertificate(callback: AsyncCallback>): void -Obtains the certificate information of the current website. When the \ component is used to load an HTTPS website, SSL certificate verification is performed. This API uses an asynchronous callback to return the [X.509 certificate](./js-apis-cert.md) of the current website. +Obtains the certificate information of this website. When the **\** component is used to load an HTTPS website, SSL certificate verification is performed. This API uses an asynchronous callback to return the [X.509 certificate](./js-apis-cert.md) of the website. **System capability**: SystemCapability.Web.Webview.Core @@ -4031,7 +4032,7 @@ Obtains the certificate information of the current website. When the \ comp | Name | Type | Mandatory| Description | | -------- | ---------------------------- | ---- | ---------------------------------------- | -| callback | AsyncCallback> | Yes | Callback used to obtain the X.509 certificate array of the current HTTPS website.| +| callback | AsyncCallback> | Yes | Callback used to obtain the X.509 certificate array of the current website.| **Error codes** @@ -4100,7 +4101,7 @@ struct Index { } .type(ButtonType.Capsule) .onClick(() => { - //Load an HTTPS website and view the certificate information of the website. + // Load an HTTPS website and view the certificate information of the website. this.webviewCtl.loadUrl('https://www.example.com') }) .height(50) @@ -4222,10 +4223,111 @@ struct WebComponent { } ``` +### prefetchPage10+ + +prefetchPage(url: string, additionalHeaders?: Array\): void + +Prefetches resources in the background for a page that is likely to be accessed in the near future, without executing the page JavaScript code or presenting the page. This can significantly reduce the load time for the prefetched page. + +**System capability**: SystemCapability.Web.Webview.Core + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------------------| --------------------------------| ---- | ------------- | +| url | string | Yes | URL to be preloaded.| +| additionalHeaders | Array\<[WebHeader](#webheader)> | No | Additional HTTP headers of the URL.| + +**Error codes** + +For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md). + +| ID | Error Message | +| -------- | ------------------------------------------------------------ | +| 17100001 | Init error. The WebviewController must be associated with a Web component. | +| 17100002 | Invalid url. | + +**Example** + +```ts +// xxx.ets +import web_webview from '@ohos.web.webview' + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + + build() { + Column() { + Button('prefetchPopularPage') + .onClick(() => { + try { + // Replace 'https://www.example.com' with a real URL for the API to work. + this.controller.prefetchPage('https://www.example.com'); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + // Replace ''www.example1.com' with a real URL for the API to work. + Web({ src: 'www.example1.com', controller: this.controller }) + } + } +} +``` + +### prepareForPageLoad10+ + +static prepareForPageLoad(url: string, preconnectable: boolean, numSockets: number): void + +Preconnects to a URL. This API can be called before the URL is loaded, to resolve the DNS and establish a socket connection, without obtaining the resources. + +**System capability**: SystemCapability.Web.Webview.Core + +**Parameters** + +| Name | Type | Mandatory | Description | +| ---------------| ------- | ---- | ------------- | +| url | string | Yes | URL to be preconnected.| +| preconnectable | boolean | Yes | Whether to perform preconnection, which involves DNS resolution and socket connection establishment. The value **true** means to perform preconnection, and **false** means the opposite.| +| numSockets | number | Yes | Number of sockets to be preconnected. The value must be greater than 0. A maximum of six socket connections are allowed.| + +**Error codes** + +For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md). + +| ID | Error Message | +| -------- | ------------------------------------------------------------ | +| 17100002 | Invalid url. | +| 171000013| The number of preconnect sockets is invalid. | + +**Example** + +```ts +// xxx.ts +import UIAbility from '@ohos.app.ability.UIAbility'; +import web_webview from '@ohos.web.webview'; + +export default class EntryAbility extends UIAbility { + onCreate(want, launchParam) { + console.log("EntryAbility onCreate") + web_webview.WebviewController.initializeWebEngine() + // Replace 'https://www.example.com' with a real URL for the API to work. + web_webview.WebviewController.prepareForPageLoad("https://www.example.com", true, 2); + globalThis.abilityWant = want + console.log("EntryAbility onCreate done") + } +} +``` + ## WebCookieManager Implements a **WebCookieManager** instance to manage behavior of cookies in **\** components. All **\** components in an application share a **WebCookieManager** instance. +> **NOTE** +> +> You must load the **\** component before calling APIs in **WebCookieManager**. + ### getCookie static getCookie(url: string): string @@ -4347,7 +4449,6 @@ Saves the cookies in the memory to the drive. This API uses an asynchronous call | -------- | ---------------------- | ---- | :------------------------------------------------- | | callback | AsyncCallback\ | Yes | Callback used to return whether the cookies are successfully saved.| - **Example** ```ts @@ -4688,6 +4789,10 @@ struct WebComponent { Implements a **WebStorage** object to manage the Web SQL database and HTML5 Web Storage APIs. All **\** components in an application share a **WebStorage** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **WebStorage**. + ### deleteOrigin static deleteOrigin(origin : string): void @@ -5148,6 +5253,10 @@ struct WebComponent { Implements a **WebDataBase** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **WebDataBase**. + ### getHttpAuthCredentials static getHttpAuthCredentials(host: string, realm: string): Array\ @@ -5326,6 +5435,10 @@ struct WebComponent { Implements a **GeolocationPermissions** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **GeolocationPermissions**. + ### Required Permissions **ohos.permission.LOCATION**, **ohos.permission.APPROXIMATELY_LOCATION**, and **ohos.permission.LOCATION_IN_BACKGROUND**, which are required for accessing the location information. For details about the permissions, see [@ohos.geolocation (Geolocation)](./js-apis-geolocation.md). @@ -5739,7 +5852,6 @@ Describes the type of the returned result of script execution using [runJavaScir | ARRAY_BUFFER | 4 |Raw binary data buffer.| | ARRAY | 5 |Array type.| - ## WebMessageType10+ Describes the data type supported by the [webMessagePort](#webmessageport) API. @@ -5796,7 +5908,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ### getNumber10+ getNumber(): number @@ -5841,7 +5952,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ### getArrayBuffer10+ getArrayBuffer(): ArrayBuffer @@ -5885,7 +5995,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ## WebMessageExt10+ Data object received and sent by the [webMessagePort](#webmessageport) interface. @@ -5904,7 +6013,6 @@ Obtains the type of the data object. | --------------| --------------------------------------------------------- | | [WebMessageType](#webmessagetype10) | Data type supported by the [webMessagePort](#webmessageport) API.| - ### getString10+ getString(): string @@ -5927,7 +6035,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getNumber10+ getNumber(): number @@ -5950,7 +6057,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getBoolean10+ getBoolean(): boolean @@ -5973,7 +6079,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getArrayBuffer10+ getArrayBuffer(): ArrayBuffer @@ -6039,7 +6144,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### setType10+ setType(type: WebMessageType): void @@ -6180,7 +6284,6 @@ Sets the error-object-type data for the data object. For the complete sample cod | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ## WebStorageOrigin Provides usage information of the Web SQL Database. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index 2d6b3bab8f6c8dfeef3c2b65b3068d1546d4b652..b3c50c96f5760173ce05f46a39423aaef86d1e3b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -107,32 +107,31 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ``` 2. Modify the **EntryAbility.ts** file. + The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths). + ```ts + // xxx.ts + import UIAbility from '@ohos.app.ability.UIAbility'; + import web_webview from '@ohos.web.webview'; + + export default class EntryAbility extends UIAbility { + onCreate(want, launchParam) { + // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI. + globalThis.filesDir = this.context.filesDir + console.log("Sandbox path is " + globalThis.filesDir) + } + } + ``` - The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths). - ```ts - // xxx.ts - import UIAbility from '@ohos.app.ability.UIAbility'; - import web_webview from '@ohos.web.webview'; - - export default class EntryAbility extends UIAbility { - onCreate(want, launchParam) { - // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI. - globalThis.filesDir = this.context.filesDir - console.log("Sandbox path is " + globalThis.filesDir) - } - } - ``` - - HTML file to be loaded: - ```html - - - - -

Hello World

- - - ``` + HTML file to be loaded: + ```html + + + + +

Hello World

+ + + ``` ## Attributes @@ -672,12 +671,16 @@ Sets whether to display the vertical scrollbar, including the default system scr ``` -### password +### password(deprecated) password(password: boolean) Sets whether the password should be saved. This API is a void API. +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + ### cacheMode cacheMode(cacheMode: CacheMode) @@ -993,7 +996,6 @@ Sets the minimum logical font size for the web page. } ``` - ### webFixedFont9+ webFixedFont(family: string) @@ -1244,18 +1246,26 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea } ``` -### tableData +### tableData(deprecated) tableData(tableData: boolean) Sets whether form data should be saved. This API is a void API. -### wideViewModeAccess +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + +### wideViewModeAccess(deprecated) wideViewModeAccess(wideViewModeAccess: boolean) Sets whether to support the viewport attribute of the HTML **\** tag. This API is a void API. +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + ### pinchSmooth9+ pinchSmooth(isEnabled: boolean) @@ -1386,7 +1396,6 @@ Sets the web-based media playback policy, including the validity period for auto **Example** - ```ts // xxx.ets import web_webview from '@ohos.web.webview' @@ -1941,7 +1950,6 @@ Called when an HTTP error (the response code is greater than or equal to 400) oc onPageBegin(callback: (event?: { url: string }) => void) - Called when the web page starts to be loaded. This API is called only for the main frame content, and not for the iframe or frameset content. **Parameters** @@ -1976,7 +1984,6 @@ Called when the web page starts to be loaded. This API is called only for the ma onPageEnd(callback: (event?: { url: string }) => void) - Called when the web page loading is complete. This API takes effect only for the main frame content. **Parameters** @@ -2979,7 +2986,7 @@ If opening a new window is not needed, set the parameter to **null** when callin ```ts // xxx.ets import web_webview from '@ohos.web.webview' - + // There are two components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed. @CustomDialog struct NewWebViewComp { @@ -3335,8 +3342,8 @@ Called when the web page content is first rendered. Column() { Web({ src:'www.example.com', controller: this.controller }) .onFirstContentfulPaint(event => { - console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + - event.navigationStartTick + ", [firstContentfulPaintMs]:" + + console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + + event.navigationStartTick + ", [firstContentfulPaintMs]:" + event.firstContentfulPaintMs) }) } @@ -3415,7 +3422,156 @@ Called when the **\** component obtains the focus. } } ``` +### onScreenCaptureRequest10+ + +onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void) + +Called when a screen capture request is received. + +**Parameters** + +| Name | Type | Description | +| ------- | ---------------------------------------- | -------------- | +| handler | [ScreenCaptureHandler](#screencapturehandler10) | User operation.| + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onScreenCaptureRequest((event) => { + AlertDialog.show({ + title: 'title: ' + event.handler.getOrigin(), + message: 'text', + primaryButton: { + value: 'deny', + action: () => { + event.handler.deny() + } + }, + secondaryButton: { + value: 'onConfirm', + action: () => { + event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }) + } + }, + cancel: () => { + event.handler.deny() + } + }) + }) + } + } + } + ``` +### onOverScroll10+ + +onOverScroll(callback: (event: {xOffset: number, yOffset: number}) => void) + +Called to indicate the offset by which the web page overscrolls. + +**Parameters** + +| Name | Type | Description | +| ------- | ------ | ------------ | +| xOffset | number | Horizontal overscroll offset based on the leftmost edge of the web page.| +| yOffset | number | Vertical overscroll offset based on the top edge of the web page.| + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onOverScroll((event) => { + console.info("x = " + event.xOffset) + console.info("y = " + event.yOffset) + }) + } + } + } + ``` + +### onControllerAttached10+ + +onControllerAttached(callback: () => void) + +Called when the controller is successfully bound to the **\** component. The controller must be WebviewController. +As the web page is not yet loaded when this callback is called, APIs for operating the web page cannot be used in the callback, for example, [zoomIn](../apis/js-apis-webview.md#zoomin) and [zoomOut]. (../apis/js-apis-webview.md#zoomout). Other APIs, such as [loadUrl] (../apis/js-apis-webview.md#loadurl) and [getWebId] (../apis/js-apis-webview.md#getwebid), which do not involve web page operations, can be used properly. + +**Example** + +The following example uses **loadUrl** in the callback to load the web page. + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + + build() { + Column() { + Web({ src: '', controller: this.controller }) + .onControllerAttached(() => { + this.controller.loadUrl($rawfile("index.html")); + }) + } + } + } + ``` +The following example uses **getWebId** in the callback + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + + build() { + Column() { + Web({ src: $rawfile("index.html"), controller: this.controller }) + .onControllerAttached(() => { + try { + let id = this.controller.getWebId(); + console.log("id: " + id); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + } + } + } + ``` + HTML file to be loaded: + ```html + + + + +

Hello World

+ + + ``` ## ConsoleMessage Implements the **ConsoleMessage** object. For the sample code, see [onConsole](#onconsole). @@ -3470,7 +3626,7 @@ Obtains the path and name of the web page source file. ## JsResult -Implements the **JsResult** object, which indicates the result returned to the **\** component to indicate the user operation performed in the dialog box. For the sample code, see [onAlert](#onalert). +Implements the **JsResult** object, which indicates the result returned to the **\** component to indicate the user operation performed in the dialog box. For the sample code, see [onAlert Event](#onalert). ### handleCancel @@ -3635,7 +3791,6 @@ Describes the request/response header returned by the **\** component. | headerKey | string | Key of the request/response header. | | headerValue | string | Value of the request/response header.| - ## WebResourceResponse Implements the **WebResourceResponse** object. For the sample code, see [onHttpErrorReceive](#onhttperrorreceive). @@ -4010,6 +4165,42 @@ Grants the permission for resources requested by the web page. | --------- | --------------- | ---- | ---- | ------------- | | resources | Array\ | Yes | - | List of resources that can be requested by the web page with the permission to grant.| +## ScreenCaptureHandler10+ + +Implements the **ScreenCaptureHandler** object for accepting or rejecting a screen capture request. For the sample code, see [onScreenCaptureRequest Event](#onscreencapturerequest10). + +### deny10+ + +deny(): void + +Rejects this screen capture request. + +### getOrigin10+ + +getOrigin(): string + +Obtains the origin of this web page. + +**Return value** + +| Type | Description | +| ------ | ------------ | +| string | Origin of the web page that requests the permission.| + +### grant10+ + +grant(config: ScreenCaptureConfig): void + +**Required permissions**: ohos.permission.MICROPHONE, ohos.permission.CAPTURE_SCREEN + +Grants the screen capture permission. + +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| --------- | --------------- | ---- | ---- | ------------- | +| config | [ScreenCaptureConfig](#screencaptureconfig10) | Yes | - | Screen capture configuration.| + ## ContextMenuSourceType9+ | Name | Description | | -------------------- | ---------- | @@ -4327,6 +4518,7 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. | --------- | ------------- | -------------------------- | | MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.| | VIDEO_CAPTURE10+ | Video capture resource, such as a camera.| | +| AUDIO_CAPTURE10+ | Audio capture resource, such as a microphone.| | ## WebDarkMode9+ | Name | Description | @@ -4335,6 +4527,12 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. | On | The web dark mode is enabled. | | Auto | The web dark mode setting follows the system settings. | +## WebCaptureMode10+ + +| Name | Description | +| --------- | ------------- | +| HOME_SCREEN | Capture of the home screen.| + ## WebMediaOptions10+ Describes the web-based media playback policy. @@ -4344,6 +4542,14 @@ Describes the web-based media playback policy. | resumeInterval | number | Yes | Yes | No |Validity period for automatically resuming a paused web audio, in seconds. The maximum validity period is 60 seconds. Due to the approximate value, the validity period may have a deviation of less than 1 second.| | audioExclusive | boolean | Yes | Yes | No | Whether the audio of multiple **\** instances in an application is exclusive. | +## ScreenCaptureConfig10+ + +Provides the web screen capture configuration. + +| Name | Type | Readable| Writable| Mandatory| Description | +| -------------- | --------- | ---- | ---- | --- | ---------------------------- | +| captureMode | [WebCaptureMode](#webcapturemode10) | Yes | Yes | Yes | Web screen capture mode.| + ## DataResubmissionHandler9+ Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. @@ -4653,7 +4859,7 @@ This API is deprecated since API version 9. You are advised to use [forward deleteJavaScriptRegister(name: string) -Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the[refresh](#refreshdeprecated) API. +Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the [refresh](#refreshdeprecated) API. This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister) instead. diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 7f0b8291246271cef1d8b9e82394004c051cf491..5630bcc7f24f2b40dca403a2b14cba04e37a8213 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -40,13 +40,13 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Description | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
- When the type is number, this attribute indicates the color of the fill area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| -| [lineWidth](#linewidth) | number | Line width. | -| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
- When the type is number, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
Default value: **'black'**
- When the type is number, this attribute indicates the color of the fill area.
Default value: **'#000000'**
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [lineWidth](#linewidth) | number | Line width.
Default value: **1(px)** | +| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
Default value: **'black'**
- When the type is number, this attribute indicates the stroke color.
Default value: **'#000000'**
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| | [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. 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 by adding a box with an equal width and half the height of the line's thickness.
Default value: **'butt'**
Since API version 9, this API is supported in ArkTS widgets.| | [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.
- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments has a mitered 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'**
Since API version 9, this API is supported in ArkTS widgets.| | [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**
Since API version 9, this API is supported in ArkTS widgets.| -| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (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 must be specified and can only be px or vp.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| +| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (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 must be specified and can only be px or vp.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| | [textAlign](#textalign) | CanvasTextAlign | 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'**
Since API version 9, this API is supported in ArkTS widgets.| | [textBaseline](#textbaseline) | CanvasTextBaseline | 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 excess 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'**
Since API version 9, this API is supported in ArkTS widgets.| | [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque.
Since API version 9, this API is supported in ArkTS widgets.| @@ -59,8 +59,8 @@ Since API version 9, this API is supported in ArkTS widgets. | [imageSmoothingEnabled](#imagesmoothingenabled) | 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**
Since API version 9, this API is supported in ArkTS widgets.| | [height](#height) | number | Component height.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| | [width](#width) | number | Component width.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| -| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**. Available values are as follows:
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'high'**: high quality.
Default value: **'low'**
Since API version 9, this API is supported in ArkTS widgets.| -| [direction](#direction) | CanvasDirection | Text direction used for drawing text. Available values are as follows:
- **'inherit'**: The text direction is inherited from the **\** component.
- **'ltr'**: The text direction is from left to right.
- **'rtl'**: The text direction is from right to left.
Default value: **'inherit'**
Since API version 9, this API is supported in ArkTS widgets.| +| [imageSmoothingQuality](#imagesmoothingquality) |[ImageSmoothingQuality](ts-appendix-enums.md#imagesmoothingquality8) | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**.
Default value: **ImageSmoothingQuality.low**
Since API version 9, this API is supported in ArkTS widgets.| +| [direction](#direction) | [CanvasDirection](ts-appendix-enums.md#canvasdirection8) | Text direction used for drawing text.
Default value: **CanvasDirection.inherit**
Since API version 9, this API is supported in ArkTS widgets.| | [filter](#filter) | string | Filter effect. Available values are as follows:
- **'none'**: no filter effect.
- **'blur'**: applies the Gaussian blur for the image.
- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.
- **'contrast'**: adjusts the image contrast.
- **'grayscale'**: converts the image to a grayscale image.
- **'hue-rotate'**: applies hue rotation to the image.
- **'invert'**: inverts the input image.
- **'opacity'**: sets the opacity of the image.
- **'saturate'**: sets the saturation of the image.
- **'sepia'**: converts the image to dark brown.
Default value: **'none'**
Since API version 9, this API is supported in ArkTS widgets.| > **NOTE** @@ -719,6 +719,136 @@ struct WidthExample { ![en-us_image_canvas_width](figures/en-us_image_canvas_width.png) +### imageSmoothingQuality + +```ts + // xxx.ets + @Entry + @Component + struct ImageSmoothingQualityDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.imageSmoothingEnabled = true + ctx.imageSmoothingQuality = 'high' + ctx.drawImage(this.img, 0, 0, 400, 200) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) + + +### direction + +```ts + // xxx.ets + @Entry + @Component + struct DirectionDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.font = '48px serif'; + ctx.textAlign = 'start' + ctx.fillText("Hi ltr!", 200, 50); + + ctx.direction = "rtl"; + ctx.fillText("Hi rtl!", 200, 100); + }) + } + .width('100%') + .height('100%') + } + } +``` + +![directionDemo](figures/directionDemo.jpeg) + + +### filter + +```ts + // xxx.ets + @Entry + @Component + struct FilterDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + let img = this.img + + ctx.drawImage(img, 0, 0, 100, 100); + + ctx.filter = 'grayscale(50%)'; + ctx.drawImage(img, 100, 0, 100, 100); + + ctx.filter = 'sepia(60%)'; + ctx.drawImage(img, 200, 0, 100, 100); + + ctx.filter = 'saturate(30%)'; + ctx.drawImage(img, 0, 100, 100, 100); + + ctx.filter = 'hue-rotate(90degree)'; + ctx.drawImage(img, 100, 100, 100, 100); + + ctx.filter = 'invert(100%)'; + ctx.drawImage(img, 200, 100, 100, 100); + + ctx.filter = 'opacity(25%)'; + ctx.drawImage(img, 0, 200, 100, 100); + + ctx.filter = 'brightness(0.4)'; + ctx.drawImage(img, 100, 200, 100, 100); + + ctx.filter = 'contrast(200%)'; + ctx.drawImage(img, 200, 200, 100, 100); + + ctx.filter = 'blur(5px)'; + ctx.drawImage(img, 0, 300, 100, 100); + + let result = ctx.toDataURL() + console.info(result) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![filterDemo](figures/filterDemo.jpeg) + ## Methods @@ -734,8 +864,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | @@ -780,8 +910,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------ | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -826,8 +956,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -875,8 +1005,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | '' | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| +| x | number | Yes | 0 | X coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width allowed for the text. | **Example** @@ -922,8 +1052,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | '' | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| +| x | number | Yes | 0 | X coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width of the text to be drawn. | **Example** @@ -1130,8 +1260,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | -| x | number | Yes | 0 | X-coordinate of the target position.| -| y | number | Yes | 0 | Y-coordinate of the target position.| +| x | number | Yes | 0 | X coordinate of the target position.| +| y | number | Yes | 0 | Y coordinate of the target position.| **Example** @@ -1177,8 +1307,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | -| x | number | Yes | 0 | X-coordinate of the target position.| -| y | number | Yes | 0 | Y-coordinate of the target position.| +| x | number | Yes | 0 | X coordinate of the target position.| +| y | number | Yes | 0 | Y coordinate of the target position.| **Example** @@ -1319,12 +1449,12 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------- | -| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| -| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| -| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve.| -| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve.| -| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | -| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | +| cp1x | number | Yes | 0 | X coordinate of the first parameter of the bezier curve.| +| cp1y | number | Yes | 0 | Y coordinate of the first parameter of the bezier curve.| +| cp2x | number | Yes | 0 | X coordinate of the second parameter of the bezier curve.| +| cp2y | number | Yes | 0 | Y coordinate of the second parameter of the bezier curve.| +| x | number | Yes | 0 | X coordinate of the end point on the bezier curve. | +| y | number | Yes | 0 | Y coordinate of the end point on the bezier curve. | **Example** @@ -1370,10 +1500,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | -| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| -| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| -| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.| -| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.| +| cpx | number | Yes | 0 | X coordinate of the bezier curve parameter.| +| cpy | number | Yes | 0 | Y coordinate of the bezier curve parameter.| +| x | number | Yes | 0 | X coordinate of the end point on the bezier curve.| +| y | number | Yes | 0 | Y coordinate of the end point on the bezier curve.| **Example** @@ -1419,8 +1549,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------- | -| x | number | Yes | 0 | X-coordinate of the center point of the arc.| -| y | number | Yes | 0 | Y-coordinate of the center point of the arc.| +| x | number | Yes | 0 | X coordinate of the center point of the arc.| +| y | number | Yes | 0 | Y coordinate of the center point of the arc.| | radius | number | Yes | 0 | Radius of the arc. | | startAngle | number | Yes | 0 | Start radian of the arc. | | endAngle | number | Yes | 0 | End radian of the arc. | @@ -1469,10 +1599,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | --------------- | -| x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| -| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| -| x2 | number | Yes | 0 | X-coordinate of the second point on the arc.| -| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.| +| x1 | number | Yes | 0 | X coordinate of the first point on the arc.| +| y1 | number | Yes | 0 | Y coordinate of the first point on the arc.| +| x2 | number | Yes | 0 | X coordinate of the second point on the arc.| +| y2 | number | Yes | 0 | Y coordinate of the second point on the arc.| | radius | number | Yes | 0 | Radius of the arc. | **Example** @@ -1518,8 +1648,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------------------------------------- | -| x | number | Yes | 0 | X-coordinate of the ellipse center. | -| y | number | Yes | 0 | Y-coordinate of the ellipse center. | +| x | number | Yes | 0 | X coordinate of the ellipse center. | +| y | number | Yes | 0 | Y coordinate of the ellipse center. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | @@ -1570,8 +1700,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -1802,97 +1932,6 @@ Since API version 9, this API is supported in ArkTS widgets. ![en-us_image_000000127777779](figures/en-us_image_000000127777779.png) -### filter - -filter(filter: string): void - -Provides filter effects. - -Since API version 9, this API is supported in ArkTS widgets. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------ | ------ | ---- | ---- | ---------------------------------------- | -| filter | string | Yes | - | Filter functions. Available values are as follows:
- **'none'**: no filter effect.
- **'blur'**: applies the Gaussian blur for the image.
- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.
- **'contrast'**: adjusts the image contrast.
- **'grayscale'**: converts the image to a grayscale image.
- **'hue-rotate'**: applies hue rotation to the image.
- **'invert'**: inverts the input image.
- **'opacity'**: sets the opacity of the image.
- **'saturate'**: sets the saturation of the image.
- **'sepia'**: converts the image to dark brown.
Default value: **'none'**| - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct FilterDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - let img = this.img - - ctx.drawImage(img, 0, 0, 100, 100); - - ctx.filter = 'grayscale(50%)'; - ctx.drawImage(img, 100, 0, 100, 100); - - ctx.filter = 'sepia(60%)'; - ctx.drawImage(img, 200, 0, 100, 100); - - ctx.filter = 'saturate(30%)'; - ctx.drawImage(img, 0, 100, 100, 100); - - ctx.filter = 'hue-rotate(90degree)'; - ctx.drawImage(img, 100, 100, 100, 100); - - ctx.filter = 'invert(100%)'; - ctx.drawImage(img, 200, 100, 100, 100); - - ctx.filter = 'opacity(25%)'; - ctx.drawImage(img, 0, 200, 100, 100); - - ctx.filter = 'brightness(0.4)'; - ctx.drawImage(img, 100, 200, 100, 100); - - ctx.filter = 'contrast(200%)'; - ctx.drawImage(img, 200, 200, 100, 100); - - ctx.filter = 'blur(5px)'; - ctx.drawImage(img, 0, 300, 100, 100); - - let result = ctx.toDataURL() - console.info(result) - }) - } - .width('100%') - .height('100%') - } - } -``` - -![filterDemo](figures/filterDemo.jpeg) - - -### getTransform - -getTransform(): Matrix2D - -Obtains the current transformation matrix being applied to the context. This API is a void API. - -Since API version 9, this API is supported in ArkTS widgets. - -**Return value** - -| Type | Description | -| ---------------------------------------- | ----- | -| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.| - - ### resetTransform resetTransform(): void @@ -1902,47 +1941,6 @@ Resets the current transform to the identity matrix. This API is a void API. Since API version 9, this API is supported in ArkTS widgets. -### direction - -direction(direction: CanvasDirection): void - -Sets the current text direction used to draw text. - -Since API version 9, this API is supported in ArkTS widgets. - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct DirectionDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - ctx.font = '48px serif'; - ctx.textAlign = 'start' - ctx.fillText("Hi ltr!", 200, 50); - - ctx.direction = "rtl"; - ctx.fillText("Hi rtl!", 200, 100); - }) - } - .width('100%') - .height('100%') - } - } -``` - -![directionDemo](figures/directionDemo.jpeg) - ### rotate rotate(angle: number): void @@ -2152,7 +2150,7 @@ Since API version 9, this API is supported in ArkTS widgets. setTransform(transform?: Matrix2D): void -Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API. +Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. Since API version 9, this API is supported in ArkTS widgets. @@ -2162,6 +2160,66 @@ Since API version 9, this API is supported in ArkTS widgets. | --------- | ---------------------------------------- | ---- | ---- | ----- | | transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | null | Transformation matrix.| +### getTransform + +getTransform(): Matrix2D + +Obtains the current transformation matrix being applied to the context. + +Since API version 9, this API is supported in ArkTS widgets. + +**Return value** + +| Type | Description | +| ---------------------------------------- | ----- | +| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.| + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct TransFormDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('context1'); + Canvas(this.context1) + .width('230vp') + .height('120vp') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context1.fillRect(50, 50, 50, 50); + this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); + this.context1.fillRect(50, 50, 50, 50); + }) + Text('context2'); + Canvas(this.context2) + .width('230vp') + .height('120vp') + .backgroundColor('#0ffff0') + .onReady(() =>{ + this.context2.fillRect(50, 50, 50, 50); + let storedTransform = this.context1.getTransform(); + console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + + ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + + ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") + this.context2.setTransform(storedTransform); + this.context2.fillRect(50,50,50,50); + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![en-us_image_0000001219982726.png](figures/en-us_image_0000001219982726.png) + ### translate translate(x: number, y: number): void @@ -2225,12 +2283,12 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel | Name | Type | Mandatory | Default Value | Description | | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or PixelMap. | -| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | -| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | +| sx | number | No | 0 | X coordinate of the upper left corner of the rectangle used to crop the source image. | +| sy | number | No | 0 | Y coordinate of the upper left corner of the rectangle used to crop the source image. | | sw | number | No | 0 | Target width to crop the source image. | | sh | number | No | 0 | Target height to crop the source image. | -| dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. | -| dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. | +| dx | number | Yes | 0 | X coordinate of the upper left corner of the drawing area on the canvas. | +| dy | number | Yes | 0 | Y coordinate of the upper left corner of the drawing area on the canvas. | | dw | number | No | 0 | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.| | dh | number | No | 0 | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.| @@ -2310,8 +2368,8 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | -| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| -| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| +| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area.| +| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area.| | sw | number | Yes | 0 | Width of the output area. | | sh | number | Yes | 0 | Height of the output area. | @@ -2333,8 +2391,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | -| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| -| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| +| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area.| +| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area.| | sw | number | Yes | 0 | Width of the output area. | | sh | number | Yes | 0 | Height of the output area. | @@ -2537,52 +2595,6 @@ Since API version 9, this API is supported in ArkTS widgets. ![en-us_image_000000127777778](figures/en-us_image_000000127777778.png) - -### imageSmoothingQuality - -imageSmoothingQuality(quality: imageSmoothingQuality) - -Sets the quality of image smoothing. - -Since API version 9, this API is supported in ArkTS widgets. - - **Parameters** - -| Name | Type | Description | -| ------- | --------------------- | ---------------------------------------- | -| quality | imageSmoothingQuality | Quality of image smoothing.
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'high'**: high quality.| - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct ImageSmoothingQualityDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - ctx.imageSmoothingEnabled = true - ctx.imageSmoothingQuality = 'high' - ctx.drawImage(this.img, 0, 0, 400, 200) - }) - } - .width('100%') - .height('100%') - } - } -``` - -![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) - ### transferFromImageBitmap transferFromImageBitmap(bitmap: ImageBitmap): void @@ -2775,10 +2787,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | -| x0 | number | Yes | 0 | X-coordinate of the start point.| -| y0 | number | Yes | 0 | Y-coordinate of the start point.| -| x1 | number | Yes | 0 | X-coordinate of the end point.| -| y1 | number | Yes | 0 | Y-coordinate of the end point.| +| x0 | number | Yes | 0 | X coordinate of the start point.| +| y0 | number | Yes | 0 | Y coordinate of the start point.| +| x1 | number | Yes | 0 | X coordinate of the end point.| +| y1 | number | Yes | 0 | Y coordinate of the end point.| **Example** @@ -2826,11 +2838,11 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------------- | -| x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | -| y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | +| x0 | number | Yes | 0 | X coordinate of the center of the start circle. | +| y0 | number | Yes | 0 | Y coordinate of the center of the start circle. | | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number.| -| x1 | number | Yes | 0 | X-coordinate of the center of the end circle. | -| y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | +| x1 | number | Yes | 0 | X coordinate of the center of the end circle. | +| y1 | number | Yes | 0 | Y coordinate of the center of the end circle. | | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| **Example** @@ -2877,8 +2889,8 @@ Creates a conic gradient. | Name | Type | Mandatory | Default Value | Description | | ---------- | ------ | ---- | ---- | ----------------------------------- | | startAngle | number | Yes | 0 | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.| -| x | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. | -| y | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. | +| x | number | Yes | 0 | X coordinate of the center of the conic gradient, in vp. | +| y | number | Yes | 0 | Y coordinate of the center of the conic gradient, in vp. | **Example** diff --git a/en/application-dev/reference/errorcodes/errorcode-webview.md b/en/application-dev/reference/errorcodes/errorcode-webview.md index de75c73269bcad4b4777c237b729543bc871b24d..216adc30e558829714579a2e6bc56ad6d9b02bd4 100644 --- a/en/application-dev/reference/errorcodes/errorcode-webview.md +++ b/en/application-dev/reference/errorcodes/errorcode-webview.md @@ -230,23 +230,23 @@ The related JS database API is not used. 2. If the JS database API is used, find out the failure cause, for example, check whether **databaseAccess** is enabled. -## 17100013 Memory Allocation Failure +## 17100013 Invalid Number of Sockets During Preconnection **Error Message** -New failed, out of memeory. +The number of preconnect sockets is invalid. **Description** -Memory allocation failed due to insufficient memory. +This error code is reported when the number of sockets to be preconnected is invalid. **Possible Causes** -The data to send is too large. +The number of sockets is less than or equal to 0 or greater than 6. **Solution** -Check the length of the data to be sent. +Make sure the specified number of sockets is greater than 0 and less than or equal to 6. ## 17100014 Type and Value Mismatch @@ -257,7 +257,7 @@ The type does not match with the value of the message. **Description** -The type and value of the message do not match. +This error code is reported when the type and value of the message do not match. **Possible Causes** @@ -266,3 +266,22 @@ The value of the obtained message does not match the type of the message. **Solution** Call the API based on the message type to obtain the message value. For example, if the type is **BOOLEAN**, call the **GetBoolean** API to obtain the Boolean value. + + +## 17100015 Memory Allocation Failure + +**Error Message** + +New failed, out of memeory. + +**Description** + +This error code is reported when memory allocation failed due to insufficient memory. + +**Possible Causes** + +The data to send is too large. + +**Solution** + +Check the length of the data to be sent. diff --git a/en/application-dev/web/web-in-page-app-function-invoking.md b/en/application-dev/web/web-in-page-app-function-invoking.md index 59db2424cf051bcbe9c858c09e8c719939477c49..e5132f18e4a2a2e668233d1da7f8405d6dc611e2 100644 --- a/en/application-dev/web/web-in-page-app-function-invoking.md +++ b/en/application-dev/web/web-in-page-app-function-invoking.md @@ -89,7 +89,7 @@ The following example registers the **test()** function with the frontend page. > **NOTE** > - > If you use [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) to register a function, call **[refresh()]**(../reference/apis/js-apis-webview.md#refresh) for the function to take effect. + > If you use [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) to register a function, call [refresh()](../reference/apis/js-apis-webview.md#refresh) for the function to take effect. - Sample code for invoking application functions on the **index.html** frontend page: @@ -103,7 +103,7 @@ The following example registers the **test()** function with the frontend page.