## Introduction to EnterpriseAdminExtensionAbility
## Introduction to EnterpriseAdminExtensionAbility
...
@@ -8,34 +8,35 @@ EnterpriseAdminExtensionAbility is a mandatory component for Mobile Device Manag
...
@@ -8,34 +8,35 @@ EnterpriseAdminExtensionAbility is a mandatory component for Mobile Device Manag
EnterpriseAdminExtensionAbility is applicable only to enterprise administrator applications.
EnterpriseAdminExtensionAbility is applicable only to enterprise administrator applications.
## Observing Activation/Deactivation of a Device Administrator Application and Installation/Removal of an Application
## Observing Activation/Deactivation of a Device Administrator Application and Installation/Uninstallation of an Application
### Overview
### Overview
**onAdminEnabled**: When an enterprise administrator or employee deploys an MDM application and activates the device administrator application, this callback is invoked to notify the MDM application that the DeviceAdmin permission is activated. The initialization policy of the MDM application can set in **onAdminEnabled**.
**onAdminEnabled**: called when an enterprise administrator or employee deploys an MDM application and enables the DeviceAdmin permission for the application. The MDM application can set the initialization policy in the **onAdminEnabled** callback.
**onAdminDisabled**: When the device administrator application is deactivated, the callback is invoked to notify the MDM application that the DeviceAdmin permission is deactivated.
**onAdminDisabled**: called when the system or employee disables the DeviceAdmin permission to notify the enterprise administrator that the device is no longer managed.
**onBundleAdded**: The enterprise administrator can subscribe to application installation and uninstallation events. When an application is installed on an enterprise device, the MDM application reports the event in this callback to notify the enterprise administrator.
**onBundleAdded**: The enterprise administrator can subscribe to application installation events. When an application is installed on an enterprise device, the MDM application reports the event in this callback to notify the enterprise administrator.
**onBundleRemoved**: When an application is removed from an enterprise device, the MDM application reports the event in this callback to notify the enterprise administrator.
**onBundleRemoved**: The enterprise administrator can subscribe to application uninstallation events. When an application is uninstalled on an enterprise device, the MDM application reports the event in this callback to notify the enterprise administrator.
| EnterpriseAdminExtensionAbility | onAdminEnabled(): void | Called when a device administrator application is activated. |
| EnterpriseAdminExtensionAbility | onAdminEnabled(): void | Called when the device administrator application is disabled. |
| EnterpriseAdminExtensionAbility | onAdminDisabled(): void | Called when a device administrator application is deactivated.|
| EnterpriseAdminExtensionAbility | onAdminDisabled(): void | Called when the device administrator application is enabled.|
| EnterpriseAdminExtensionAbility | onBundleAdded(bundleName: string): void | Called when an application is installed on a device. |
| EnterpriseAdminExtensionAbility | onBundleAdded(bundleName: string): void | Called when the MDM application is installed. |
| EnterpriseAdminExtensionAbility | onBundleRemoved(bundleName: string): void | Called when an application is removed from a device. |
| EnterpriseAdminExtensionAbility | onBundleRemoved(bundleName: string): void | Called when the MDM application is uninstalled. |
### How to Develop
### How to Develop
To implement EnterpriseAdminExtensionAbility, you need to activate the device administrator application and create **ExtensionAbility** in the code directory of the device administrator application. The procedure is as follows:
To implement EnterpriseAdminExtensionAbility, you need to activate the device administrator application and create **ExtensionAbility** in the code directory of the device administrator application. The procedure is as follows:
1. In the **ets** directory of the target module, right-click and choose **New > Directory** to create a directory named **EnterpriseExtAbility**.
1. In the **ets** directory of the target module, right-click and choose **New > Directory** to create a directory named **EnterpriseExtAbility**.
2. Right-click the **EnterpriseExtAbility** directory, and choose **New > TypeScript File** to create a file named **EnterpriseExtAbility.ts**.
2. Right-click the **EnterpriseExtAbility** directory and choose **New > TypeScript File** to create a file named **EnterpriseExtAbility.ts**.
3. Open the **EnterpriseExtAbility.ts** file and import the **EnterpriseAdminExtensionAbility** module. Inherit the **EnterpriseAdminExtensionAbility** module to the custom class and add application notification callbacks, such as **onAdminEnabled()** and **onAdminDisabled()**. When the device administrator application is activated or deactivated, the device administrator can receive notifications.
3. Open the **EnterpriseExtAbility.ts** file and import the **EnterpriseAdminExtensionAbility** module. Customize a class that inherits from **EnterpriseAdminExtensionAbility** and add the required callbacks, such as **onAdminEnabled()** and **onAdminDisabled()**, When the device administrator application is activated or deactivated, the device administrator can receive notifications.
@@ -5,6 +5,8 @@ The **Animator** module provides APIs for applying animation effects, including
...
@@ -5,6 +5,8 @@ The **Animator** module provides APIs for applying animation effects, including
> **NOTE**
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
| condition | string | Yes | Media query condition. For details, see [Syntax of Media Query Conditions](../../ui/arkts-layout-development-media-query.md#syntax).|
| condition | string | Yes | Media query condition. For details, see [Syntax](../../ui/arkts-layout-development-media-query.md#syntax).|
**Return value**
**Return value**
...
@@ -146,7 +148,7 @@ struct MediaQueryExample {
...
@@ -146,7 +148,7 @@ struct MediaQueryExample {
}
}
aboutToAppear(){
aboutToAppear(){
letportraitFunc=this.onPortrait.bind(this)// Bind the current JS instance.
letportraitFunc=this.onPortrait.bind(this)// Bind the JS instance.
@@ -4,7 +4,7 @@ The **PluginComponentManager** module provides APIs for the **PluginComponent**
...
@@ -4,7 +4,7 @@ The **PluginComponentManager** module provides APIs for the **PluginComponent**
> **NOTE**
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
## Modules to Import
...
@@ -18,10 +18,10 @@ Describes the **PluginComponent** template parameters.
...
@@ -18,10 +18,10 @@ Describes the **PluginComponent** template parameters.
| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. |
| want | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. |
| name | string | Yes | Name of the requested component. |
| name | string | Yes | Name of the requested component. |
| data | [KVObject](#kvobject) | Yes | Additional data. |
| data | [KVObject](#kvobject) | Yes | Additional data. |
| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.|
| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.|
### RequestParameterForStage
### RequestParameterForStage
...
@@ -103,13 +103,13 @@ Sets the parameters to be passed in the **PluginManager.Request** API in the sta
...
@@ -103,13 +103,13 @@ Sets the parameters to be passed in the **PluginManager.Request** API in the sta
| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. |
| owner | [Want](js-apis-application-want.md) | Yes | Ability information of the component user. |
| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. |
| target | [Want](js-apis-application-want.md) | Yes | Ability information of the component provider. |
| name | string | Yes | Name of the requested component. |
| name | string | Yes | Name of the requested component. |
| data | [KVObject](#kvobject) | Yes | Additional data. |
| data | [KVObject](#kvobject) | Yes | Additional data. |
| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.|
| jsonPath | string | No | Path to the [external.json](#about-the-externaljson-file) file that stores the template path. Request communication is not triggered when **jsonPath** is not empty or not set.|
### RequestCallbackParameters
### RequestCallbackParameters
...
@@ -117,11 +117,11 @@ Provides the result returned after the **PluginManager.Request** API is called.
...
@@ -117,11 +117,11 @@ Provides the result returned after the **PluginManager.Request** API is called.
| param | [RequestParameters](#requestparameters) | Yes | Information about the component request. |
| param | [RequestParameters](#requestparameters)| Yes | Information about the component request. |
| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters)\| void> | Yes | Asynchronous callback used to return the requested data.|
| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.|
**Example**
**Example**
...
@@ -332,10 +332,10 @@ Requests the component from the component provider.
...
@@ -332,10 +332,10 @@ Requests the component from the component provider.
| param | [RequestParameterForStage](#requestparameterforstage) | Yes | Information about the component request. |
| param | [RequestParameterForStage](#requestparameterforstage)| Yes | Information about the component request. |
| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters)\| void> | Yes | Asynchronous callback used to return the requested data.|
| callback | AsyncCallback<[RequestCallbackParameters](#requestcallbackparameters) \| void> | Yes | Asynchronous callback used to return the requested data.|
**Example**
**Example**
...
@@ -371,10 +371,10 @@ Listens for events of the request type and returns the requested data, or listen
...
@@ -371,10 +371,10 @@ Listens for events of the request type and returns the requested data, or listen
| eventType | string | Yes | Type of the event to listen for. The options are as follows:<br>**"push"**: The component provider pushes data to the component consumer.<br>**"request"**: The component consumer proactively requests data from the component provider. |
| eventType | string | Yes | Type of the event to listen for. The options are as follows:<br>**"push"**: The component provider pushes data to the component consumer.<br>**"request"**: The component consumer proactively requests data from the component provider.|
| callback | [OnPushEventCallback](#onpusheventcallback)\|[OnRequestEventCallback](#onrequesteventcallback) | Yes | Callback used to return the result. The type is [OnPushEventCallback](#onpusheventcallback) for the push event and [OnRequestEventCallback](#onrequesteventcallback) for the request event.|
| callback | [OnPushEventCallback](#onpusheventcallback) \| [OnRequestEventCallback](#onrequesteventcallback) | Yes | Callback used to return the result. The type is [OnPushEventCallback](#onpusheventcallback) for the push event and [OnRequestEventCallback](#onrequesteventcallback) for the request event.|
**Example**
**Example**
...
@@ -396,4 +396,4 @@ The **external.json** file is created by developers. It stores component names a
...
@@ -396,4 +396,4 @@ The **external.json** file is created by developers. It stores component names a
@@ -5,6 +5,8 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo
...
@@ -5,6 +5,8 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo
> **NOTE**
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and make sure the canvas layout is complete. This API can be used together with the lifecycle callback **onReady()** of the **Canvas** component.
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.<br>Default value: **true**|
| autoplay | boolean | No | Whether to automatically play the animation<br>Default value: **true** |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. <br>Default value: **""** |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
destroy(name: string): void
Destroys the animation. This API must be called when a page exits. This API can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** API. By default, all animations are destroyed.|
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** API. By default, all animations are played.|
**Example**
```ts
lottie.play(this.animateName)
```
## lottie.pause
pause(name: string): void
Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused.|
**Example**
```ts
lottie.pause(this.animateName)
```
## lottie.togglePause
togglePause(name: string): void
Pauses or plays a specified animation. This API is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused or played.|
**Example**
```ts
lottie.togglePause(this.animateName)
```
## lottie.stop
stop(name: string): void
Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are stopped.|
**Example**
```ts
lottie.stop(this.animateName)
```
## lottie.setSpeed
setSpeed(speed: number, name: string): void
Sets the playback speed of the specified animation.
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is **0**, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are set.|
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are set.|
**Example**
```ts
lottie.setDirection(-1,this.animateName)
```
## AnimationItem
Defines an **AnimationItem** object, which is returned by the **loadAnimation** API and has attributes and APIs. The attributes are described as follows:
| isLoaded | boolean | Whether the animation is loaded. |
| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points.|
| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
| firstFrame | number | First frame of the animation segment that is being played. |
| totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). |
| frameMult | number | Frame rate (frame/ms). |
| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is **0**, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| playDirection | number | Playback direction.<br>**1**: forward.<br/>**-1**: backward. |
| playCount | number | Number of times the animation plays. |
| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** API needs to be called to start playing.|
| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
| renderer | any | Animation rendering object, which depends on the rendering type. |
| animationID | string | Animation ID. |
| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**.|
| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
## AnimationItem.play
play(name?: string): void
Plays an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation.<br>Default value: **""** |
**Example**
```ts
this.animateItem.play()
```
## AnimationItem.destroy
destroy(name?: string): void
Destroys an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.destroy()
```
## AnimationItem.pause
pause(name?: string): void
Pauses an animation. When the **play** API is called next time, the animation is played from the current frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.pause()
```
## AnimationItem.togglePause
togglePause(name?: string): void
Pauses or plays an animation. This API is equivalent to the switching between **play** and **pause**.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
```ts
this.animateItem.togglePause()
```
## AnimationItem.stop
stop(name?: string): void
Stops an animation. When the **play** API is called next time, the animation is played from the first frame.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress.<br>Default value: **false**|
| name | string | No | Name of the target animation. By default, the value is null. |
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndStop(25,true)
// Set the animation to stop at the specified time progress.
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress.<br>Default value: **false**|
| name | string | No | Name of the target animation.<br>Default value: **""** |
**Example**
```ts
// Set the animation to stop at the specified frame.
this.animateItem.goToAndPlay(25,true)
// Set the animation to stop at the specified time progress.
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
**Example**
```ts
// Set the animation to play the specified segment.
this.animateItem.playSegments([10,20],false)
// Set the animation to play the specified segment list.
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
**Example**
```ts
this.animateItem.resetSegments(true)
```
## AnimationItem.resize
resize(): void
Resizes the animation layout.
**Example**
```ts
this.animateItem.resize()
```
## AnimationItem.setSubframe
setSubframe(useSubFrame: boolean): void
Sets the precision of the **currentFrame** attribute to display floating-point numbers.
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
**Example**
```ts
this.animateItem.setSubframe(false)
```
## AnimationItem.getDuration
getDuration(inFrames?: boolean): void
Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** API.
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**|
Adds an event listener. After the event is complete, the specified callback is triggered. This API returns the function object that can delete the event listener.
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback<T> | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
@@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo
...
@@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo
## Click Event
## Click Event
A click event is triggered when a complete press and lift action performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
A click event is triggered when a complete press and lift action is performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
@@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways:
...
@@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways:
importlottiefrom'@ohos/lottie'
importlottiefrom'@ohos/lottie'
```
```
For details about the APIs, see [Lottie](../reference/arkui-ts/ts-components-canvas-lottie.md).
For details about the APIs, see [Lottie](https://gitee.com/openharmony-tpc/lottieETS).
>**NOTE**
>
>Before using Lottie for the first time, run the **ohpm install \@ohos/lottieETS** command in the Terminal window to download Lottie.
## Initializing the Canvas Component
## Initializing the Canvas Component
...
@@ -117,7 +113,7 @@ Canvas(this.context)
...
@@ -117,7 +113,7 @@ Canvas(this.context)
## Canvas Component Drawing Modes
## Canvas Component Drawing Modes
Two modes are available for drawing with the **Canvas** component:
Two modes are available for drawing with the **Canvas** component:
- After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
- After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
...
@@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
...
@@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
- Draw a basic shape.
- Draw a basic shape.
You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
```ts
```ts
Canvas(this.context)
Canvas(this.context)
.width('100%')
.width('100%')
...
@@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
...
@@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
})
})
```
```
.jpg)
.jpg)
- Draw text.
- Draw text.
You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
...
@@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
...
@@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
Interaction events are classified into touchscreen events, keyboard and mouse events, and focus events based on trigger types.
Interaction events are classified based on trigger types into touchscreen events, keyboard and mouse events, and focus events.
-[Touchscreen event](arkts-common-events-touch-screen-event.md): single-finger or single-stroke operation performed by a finger or stylus on the touchscreen.
-[Touchscreen event](arkts-common-events-touch-screen-event.md): an event triggered by the operation performed a finger or stylus on the touchscreen.
-[Keyboard and mouse event](arkts-common-events-device-input-event.md): includes operation events of the peripheral mouse or touchpad and key events of the peripheral keyboard.
-[Keyboard and mouse event](arkts-common-events-device-input-event.md): an event triggered by an operation performed on a peripheral mouse, touchpad, or keyboard.
- The mouse event refers to an event responded to when an operation is performed with a peripheral mouse/touchpad.
- The mouse event refers to an event responded to when an operation is performed with a peripheral mouse or touchpad.
- The key event refer to an event responded to when an operation is performed with a peripheral keyboard.
- The keyboard event refera to an event responded to when an operation is performed with a peripheral keyboard.
-[Focus event](arkts-common-events-focus-event.md): controls the focusability and response events of the component in the preceding ways.
-[Focus event](arkts-common-events-focus-event.md): an event triggered when a component receives or loses focus.
The gesture event includes the gesture binding method and the bound gesture. The bound gesture may be classified into two types: a single gesture and a combined gesture, and is distinguished according to complexity of the gesture.
The gesture event includes the gesture binding method and the bound gesture – a single or combined gesture.
-[Gesture binding](arkts-gesture-events-binding.md): binds a single gesture or a combination of gestures to a component and declares the response priority of the bound gesture.
-[Gesture binding method](arkts-gesture-events-binding.md): a method that binds a single or combined gesture to a component and declares the response priority of the bound gesture.
-[Single gesture](arkts-gesture-events-single-gesture.md): basic unit of a gesture, which is a part of all complex gestures.
-[Single gesture](arkts-gesture-events-single-gesture.md): basic unit of gestures, which is a part of all complex gestures.
-[Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of multiple single gestures. Multiple single gestures can be combined into a combined gesture according to a declared type and a certain rule, and the combined gesture can be used.
-[Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of single gestures brought together according to a declared type and a certain rule.
