Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“2ac5f5e85b802c01ab9b8d5bc46829e290c4e1d0”上不存在“plugins/mysqltest/git@gitcode.net:oceanbase/obdeploy.git”
提交 5919c0fe 编写于 作者: 关 关明月 提交者： Gitee
浏览文件
操作

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into OpenHarmony-3.1-Release 

Signed-off-by: N关明月 <guanmingyue@huawei.com>
上级 78c7b070 316bdcf4
隐藏空白更改
内联 并排
Showing with 4487 addition and 3695 deletion
en/application-dev/Readme-EN.md
浏览文件 @ 5919c0fe
......@@ -15,6 +15,7 @@
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [Resource File Categories](quick-start/basic-resource-file-categories.md)
- [SysCap](quick-start/syscap.md)
- Development
- [Ability Development](ability/Readme-EN.md)
......@@ -42,6 +43,9 @@
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- APIs
- [JS and TS APIs](reference/apis/Readme-EN.md)
- [JS and TS APIs](reference/apis/Readme-EN.md)
- Native APIs
- [Standard Libraries](reference/native-lib/third_party_libc/musl.md)
- [Node_API](reference/native-lib/third_party_napi/napi.md)
- Contribution
- [How to Contribute](../contribute/documentation-contribution.md)
en/application-dev/ability/ability-brief.md
浏览文件 @ 5919c0fe
......@@ -2,19 +2,19 @@
An ability is the abstraction of a functionality that an application can provide. It is the minimum unit for the system to schedule applications. An application can contain one or more `Ability` instances.
The ability framework model has two forms.
The ability framework model has two forms:
- FA model, which applies to application development using API version 8 and earlier versions. In the FA model, there are Feature Ability (FA) and Particle Ability (PA). The FA supports Page abilities, and the PA supports Service, Data, and Form abilities.
- Stage model, which is introduced since API version 9. In the stage model, there are Ability and ExtensionAbility. The ExtensionAbility is further extended to ServiceExtensionAbility, FormExtensionAbility, DataShareExtensionAbility, and more.
- FA model, which applies to application development using API version 8 and earlier versions. In the FA model, there is Feature Ability (FA) and Particle Ability (PA). The FA supports Page abilities, and the PA supports Service, Data, and Form abilities.
- Stage model, which is introduced since API version 9. In the stage model, there is `Ability` and `ExtensionAbility`. `ExtensionAbility` is further extended to `ServiceExtensionAbility`, `FormExtensionAbility`, `DataShareExtensionAbility`, and more.
The stage model is designed to make it easier to develop complex applications in the distributed environment. The table below lists the design differences between the two models.
| Item | FA Model | Stage Model |
| -------------- | ------------------------------------------------------------ | -------------------------------------------------------- |
| Development mode | Web-like APIs are provided. The UI development is the same as that of the stage model. | Object-oriented development mode is provided. The UI development is the same as that of the FA model. |
| Development mode | Web-like APIs are provided. The UI development is the same as that of the stage model. | Object-oriented development mode is provided. The UI development is the same as that of the FA model. |
| Engine instance | Each ability in a process exclusively uses a JS VM engine instance. | Multiple abilities in a process share one JS VM engine instance. |
| Intra-process object sharing| Not supported. | Supported. |
| Bundle description file | The `config.json` file is used to describe the HAP and component information. Each component must use a fixed file name.| The `module.json` file is used to describe the HAP and component information. The entry file name can be specified.|
| Bundle description file | The `config.json` file is used to describe the HAP and component information. Each component must use a fixed file name.| The `module.json5` file is used to describe the HAP and component information. The entry file name can be specified.|
| Component | Four types of components are provided: Page ability (used for UI page display), Service ability (used to provide services), Data ability (used for data sharing), and Form ability (used to provide widgets).| Two types of components are provided: Ability (used for UI page display) and Extension (scenario-based service extension). |
In addition, the following differences exist in the development process:
......@@ -27,5 +27,4 @@ In addition, the following differences exist in the development process:
![lifecycle](figures/lifecycle.png)
For details about the two models, see [FA Model Overview](fa-brief.md) and [Stage Model Overview](stage-brief.md).
en/application-dev/ability/stage-ability.md
浏览文件 @ 5919c0fe
# Ability Development
## When to Use
Ability development in the [stage model](stage-brief.md) is significantly different from that in the FA model. The stage model requires you to declare the application package structure in the `module.json` and `app.json` files during application development. For details about the configuration file, see [Application Package Structure Configuration File](../quick-start/stage-structure.md). To develop an ability based on the stage model, implement the following logic:
Ability development in the [stage model](stage-brief.md) is significantly different from that in the FA model. The stage model requires you to declare the application package structure in the `module.json5` and `app.json5` files during application development. For details about the configuration file, see [Application Package Structure Configuration File](../quick-start/stage-structure.md). To develop an ability based on the stage model, implement the following logic:
- Create an ability that supports screen viewing and human-machine interaction. You must implement the following scenarios: ability lifecycle callbacks, obtaining ability configuration, requesting permissions, and notifying environment changes.
- Start an ability. You need to implement ability startup on the same device, on a remote device, or with a specified UI page.
- Call abilities. For details, see [Call Development](stage-call.md).
......@@ -8,7 +8,7 @@ Ability development in the [stage model](stage-brief.md) is significantly differ
- Continue the ability on another device. For details, see [Ability Continuation Development](stage-ability-continuation.md).
### Launch Type
An ability can be launched in the **standard**, **singleton**, or **specified** mode, as configured by `launchType` in the `module.json` file. Depending on the launch type, the action performed when the ability is started differs, as described below.
An ability can be launched in the **standard**, **singleton**, or **specified** mode, as configured by `launchType` in the `module.json5` file. Depending on the launch type, the action performed when the ability is started differs, as described below.
| Launch Type | Description |Action |
| ----------- | ------- |---------------- |
......@@ -16,7 +16,7 @@ An ability can be launched in the **standard**, **singleton**, or **specified**
| singleton | Singleton | The ability has only one instance in the system. If an instance already exists when an ability is started, that instance is reused.|
| specified | Instance-specific| The internal service of an ability determines whether to create multiple instances during running.|
By default, the singleton mode is used. The following is an example of the `module.json` file:
By default, the singleton mode is used. The following is an example of the `module.json5` file:
```json
{
"module": {
......@@ -42,6 +42,7 @@ The table below describes the APIs provided by the `AbilityStage` class, which h
The table below describes the APIs provided by the `Ability` class. For details about the APIs, see [Ability](../reference/apis/js-apis-application-ability.md).
**Table 2** Ability APIs
|API|Description|
|:------|:------|
|onCreate(want: Want, param: AbilityConstant.LaunchParam): void|Called when an ability is created.|
......@@ -107,7 +108,10 @@ To create Page abilities for an application in the stage model, you must impleme
}
```
### Obtaining AbilityStage and Ability Configurations
Both the `AbilityStage` and `Ability` classes have the `context` attribute. An application can obtain the context of an `Ability` instance through `this.context` to obtain the configuration details. The following example shows how an application obtains the bundle code directory, HAP file name, ability name, and system language through the `context` attribute in the `AbilityStage` class. The sample code is as follows:
Both the `AbilityStage` and `Ability` classes have the `context` attribute. An application can obtain the context of an `Ability` instance through `this.context` to obtain the configuration details.
The following example shows how an application obtains the bundle code directory, HAP file name, ability name, and system language through the `context` attribute in the `AbilityStage` class. The sample code is as follows:
```ts
import AbilityStage from "@ohos.application.AbilityStage"
export default class MyAbilityStage extends AbilityStage {
......@@ -145,9 +149,9 @@ export default class MainAbility extends Ability {
}
```
### Requesting Permissions
If an application needs to obtain user privacy information or use system capabilities, for example, obtaining location information or using the camera to take photos or record videos, it must request the respective permission from consumers. During application development, you need to specify the involved sensitive permissions, declare the required permissions in `module.json`, and use the `requestPermissionsFromUser` API to request the permission from consumers in the form of a dialog box. The following uses the permission for calendar access as an example.
If an application needs to obtain user privacy information or use system capabilities, for example, obtaining location information or using the camera to take photos or record videos, it must request the respective permission from consumers. During application development, you need to specify the involved sensitive permissions, declare the required permissions in `module.json5`, and use the `requestPermissionsFromUser` API to request the permission from consumers in the form of a dialog box. The following uses the permission for calendar access as an example.
Declare the required permission in the `module.json` file.
Declare the required permission in the `module.json5` file.
```json
"requestPermissions": [
{
......@@ -269,7 +273,7 @@ function getRemoteDeviceId() {
```
Request the permission `ohos.permission.DISTRIBUTED_DATASYNC` from consumers. This permission is used for data synchronization. For details about the sample code for requesting the permission, see [Requesting Permissions](##requesting-permissions).
### Starting an Ability with the Specified Page
If the launch type of an ability is set to `singleton` and the ability has been started, the `onNewWant` callback rather than the `onCreate` callback is triggered when the ability is started again. You can pass start options through the `want`. For example, to start an ability with the specified page, use the `uri` or `parameters` parameter in the `want` to pass the page information. Currently, the ability in the stage model cannot directly use the `router` capability. You must pass the start options to the custom component and invoke the `router` method to display the specified page during the custom component lifecycle management. The sample code is as follows:
If the launch type of an ability is set to `singleton` and the ability has been started, the `onNewWant` callback is triggered when the ability is started again. You can pass start options through the `want`. For example, to start an ability with the specified page, use the `uri` or `parameters` parameter in the `want` to pass the page information. Currently, the ability in the stage model cannot directly use the `router` capability. You must pass the start options to the custom component and invoke the `router` method to display the specified page during the custom component lifecycle management. The sample code is as follows:
When using `startAbility` to start an ability again, use the `uri` parameter in the `want` to pass the page information.
```ts
......
en/application-dev/ability/stage-serviceextension.md
浏览文件 @ 5919c0fe
......@@ -61,9 +61,9 @@ OpenHarmony does not support creation of a Service Extension ability for third-p
2. Register the Service Extension ability.
Declare the Service Extension ability in the **module.json** file by setting its **type** attribute to **service**.
Declare the Service Extension ability in the **module.json5** file by setting its **type** attribute to **service**.
**module.json configuration example**
**module.json5 configuration example**
```json
"extensionAbilities":[{
......
en/application-dev/database/database-mdds-overview.md
浏览文件 @ 5919c0fe
# Distributed Data Service Overview<a name="EN-US_TOPIC_0000001183067628"></a>
# Distributed Data Service Overview
The distributed data service \(DDS\) implements distributed database collaboration across devices for applications. Applications save data to distributed databases by calling the DDS APIs. The DDS isolates data of different applications based on a triplet of account, application, and database to ensure secure data access. The DDS synchronizes application data between trusted devices to provide users with consistent data access experience on different devices.
The distributed data service (DDS) implements distributed database collaboration across devices for applications.
## Basic Concepts<a name="section17506141102520"></a>
Applications save data to distributed databases by calling the DDS APIs. The DDS isolates data of different applications based on a triplet of account, application, and database to ensure secure data access. The DDS synchronizes application data between trusted devices to provide users with consistent data access experience on different devices.
You do not need to care about the implementation of the database locking mechanism.
## Basic Concepts
- **KV data model**
......@@ -54,7 +58,7 @@ The distributed data service \(DDS\) implements distributed database collaborati
The DDS provides the database backup capability. You can set **backup** to **true** to enable daily backup. If a distributed database is damaged, the DDS deletes the database and restores the most recent data from the backup database. If no backup database is available, the DDS creates one. The DDS can also back up encrypted databases.
## Working Principles<a name="section315111581616"></a>
## Working Principles
The DDS supports distributed management of application database data in the OpenHarmony system. Data can be synchronized between multiple devices with the same account, delivering a consistent user experience across devices. The DDS consists of the following:
......@@ -86,7 +90,7 @@ Applications call the DDS APIs to create, access, and subscribe to distributed d
![](figures/en-us_image_0000001183386164.png)
## Constraints<a name="section95382010203311"></a>
## Constraints
- The DDS supports the KV data model only. It does not support foreign keys or triggers of the relational database.
- The KV data model specifications supported by the DDS are as follows:
......
en/application-dev/database/database-relational-guidelines.md
浏览文件 @ 5919c0fe
......@@ -2,7 +2,7 @@
## When to Use
A relational database (RDB) store allows you to operate local data with or without native SQL statements based on SQLite.
A relational database (RDB) store allows you to manage local data with or without native SQL statements based on SQLite.
## Available APIs
......@@ -21,11 +21,11 @@ The table below describes the APIs available for creating and deleting an RDB st
### Managing Data in an RDB Store
The RDB provides APIs for inserting, deleting, updating, and querying data in the local RDB store.
The **RDB** module provides APIs for inserting, deleting, updating, and querying data in a local RDB store.
- **Inserting Data**
The RDB provides APIs for inserting data through a **ValuesBucket** in a data table. If the data is inserted, the row ID of the data inserted will be returned; otherwise, **-1** will be returned.
The **RDB** module provides APIs for inserting data through a **ValuesBucket** in a data table. If the data is inserted, the row ID of the data inserted will be returned; otherwise, **-1** will be returned.
**Table 2** API for inserting data
......@@ -41,7 +41,7 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
| Class| API| Description|
| -------- | -------- | -------- |
| RdbStore | update(values:ValuesBucket,rdbPredicates:RdbPredicates):Promise\<number> | Updates data based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **values**: data to update, which is stored in **ValuesBucket**.<br>- **rdbPredicates**: conditions for updating data. |
| RdbStore | update(values:ValuesBucket,rdbPredicates:RdbPredicates):Promise\<number> | Updates data based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **values**: data to update, which is stored in **ValuesBucket**.<br>- **rdbPredicates**: conditions for updating data.|
- **Deleting Data**
......@@ -51,7 +51,7 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
| Class| API| Description|
| -------- | -------- | -------- |
| RdbStore | delete(rdbPredicates:RdbPredicates):Promise\<number> | Deletes data from the RDB store based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **rdbPredicates**: conditions for deleting data. |
| RdbStore | delete(rdbPredicates:RdbPredicates):Promise\<number> | Deletes data from the RDB store based on the specified **RdbPredicates** object. This API uses a promise to return the result.<br>Return value: number of rows updated.<br>- **rdbPredicates**: conditions for deleting data.|
- **Querying data**
......@@ -69,19 +69,19 @@ The RDB provides APIs for inserting, deleting, updating, and querying data in th
### Using Predicates
The RDB provides **RdbPredicates** for you to set database operation conditions.
The **RDB** module provides **RdbPredicates** for you to set database operation conditions.
The following lists common predicates. For more information about predicates, see [**RdbPredicates**](../reference/apis/js-apis-data-rdb.md#rdbpredicates).
The table below lists common predicates. For more information about predicates, see [**RdbPredicates**](../reference/apis/js-apis-data-rdb.md#rdbpredicates).
**Table 6** APIs for using RDB store predicates
| Class| API| Description|
| -------- | -------- | -------- |
| RdbPredicates | equalTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** to match the field with data type **ValueType** and value equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | notEqualTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** to match the field with data type **ValueType** and value not equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | or():RdbPredicates | Adds the OR condition to the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** with the OR condition.|
| RdbPredicates | and():RdbPredicates | Adds the AND condition to the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** with the AND condition.|
| RdbPredicates | contains(field:string,value:string):RdbPredicats | Sets an **RdbPredicates** to match a string that contains the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object that matches the specified field. |
| RdbPredicates | equalTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** object to match the field with data type **ValueType** and value equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
| RdbPredicates | notEqualTo(field:string,value:ValueType):RdbPredicates | Sets an **RdbPredicates** object to match the field with data type **ValueType** and value not equal to the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
| RdbPredicates | or():RdbPredicates | Adds the OR condition to the **RdbPredicates** object.<br>- **RdbPredicates**: **RdbPredicates** with the OR condition.|
| RdbPredicates | and():RdbPredicates | Adds the AND condition to the **RdbPredicates** object.<br>- **RdbPredicates**: **RdbPredicates** with the AND condition.|
| RdbPredicates | contains(field:string,value:string):RdbPredicats | Sets an **RdbPredicates** object to match a string that contains the specified value.<br>- **field**: column name in the database table.<br>- **value**: value to match the **RdbPredicates**.<br>- **RdbPredicates**: **RdbPredicates** object created.|
### Using the Result Set
......
en/application-dev/database/database-relational-overview.md
浏览文件 @ 5919c0fe
# RDB Overview<a name="EN-US_TOPIC_0000001231030607"></a>
# RDB Overview
The relational database \(RDB\) manages data based on relational models. With the underlying SQLite database, the RDB provides a complete mechanism for managing local databases. To satisfy different needs in complicated scenarios, the RDB offers a series of methods for performing operations such as adding, deleting, modifying, and querying data, and supports direct execution of SQL statements.
The relational database (RDB) manages data based on relational models. With the underlying SQLite database, the RDB provides a complete mechanism for managing local databases. To satisfy different needs in complicated scenarios, the RDB offers a series of methods for performing operations such as adding, deleting, modifying, and querying data, and supports direct execution of SQL statements.
## Basic Concepts<a name="section1063573420813"></a>
You do not need to care about the implementation of the database locking mechanism.
- **RDB**
## Basic concepts
A type of database based on the relational model of data. The RDB stores data in rows and columns. An RDB is also called RDB store.
- **RDB**
- **Predicate**
A type of database created on the basis of relational models. The RDB stores data in rows and columns. A RDB is also called RDB store.
A representation of the property or feature of a data entity, or the relationship between data entities. It is mainly used to define operation conditions.
- **Predicate**
- **Result set**
A representation of the property or feature of a data entity, or the relationship between data entities. It is mainly used to define operation conditions.
A set of query results used to access the data. You can access the required data in a result set in flexible modes.
- **Result set**
- **SQLite database**
A set of query results used to access data. You can access the required data in a result set in flexible modes.
A lightweight open-source relational database management system that complies with Atomicity, Consistency, Isolation, and Durability \(ACID\).
- **SQLite database**
A lightweight open-source relational database management system that complies with Atomicity, Consistency, Isolation, and Durability (ACID).
## Working Principles<a name="section4810552814"></a>
## Working Principles
The RDB provides a common operation interface for external systems. It uses the SQLite as the underlying persistent storage engine, which supports all SQLite database features.
The RDB provides common operation APIs for external systems. It uses the SQLite as the underlying persistent storage engine, which supports all SQLite database features.
**Figure 1** How RDB works<a name="fig1826214361535"></a>
![](figures/how-rdb-works.png "how-rdb-works")
**Figure 1** How RDB works
## Default Settings<a name="section176091243121218"></a>
![how-rdb-works](figures/how-rdb-works.png)
- The default database logging mode is write-ahead logging \(WAL\).
- The default database flush mode is Full mode.
- The default shared memory used by the OpenHarmony database is 2 MB.
## Default Settings
## Constraints<a name="section929813398308"></a>
- The default RDB logging mode is Write Ahead Log (WAL).
- The default data flushing mode is **FULL** mode.
- The default size of the shared memory used by an OpenHarmony database is 2 MB.
- A maximum of four connection pools can be connected to an RDB to manage read and write operations.
## Constraints
- To ensure data accuracy, the RDB supports only one write operation at a time.
- A maximum of four connection pools can be connected to an RDB to manage read and write operations.
- To ensure data accuracy, the RDB supports only one write operation at a time.
en/application-dev/database/database-storage-overview.md
浏览文件 @ 5919c0fe
# Lightweight Data Store Overview<a name="EN-US_TOPIC_0000001230752103"></a>
# Lightweight Data Store Overview
Lightweight data store is applicable to access and persistence operations on the data in key-value pairs. When an application accesses a lightweight **Storage** instance, data in the **Storage** instance will be cached in the memory for faster access. The cached data can also be written back to the text file for persistent storage. Since file read and write consume system resources, you are advised to minimize the frequency of reading and writing persistent files.
The lightweight data store is applicable to access and persistence of data in the key-value structure.
## Basic Concepts<a name="section1055404171115"></a>
After an application obtains a lightweight store instance, the data in the instance will be cached in the memory for faster access. The cached data can also be written back to the text file for persistent storage. Since file read and write consume system resources, you are advised to minimize the frequency of reading and writing persistent files.
- **Key-Value data structure**
You do not need to care about the implementation of the database lock mechanism.
A type of data structure. The key is the unique identifier for a piece of data, and the value is the specific data being identified.
## Basic Concepts
- **Non-relational database**
- **Key-value structure**
A database not in compliance with the atomicity, consistency, isolation, and durability \(ACID\) database management properties of relational data transactions. The data in a non-relational database is independent.
A type of data structure. The key is the unique identifier for a piece of data, and the value is the specific data being identified.
- **Non-relational database**
## Working Principles<a name="section682631371115"></a>
A database not in compliance with the atomicity, consistency, isolation, and durability (ACID) properties of relational data transactions. The data in a non-relational database is independent.
1. When an application loads data from a specified **Storage** file to a **Storage** instance, the system stores the instance in the memory through a static container. Each file of an application or process has only one **Storage** instance in the memory, till the application removes the instance from the memory or deletes the **Storage** file.
2. When obtaining a **Storage** instance, the application can read data from or write data to the instance. The data in the **Storage** instance can be flushed to its **Storage** file by calling the **flush** or **flushSync** method.
## Working Principles
**Figure 1** How lightweight data store works<a name="fig1657785713509"></a>
1. An application can load data from a specified **Storage** file to a **Storage** instance. The system stores the instance in the memory through a static container. Each file of an application or process has only one **Storage** instance in the memory, till the application removes the instance from the memory or deletes the **Storage** file.
2. When obtaining a **Storage** instance, the application can read data from or write data to the instance. The data in the **Storage** instance can be flushed to its **Storage** file by calling the **flush** or **flushSync** method.
**Figure 1** Working mechanism
![](figures/en-us_image_0000001199139454.png)
## Constraints<a name="section17243172883219"></a>
- **Storage** instances are loaded to the memory. To minimize non-memory overhead, the number of data records stored in a **Storage** instance cannot exceed 10,000. Delete the instances that are no longer used in a timely manner.
- The key in the key-value pairs is of the string type. It cannot be empty or exceed 80 characters.
- If the value in the key-value pairs is of the string type, it can be empty or contain a maximum of 8192 characters.
## Constraints
- **Storage** instances are loaded to the memory. To minimize non-memory overhead, the number of data records stored in a **Storage** instance cannot exceed 10,000. Delete the instances that are no longer used in a timely manner.
- The key in the key-value pairs is of the string type. It cannot be empty or exceed 80 bytes.
- The value of the string type can be empty, but cannot exceed 8192 bytes if not empty.
en/application-dev/device/usb-guidelines.md
浏览文件 @ 5919c0fe
......@@ -16,7 +16,7 @@ The following table lists the USB APIs currently available. For details, see the
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| hasRight(deviceName: string): boolean | Checks whether the user, for example, the application or system, has the device access permissions. The value **true** is returned if the user has the device access permissions; the value **false** is returned otherwise. |
| requestRight(deviceName: string): Promise\<boolean> | Requests the temporary permission for a given application to access the USB device. |
| connectDevice(device: USBDevice): Readonly\<USBDevicePipe> | Connects to the USB device based on the device information returned by **getDevices()**. |
| connectDevice(device: USBDevice): Readonly\<USBDevicePipe> | Connects to the USB device based on the device information returned by `getDevices()`. |
| getDevices(): Array<Readonly\<USBDevice>> | Obtains the USB device list. |
| setConfiguration(pipe: USBDevicePipe, config: USBConfig): number | Sets the USB device configuration. |
| setInterface(pipe: USBDevicePipe, iface: USBInterface): number | Sets a USB interface. |
......@@ -113,7 +113,7 @@ You can set a USB device as a host to connect to a device for data transfer. The
Claim the corresponding interface from deviceList.
interface1 must be one present in the device configuration.
*/
usb.claimInterface(pipe , interface1, true);
usb.claimInterface(pipe, interface1, true);
```
4. Perform data transfer.
......
en/application-dev/napi/Readme-EN.md
浏览文件 @ 5919c0fe
......@@ -2,6 +2,7 @@
- [Using Native APIs in Application Projects](napi-guidelines.md)
- [Drawing Development](drawing-guidelines.md)
- [Native Window Development](native_window-guidelines.md)
- [Raw File Development](rawfile-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
en/application-dev/reference/apis/js-apis-brightness.md
浏览文件 @ 5919c0fe
# Brightness
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
The Brightness module provides an API for setting the screen brightness.
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
......
en/application-dev/reference/apis/js-apis-bytrace.md
浏览文件 @ 5919c0fe
......@@ -7,7 +7,7 @@
## Modules to Import
```js
```js
import bytrace from '@ohos.bytrace';
```
......@@ -23,7 +23,7 @@ Marks the start of a timeslice trace task.
>
> If multiple trace tasks with the same name need to be performed at the same time or a trace task needs to be performed multiple times concurrently, different task IDs must be specified in **startTrace**. If the trace tasks with the same name are not performed at the same time, the same taskId can be used. For details, see the bytrace.finishTrace example.
**System capability**: SystemCapability.Developtools.Bytrace
**System capability**: SystemCapability.HiviewDFX.HiTrace
**Parameters**
......@@ -36,7 +36,7 @@ Marks the start of a timeslice trace task.
**Example**
```js
```js
bytrace.startTrace("myTestFunc", 1);
bytrace.startTrace("myTestFunc", 1, 5); // The expected duration of the trace is 5 ms.
```
......@@ -52,7 +52,7 @@ Marks the end of a timeslice trace task.
>
> To stop a trace task, the values of name and task ID in **finishTrace** must be the same as those in **startTrace**.
**System capability**: SystemCapability.Developtools.Bytrace
**System capability**: SystemCapability.HiviewDFX.HiTrace
**Parameters**
......@@ -64,7 +64,7 @@ Marks the end of a timeslice trace task.
**Example**
```js
```js
bytrace.finishTrace("myTestFunc", 1);
```
......@@ -97,7 +97,7 @@ traceByValue(name: string, count: number): void
Defines the variable that indicates the number of timeslice trace tasks.
**System capability**: SystemCapability.HiviewDFX.HiTrace
**System capability**: HiviewDFX.HiTrace
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -107,7 +107,7 @@ Defines the variable that indicates the number of timeslice trace tasks.
**Example**
```js
```js
let traceCount = 3;
bytrace.traceByValue("myTestCount", traceCount);
traceCount = 4;
......
en/application-dev/reference/apis/js-apis-data-storage.md
浏览文件 @ 5919c0fe
......@@ -54,7 +54,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
let storage = data_storage.getStorageSync(path + '/mystore');
......@@ -87,7 +87,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
data_storage.getStorage(path + '/mystore', function (err, storage) {
......@@ -130,7 +130,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
let getPromise = data_storage.getStorage(path + '/mystore');
......@@ -166,7 +166,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
data_storage.deleteStorageSync(path + '/mystore');
......@@ -197,7 +197,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
data_storage.deleteStorage(path + '/mystore', function (err) {
......@@ -238,7 +238,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
let promisedelSt = data_storage.deleteStorage(path + '/mystore');
......@@ -273,7 +273,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
data_storage.removeStorageFromCacheSync(path + '/mystore');
......@@ -304,7 +304,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
data_storage.removeStorageFromCache(path + '/mystore', function (err) {
......@@ -346,7 +346,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
});
let promiserevSt = data_storage.removeStorageFromCache(path + '/mystore')
......
en/application-dev/reference/apis/js-apis-display.md
浏览文件 @ 5919c0fe
# Display
Provides APIs for managing displays, such as obtaining information about the default display, obtaining information about all displays, and listening for the addition and removal of displays.
The **Display** module provides APIs for managing displays, such as obtaining information about the default display, obtaining information about all displays, and listening for the addition and removal of displays.
> **NOTE**
>
......@@ -14,11 +14,11 @@ import display from '@ohos.display';
## DisplayState
Provides the state of a display.
Enumerates the display states.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
| Name| Default Value| Description|
| Name| Value| Description|
| -------- | -------- | -------- |
| STATE_UNKNOWN | 0 | Unknown.|
| STATE_OFF | 1 | The display is shut down.|
......@@ -35,163 +35,169 @@ Describes the attributes of a display.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
| Name| Type| Readable| Writable| Description|
| -------- | -------- | -------- | -------- | -------- |
| id | number | Yes| No| ID of the display.|
| name | string | Yes| No| Name of the display.|
| alive | boolean | Yes| No| Whether the display is alive.|
| state | [DisplayState](#displaystate) | Yes| No| State of the display.|
| refreshRate | number | Yes| No| Refresh rate of the display.|
| rotation | number | Yes| No| Screen rotation angle of the display.|
| width | number | Yes| No| Width of the display, in pixels.|
| height | number | Yes| No| Height of the display, in pixels.|
| densityDPI | number | Yes| No| Screen density of the display, in DPI.|
| densityPixels | number | Yes| No| Screen density of the display, in pixels.|
| scaledDensity | number | Yes| No| Scaling factor for fonts displayed on the display.|
| xDPI | number | Yes| No| Exact physical dots per inch of the screen in the horizontal direction.|
| yDPI | number | Yes| No| Exact physical dots per inch of the screen in the vertical direction.|
| Name | Type | Readable | Writable | Description |
| ------------- | ----------------------------- | -------- | -------- | ------------------------------------------------------------ |
| id | number | Yes | No | ID of the display. |
| name | string | Yes | No | Name of the display. |
| alive | boolean | Yes | No | Whether the display is alive. |
| state | [DisplayState](#displaystate) | Yes | No | State of the display. |
| refreshRate | number | Yes | No | Refresh rate of the display. |
| rotation | number | Yes | No | Screen rotation angle of the display. |
| width | number | Yes | No | Width of the display, in pixels. |
| height | number | Yes | No | Height of the display, in pixels. |
| densityDPI | number | Yes | No | Screen density of the display, in DPI. |
| densityPixels | number | Yes | No | Screen density of the display, in pixels. |
| scaledDensity | number | Yes | No | Scaling factor for fonts displayed on the display. |
| xDPI | number | Yes | No | Exact physical dots per inch of the screen in the horizontal direction. |
| yDPI | number | Yes | No | Exact physical dots per inch of the screen in the vertical direction. |
## display.getDefaultDisplay
getDefaultDisplay(callback: AsyncCallback&lt;Display&gt;): void
Obtains the default display object.
Obtains the default display object. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;[Display](#display)&gt; | Yes| Callback used to return the default display object.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;[Display](#display)&gt; | Yes| Callback used to return the default display object.|
**Example**
```js
var displayClass = null;
display.getDefaultDisplay((err, data) => {
if (err.code) {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in obtaining the default display object. Data:' + JSON.stringify(data));
displayClass = data;
});
```
```js
var displayClass = null;
display.getDefaultDisplay((err, data) => {
if (err.code) {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in obtaining the default display object. Data:' + JSON.stringify(data));
displayClass = data;
});
```
## display.getDefaultDisplay
getDefaultDisplay(): Promise&lt;Display&gt;
Obtains the default display object.
Obtains the default display object. This API uses a promise to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Return value**
| Type | Description |
| ---------------------------------- | ---------------------------------------------- |
| Promise&lt;[Display](#display)&gt; | Promise used to return the default display object.|
| Type | Description |
| ---------------------------------- | ---------------------------------------------- |
| Promise&lt;[Display](#display)&gt; | Promise used to return the default display object.|
**Example**
```js
let promise = display.getDefaultDisplay();
promise.then(() => {
console.log('getDefaultDisplay success');
}).catch((err) => {
console.log('getDefaultDisplay fail: ' + JSON.stringify(err));
});
```
```js
var displayClass = null;
let promise = display.getDefaultDisplay();
promise.then((data) => {
displayClass = data;
console.info('Succeeded in obtaining the default display object. Data:' + JSON.stringify(data));
}).catch((err) => {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(err));
});
```
## display.getAllDisplay
getAllDisplay(callback: AsyncCallback&lt;Array&lt;Display&gt;&gt;): void
Obtains all the display objects.
Obtains all display objects. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | ---------------------------------------------------- | ---- | ------------------------------- |
| callback | AsyncCallback&lt;Array&lt;[Display](#display)&gt;&gt; | Yes | Callback used to return all the display objects.|
| Name | Type | Mandatory| Description |
| -------- | ---------------------------------------------------- | ---- | ------------------------------- |
| callback | AsyncCallback&lt;Array&lt;[Display](#display)&gt;&gt; | Yes | Callback used to return all the display objects.|
**Example**
```js
display.getAllDisplay((err, data) => {
if (err.code) {
console.error('Failed to obtain all the display objects. Code: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data))
});
```
```js
display.getAllDisplay((err, data) => {
if (err.code) {
console.error('Failed to obtain all the display objects. Code: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data));
});
```
## display.getAllDisplay
getAllDisplay(): Promise&lt;Array&lt;Display&gt;&gt;
Obtains all the display objects.
Obtains all display objects. This API uses a promise to return the result.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Return value**
| Type | Description |
| ----------------------------------------------- | ------------------------------------------------------- |
| Promise&lt;Array&lt;[Display](#display)&gt;&gt; | Promise used to return all the display objects.|
| Type | Description |
| ----------------------------------------------- | ------------------------------------------------------- |
| Promise&lt;Array&lt;[Display](#display)&gt;&gt; | Promise used to return all the display objects.|
**Example**
```js
let promise = display.getAllDisplay();
promise.then(() => {
console.log('getAllDisplay success');
}).catch((err) => {
console.log('getAllDisplay fail: ' + JSON.stringify(err));
});
```
```js
let promise = display.getAllDisplay();
promise.then((data) => {
console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data));
}).catch((err) => {
console.error('Failed to obtain all the display objects. Code: ' + JSON.stringify(err));
});
```
## display.on('add'|'remove'|'change')
on(type: 'add'|'remove'|'change', callback: Callback&lt;number&gt;): void
Enables listening.
Subscribes to display changes.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Listening type. The available values are as follows:<br>- **add**: listening for whether a display is added<br>- **remove**: listening for whether a display is removed<br>- **change**: listening for whether a display is changed|
| callback | Callback&lt;number&gt; | Yes| Callback used to return the ID of the display.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Event type.<br>- **add**, indicating the display addition event.<br>- **remove**, indicating the display removal event.<br>- **change**, indicating the display change event.|
| callback | Callback&lt;number&gt; | Yes| Callback used to return the ID of the display.|
**Example**
```js
var callback = (data) => {
console.info('Listening enabled. Data: ' + JSON.stringify(data))
}
display.on("add", callback);
```
```js
var callback = (data) => {
console.info('Listening enabled. Data: ' + JSON.stringify(data))
}
display.on("add", callback);
```
## display.off('add'|'remove'|'change')
off(type: 'add'|'remove'|'change', callback?: Callback&lt;number&gt;): void
Disables listening.
Unsubscribes from display changes.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Listening type. The available values are as follows:<br>- **add**: listening for whether a display is added<br>- **remove**: listening for whether a display is removed<br>- **change**: listening for whether a display is changed|
| callback | Callback&lt;number&gt; | No| Callback used to return the ID of the display.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Event type.<br>- **add**, indicating the display addition event.<br>- **remove**, indicating the display removal event.<br>- **change**, indicating the display change event.|
| callback | Callback&lt;number&gt; | No| Callback used to return the ID of the display.|
**Example**
```js
display.off("remove");
```
```js
display.off("remove");
```
en/application-dev/reference/apis/js-apis-featureAbility.md
浏览文件 @ 5919c0fe
......@@ -138,10 +138,10 @@ Starts an ability. This API uses a callback to return the execution result when
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
import wantConstant from '@ohos.ability.wantConstant'
featureAbility.startAbilityForResult(
{
{
want:
{
action: "action.system.home",
......@@ -154,6 +154,9 @@ featureAbility.startAbilityForResult(
uri:""
},
},
(err, data) => {
console.info("err: " + JSON.stringify(err) + "data: " + JSON.stringify(data))
}
)
```
......@@ -180,7 +183,7 @@ Starts an ability. This API uses a promise to return the execution result when t
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
import wantConstant from '@ohos.ability.wantConstant'
featureAbility.startAbilityForResult(
{
......@@ -284,7 +287,7 @@ Destroys this Page ability, with the result code and data sent to the caller. Th
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
import wantConstant from '@ohos.ability.wantConstant'
featureAbility.terminateSelfWithResult(
{
......@@ -335,7 +338,7 @@ Checks whether the main window of this ability has the focus. This API uses a ca
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.hasWindowFocus()
```
......@@ -358,7 +361,7 @@ Checks whether the main window of this ability has the focus. This API uses a pr
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.hasWindowFocus().then((data) => {
console.info("==========================>hasWindowFocus=======================>");
});
......@@ -383,7 +386,7 @@ Obtains the **Want** object sent from this ability. This API uses a callback to
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.getWant()
```
......@@ -406,7 +409,7 @@ Obtains the **Want** object sent from this ability. This API uses a promise to r
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.getWant().then((data) => {
console.info("==========================>getWantCallBack=======================>");
});
......@@ -429,7 +432,7 @@ Obtains the application context.
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
var context = featureAbility.getContext()
context.getBundleName()
```
......@@ -453,7 +456,7 @@ Destroys this Page ability, with the result code and data sent to the caller. Th
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.terminateSelf()
```
......@@ -476,7 +479,7 @@ Destroys this Page ability, with the result code and data sent to the caller. Th
**Example**
```javascript
import featureAbility from '@ohos.ability.featureability';
import featureAbility from '@ohos.ability.featureAbility';
featureAbility.terminateSelf().then((data) => { console.info("==========================>terminateSelfCallBack=======================>");
});
```
......@@ -926,6 +929,8 @@ Enumerates operation types of the Data ability.
| action | Read-only | string | No | Action option. |
| parameters | Read-only | {[key: string]: any} | No | List of parameters in the **Want** object. |
| entities | Read-only | Array\<string> | No | List of entities. |
| extensionAbilityType<sup>9+</sup> | Read-only | bundle.ExtensionAbilityType | No | Type of the Extension ability. |
| extensionAbilityName<sup>9+<sup> | Read-only | string | No | Description of the Extension ability name in the **Want** object. |
## flags
......
en/application-dev/reference/apis/js-apis-hilog.md
浏览文件 @ 5919c0fe
# HiLog
The HiLog subsystem allows your applications or services to output logs based on the specified type, level, and format string. Such logs help you learn the running status of applications and better debug programs.
The HiLog module allows your applications or services to output logs based on the specified type, level, and format string. Such logs help you learn the running status of applications and better debug programs.
> **NOTE**<br>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
......@@ -23,8 +23,8 @@ Checks whether logs are printable based on the specified service domain, log tag
| Name| Type | Mandatory| Description |
| ------ | --------------------- | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| level | [LogLevel](#loglevel) | Yes | Log level. |
**Return value**
......@@ -48,7 +48,7 @@ Enumerates the log levels.
| Name | Default Value| Description |
| ----- | ------ | ------------------------------------------------------------ |
| DEBUG | 3 | Log level used to record more detailed process information than INFO logs to help developers analyze service processes and locate faults.|
| INFO | 4 | Log level used to record key service process nodes and exceptions that occur during service running,<br>for example, no network signal or login failure.<br>These logs should be recorded by the dominant module in the service to avoid repeated logging conducted by multiple invoked modules or low-level functions.|
| INFO | 4 | Log level used to record key service process nodes and exceptions that occur during service running, for example, no network signal or login failure.<br>These logs should be recorded by the dominant module in the service to avoid repeated logging conducted by multiple invoked modules or low-level functions.|
| WARN | 5 | Log level used to record severe, unexpected faults that have little impact on users and can be rectified by the programs themselves or through simple operations.|
| ERROR | 6 | Log level used to record program or functional errors that affect the normal running or use of the functionality and can be fixed at a high cost, for example, by resetting data.|
| FATAL | 7 | Log level used to record program or functionality crashes that cannot be rectified. |
......@@ -67,8 +67,8 @@ DEBUG logs are not recorded in official versions by default. They are available
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| format | string | Yes | Format string used to output logs in a specified format. It can contain several parameters, where the parameter type and privacy identifier are mandatory.<br>Parameters labeled **{public}** are public data and are displayed in plaintext; parameters labeled **{private}** (default value) are private data and are filtered by **<private>**.|
| args | any[] | Yes | Variable-length parameter list corresponding to the format string. The number and type of parameters must map to the identifier in the format string.|
......@@ -98,8 +98,8 @@ Prints INFO logs.
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| format | string | Yes | Format string used to output logs in a specified format. It can contain several parameters, where the parameter type and privacy identifier are mandatory.<br>Parameters labeled **{public}** are public data and are displayed in plaintext; parameters labeled **{private}** (default value) are private data and are filtered by **<private>**.|
| args | any[] | Yes | Variable-length parameter list corresponding to the format string. The number and type of parameters must map to the identifier in the format string.|
......@@ -129,8 +129,8 @@ Prints WARN logs.
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| format | string | Yes | Format string used to output logs in a specified format. It can contain several parameters, where the parameter type and privacy identifier are mandatory.<br>Parameters labeled **{public}** are public data and are displayed in plaintext; parameters labeled **{private}** (default value) are private data and are filtered by **<private>**.|
| args | any[] | Yes | Variable-length parameter list corresponding to the format string. The number and type of parameters must map to the identifier in the format string.|
......@@ -160,8 +160,8 @@ Prints ERROR logs.
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| format | string | Yes | Format string used to output logs in a specified format. It can contain several parameters, where the parameter type and privacy identifier are mandatory.<br>Parameters labeled **{public}** are public data and are displayed in plaintext; parameters labeled **{private}** (default value) are private data and are filtered by **<private>**.|
| args | any[] | Yes | Variable-length parameter list corresponding to the format string. The number and type of parameters must map to the identifier in the format string.|
......@@ -191,8 +191,8 @@ Prints FATAL logs.
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**. You can define the value as required.|
| tag | string | Yes | Log tag in the string format. You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| domain | number | Yes | Service domain of logs. The value ranges from **0x0** to **0xFFFF**.<br/>You can define the value as required.|
| tag | string | Yes | Log tag in the string format.<br/>You are advised to use this parameter to identify a particular service behavior or the class holding the ongoing method.|
| format | string | Yes | Format string used to output logs in a specified format. It can contain several parameters, where the parameter type and privacy identifier are mandatory.<br>Parameters labeled **{public}** are public data and are displayed in plaintext; parameters labeled **{private}** (default value) are private data and are filtered by **<private>**.|
| args | any[] | Yes | Variable-length parameter list corresponding to the format string. The number and type of parameters must map to the identifier in the format string.|
......
en/application-dev/reference/apis/js-apis-hitracemeter.md
浏览文件 @ 5919c0fe
# Performance Tracing
This module provides the functions of tracing service processes and monitoring the system performance. It provides the data needed for hiTraceMeter to carry out performance analysis.
The Performance Tracing module provides the functions of tracing service processes and monitoring the system performance. It provides the data needed for hiTraceMeter to carry out performance analysis.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **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.
......@@ -17,7 +18,7 @@ import hiTraceMeter from '@ohos.hiTraceMeter';
startTrace(name: string, taskId: number): void
Starts a trace task. **expectedTime** is an optional parameter, which specifies the expected duration of the trace.
Starts a trace task.
If multiple trace tasks with the same name need to be performed at the same time or a trace task needs to be performed multiple times concurrently, different task IDs must be specified in **startTrace**.
......
en/application-dev/reference/apis/js-apis-logs.md
浏览文件 @ 5919c0fe
# Log
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The APIs of this module are no longer maintained since API version 7. You are advised to use ['@ohos.hilog](js-apis-hilog.md)' instead.
The Log module provides basic log printing capabilities and supports log printing by log level.
## console.debug
debug(message: string): void
If you want to use more advanced log printing services, for example, filtering logs by the specified ID, you are advised to use [`@ohos.hilog`](js-apis-hilog.md).
Prints debug logs.
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
> **NOTE**
>
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## console.log
log(message: string): void
Prints debug logs.
Prints logs.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
## console.debug
debug(message: string): void
Prints debug-level logs.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
## console.info
......@@ -33,10 +45,13 @@ info(message: string): void
Prints info-level logs.
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
## console.warn
......@@ -45,10 +60,13 @@ warn(message: string): void
Prints warn-level logs.
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
## console.error
......@@ -57,10 +75,13 @@ error(message: string): void
Prints error-level logs.
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------ | ---- | ----------- |
| message | string | Yes | Text to print.|
## Example
......
en/application-dev/reference/apis/js-apis-mediaquery.md
浏览文件 @ 5919c0fe
......@@ -26,6 +26,7 @@ Sets the media query criteria and returns the corresponding listening handle.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ---------------------------------------- |
| condition | string | Yes | Matching condition of a media event. For details, see [Syntax of Media Query Conditions](../../ui/ui-ts-layout-mediaquery.md#syntax-of-media-query-conditions).|
......@@ -37,7 +38,7 @@ Sets the media query criteria and returns the corresponding listening handle.
**Example**
```js
listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
```
......@@ -66,7 +67,7 @@ Registers a callback with the corresponding query condition by using the handle.
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | -------------------------------- | ---- | ---------------- |
| type | string | Yes | Must enter the string **'change'**.|
| type | string | Yes | Must enter the string **change**.|
| callback | Callback&lt;MediaQueryResult&gt; | Yes | Callback registered with media query. |
**Example**
......@@ -88,7 +89,7 @@ Deregisters a callback with the corresponding query condition by using the handl
| callback | Callback&lt;MediaQueryResult&gt; | No | Callback to be deregistered. If the default value is used, all callbacks of the handle are deregistered.|
**Example**
```js
```ts
import mediaquery from '@ohos.mediaquery'
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
......@@ -117,10 +118,9 @@ Deregisters a callback with the corresponding query condition by using the handl
### Example
```js
```ts
import mediaquery from '@ohos.mediaquery'
let portraitFunc = null
@Entry
@Component
......@@ -140,7 +140,7 @@ struct MediaQueryExample {
}
aboutToAppear() {
portraitFunc = this.onPortrait.bind(this) //bind current js instance
let portraitFunc = this.onPortrait.bind(this) // Bind the current JS instance.
this.listener.on('change', portraitFunc)
}
......
en/application-dev/reference/apis/js-apis-sensor.md
浏览文件 @ 5919c0fe
# Sensor
> **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.
......@@ -1351,8 +1350,6 @@ off(type: SensorType.SENSOR_TYPE_ID_HUMIDITY, callback?: Callback&lt;HumidityRes
Unsubscribes from sensor data changes.
**Required permissions**: ohos.permission.READ_HEALTH_DATA (a system permission)
**System capability**: SystemCapability.Sensors.Sensor
**Parameters**
......@@ -1405,8 +1402,6 @@ sensor.off(sensor.SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION, callback);
Unsubscribes from sensor data changes.
**Required permissions**: ohos.permission.ACCELEROMETER (a system permission)
**System capability**: SystemCapability.Sensors.Sensor
**Parameters**
......@@ -1488,6 +1483,8 @@ off(type: SensorType.SENSOR_TYPE_ID_PEDOMETER, callback?: Callback&lt;PedometerR
Unsubscribes from sensor data changes.
**Required permissions**: ohos.permission.ACTIVITY_MOTION
**System capability**: SystemCapability.Sensors.Sensor
**Parameters**
......@@ -1718,7 +1715,7 @@ sensor.getGeomagneticField({latitude:80, longitude:0, altitude:0}, 1580486400000
console.error('Operation failed. Error code: ' + err.code + '; message: ' + err.message);
return;
}
console.info('sensor_getGeomagneticField_promise x: ' + data.x + ',y: ' + data.y + ',z: ' +
console.info('sensor_getGeomagneticField_callback x: ' + data.x + ',y: ' + data.y + ',z: ' +
data.z + ',geomagneticDip: ' + data.geomagneticDip + ',deflectionAngle: ' + data.deflectionAngle +
',levelIntensity: ' + data.levelIntensity + ',totalIntensity: ' + data.totalIntensity);
});
......@@ -1900,7 +1897,6 @@ Obtains the angle change between two rotation matrices. This API uses a callback
err.message);
return;
}
console.info("SensorJsAPI--->Successed to get getAngleModifiy interface get data: " + data.x);
for (var i=0; i < data.length; i++) {
console.info("data[" + i + "]: " + data[i]);
}
......@@ -1968,7 +1964,6 @@ Converts a rotation vector into a rotation matrix. This API uses a callback to r
err.message);
return;
}
console.info("SensorJsAPI--->Successed to get createRotationMatrix interface get data: " + data.x);
for (var i=0; i < data.length; i++) {
console.info("data[" + i + "]: " + data[i]);
}
......@@ -2035,7 +2030,6 @@ Converts a rotation vector into a quaternion. This API uses a callback to return
err.message);
return;
}
console.info("SensorJsAPI--->Successed to get createQuaternion interface get data: " + data.x);
for (var i=0; i < data.length; i++) {
console.info("data[" + i + "]: " + data[i]);
}
......@@ -2102,7 +2096,6 @@ Obtains the device direction based on the rotation matrix. This API uses a callb
err.message);
return;
}
console.info("SensorJsAPI--->Successed to get getDirection interface get data: " + data);
for (var i = 1; i < data.length; i++) {
console.info("sensor_getDirection_callback" + data[i]);
}
......@@ -2170,7 +2163,6 @@ Creates a rotation matrix based on the gravity vector and geomagnetic vector. Th
err.message);
return;
}
console.info("SensorJsAPI--->Successed to get createRotationMatrix interface get data: " + data.x);
for (var i=0; i < data.rotation.length; i++) {
console.info("data[" + i + "]: " + data[i])
}
......@@ -2419,9 +2411,9 @@ Describes the Hall effect sensor data. It extends from [Response](#response).
**System capability**: SystemCapability.Sensors.Sensor
| Name | Type | Readable | Writable | Description |
| ------ | ------ | ---- | ---- | --------------------------------- |
| status | number | Yes | Yes | Hall effect sensor status. This parameter specifies whether a magnetic field exists around a device. The value **0** means that a magnetic field exists around the device, and **1** means the opposite.|
| Name | Type| Readable| Writable| Description |
| ------ | -------- | ---- | ---- | ------------------------------------------------------------ |
| status | number | Yes | Yes | Hall effect sensor status. This parameter specifies whether a magnetic field exists around a device. The value **0** means that a magnetic field does not exist, and a value greater than **0** means the opposite.|
## MagneticFieldResponse
......
en/application-dev/reference/apis/js-apis-system-battery.md
浏览文件 @ 5919c0fe
# Battery Level
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - The APIs of this module are no longer maintained since API version 7. It is recommended that you use [`@ohos.batteryInfo`](js-apis-battery-info.md) instead.
> **NOTE**
> - The APIs of this module are no longer maintained since API version 6. You are advised to use [`@ohos.batteryInfo`](js-apis-battery-info.md).
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
......@@ -22,20 +22,13 @@ Obtains the current charging state and battery level.
**System capability**: SystemCapability.PowerManager.BatteryManager.Core
**Parameter**
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;check&nbsp;result&nbsp;is&nbsp;obtained |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;check&nbsp;result&nbsp;fails&nbsp;to&nbsp;be&nbsp;obtained |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete |
The following value will be returned when the check result is obtained.
| Name | Type | Description |
| -------- | -------- | -------- |
| charging | boolean | Whether&nbsp;the&nbsp;battery&nbsp;is&nbsp;being&nbsp;charged |
| level | number | Current&nbsp;battery&nbsp;level,&nbsp;which&nbsp;ranges&nbsp;from&nbsp;0.00&nbsp;to&nbsp;1.00. |
| success | (data: [BatteryResponse](#batteryresponse)) => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
**Example**
......@@ -52,4 +45,11 @@ export default {
});
},
}
```
\ No newline at end of file
```
## BatteryResponse
| Name| Type| Description|
| -------- | -------- | -------- |
| charging | boolean | Whether the battery is being charged.|
| level | number | Current battery level, which ranges from **0.00** to **1.00**.|
en/application-dev/reference/apis/js-apis-system-brightness.md
浏览文件 @ 5919c0fe
# Screen Brightness
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：**
> - The APIs of this module are no longer maintained since API version 7. It is recommended that you use [`@ohos.brightness`](js-apis-brightness.md) instead.
> **NOTE**
> - The APIs of this module are no longer maintained since API version 7. You are advised to use [`@ohos.brightness`](js-apis-brightness.md).
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
......@@ -24,34 +24,35 @@ Obtains the current screen brightness.
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;successful. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;operation&nbsp;fails. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete |
| success | (data: [BrightnessResponse](#brightnessresponse)) => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
The following values will be returned when the operation is successful.
**Return value of success()**
| Name | Type | Description |
| Name| Type| Description|
| -------- | -------- | -------- |
| value | number | Screen&nbsp;brightness,&nbsp;which&nbsp;ranges&nbsp;from&nbsp;1&nbsp;to&nbsp;255. |
| value | number | Screen brightness. The value is an integer ranging from **1** to **255**.|
**Example**
```js
export default {
getValue() {
brightness.getValue({
success: function(data){
console.log('success get brightness value:' + data.value);
},
fail: function(data, code) {
console.log('get brightness fail, code: ' + code + ', data: ' + data);
},
});
},
}
```
```js
export default {
getValue() {
brightness.getValue({
success: function(data){
console.log('success get brightness value:' + data.value);
},
fail: function(data, code) {
console.log('get brightness fail, code: ' + code + ', data: ' + data);
},
});
},
}
```
## brightness.setValue
......@@ -64,30 +65,30 @@ Sets the screen brightness.
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | Yes | Screen&nbsp;brightness.&nbsp;The&nbsp;value&nbsp;is&nbsp;an&nbsp;integer&nbsp;ranging&nbsp;from&nbsp;1&nbsp;to&nbsp;255.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;less&nbsp;than&nbsp;or&nbsp;equal&nbsp;to&nbsp;**0**,&nbsp;value&nbsp;**1**&nbsp;will&nbsp;be&nbsp;used.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;is&nbsp;greater&nbsp;than&nbsp;**255**,&nbsp;value&nbsp;**255**&nbsp;will&nbsp;be&nbsp;used.<br/>-&nbsp;If&nbsp;the&nbsp;value&nbsp;contains&nbsp;decimals,&nbsp;the&nbsp;integral&nbsp;part&nbsp;of&nbsp;the&nbsp;value&nbsp;will&nbsp;be&nbsp;used.&nbsp;For&nbsp;example,&nbsp;if&nbsp;value&nbsp;**8.1**&nbsp;is&nbsp;set,&nbsp;value&nbsp;**8**&nbsp;will&nbsp;be&nbsp;used. |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;successful. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;operation&nbsp;fails. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete. |
| value | number | Yes| Screen brightness. The value is an integer ranging from **1** to **255**.<br>- If the value is less than or equal to **0**, value **1** will be used.<br>- If the value is greater than **255**, value **255** will be used.<br>- If the value contains decimals, the integral part of the value will be used. For example, if value **8.1** is set, value **8** will be used.|
| success | () => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
**Example**
```js
export default {
setValue() {
brightness.setValue({
value: 100,
success: function(){
console.log('handling set brightness success.');
},
fail: function(data, code){
console.log('handling set brightness value fail, code:' + code + ', data: ' + data);
},
});
},
}
```
```js
export default {
setValue() {
brightness.setValue({
value: 100,
success: function(){
console.log('handling set brightness success.');
},
fail: function(data, code){
console.log('handling set brightness value fail, code:' + code + ', data: ' + data);
},
});
},
}
```
## brightness.getMode
......@@ -100,34 +101,34 @@ Obtains the screen brightness adjustment mode.
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;successful. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;operation&nbsp;fails. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete |
| success | (data: [BrightnessModeResponse](#brightnessmoderesponse)) => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
The following values will be returned when the operation is successful.
**Return value of success()**
| Name | Type | Description |
| Name| Type| Description|
| -------- | -------- | -------- |
| mode | number | The&nbsp;value&nbsp;can&nbsp;be&nbsp;**0**&nbsp;or&nbsp;**1**.<br/>-&nbsp;**0**:&nbsp;The&nbsp;screen&nbsp;brightness&nbsp;is&nbsp;manually&nbsp;adjusted.<br/>-&nbsp;**1**:&nbsp;The&nbsp;screen&nbsp;brightness&nbsp;is&nbsp;automatically&nbsp;adjusted. |
| mode | number | The value can be **0** or **1**.<br>- **0**: manual adjustment<br>- **1**: automatic adjustment|
**Example**
```js
export default {
getMode() {
brightness.getMode({
success: function(data){
console.log('success get mode:' + data.mode);
},
fail: function(data, code){
console.log('handling get mode fail, code:' + code + ', data: ' + data);
},
});
},
}
```
```js
export default {
getMode() {
brightness.getMode({
success: function(data){
console.log('success get mode:' + data.mode);
},
fail: function(data, code){
console.log('handling get mode fail, code:' + code + ', data: ' + data);
},
});
},
}
```
## brightness.setMode
......@@ -139,31 +140,30 @@ Sets the screen brightness adjustment mode.
**System capability**: SystemCapability.PowerManager.DisplayPowerManager
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| mode | number | Yes | The&nbsp;value&nbsp;can&nbsp;be&nbsp;**0**&nbsp;or&nbsp;**1**.<br/>-&nbsp;**0**:&nbsp;The&nbsp;screen&nbsp;brightness&nbsp;is&nbsp;manually&nbsp;adjusted.<br/>-&nbsp;**1**:&nbsp;The&nbsp;screen&nbsp;brightness&nbsp;is&nbsp;automatically&nbsp;adjusted. |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;successful. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;operation&nbsp;fails. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete. |
| mode | number | Yes| The value can be **0** or **1**.<br>- **0**: manual adjustment<br>- **1**: automatic adjustment|
| success | () => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
**Example**
```js
export default {
setMode() {
brightness.setMode({
mode: 1,
success: function(){
console.log('handling set mode success.');
},
fail: function(data, code){
console.log('handling set mode fail, code:' + code + ', data: ' + data);
},
});
},
}
```
```js
export default {
setMode() {
brightness.setMode({
mode: 1,
success: function(){
console.log('handling set mode success.');
},
fail: function(data, code){
console.log('handling set mode fail, code:' + code + ', data: ' + data);
},
});
},
}
```
## brightness.setKeepScreenOn
......@@ -175,28 +175,40 @@ Sets whether to always keep the screen on. Call this API in **onShow()**.
**System capability**: SystemCapability.PowerManager.DisplayPowerManager
**Parameters**
| Name | Type | Mandatory | Description |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| keepScreenOn | boolean | Yes | Whether&nbsp;to&nbsp;always&nbsp;keep&nbsp;the&nbsp;screen&nbsp;on |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;successful. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;operation&nbsp;fails. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete. |
| keepScreenOn | boolean | Yes| Whether to keep the screen on.|
| success | () => void | No| Called when API call is successful.|
| fail | (data: string, code: number) => void | No| Called when API call has failed.|
| complete | () => void | No| Called when API call is complete.|
**Example**
```js
export default {
setKeepScreenOn() {
brightness.setKeepScreenOn({
keepScreenOn: true,
success: function () {
console.log('handling set keep screen on success.')
},
fail: function (data, code) {
console.log('handling set keep screen on fail, code:' + code + ', data: ' + data);
},
});
},
}
```
\ No newline at end of file
```js
export default {
setKeepScreenOn() {
brightness.setKeepScreenOn({
keepScreenOn: true,
success: function () {
console.log('handling set keep screen on success.')
},
fail: function (data, code) {
console.log('handling set keep screen on fail, code:' + code + ', data: ' + data);
},
});
},
}
```
##
## BrightnessResponse
| Name| Type | Description|
| -------- | -------- | -------- |
| value | number | Screen brightness. The value is an integer ranging from **1** to **255**.|
## BrightnessModeResponse
| Name| Type | Description|
| -------- | -------- | -------- |
| mode | number | The value can be **0** or **1**.<br> - **0**: manual adjustment<br>- **0**: manual adjustment|
en/application-dev/reference/apis/js-apis-timer.md
浏览文件 @ 5919c0fe
# Timer
The **Timer** module provides basic timer capabilities. You can use the APIs of this module to execute functions at the specified time.
> **NOTE**
>
> The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## setTimeout
......@@ -7,6 +12,8 @@ setTimeout(handler[,delay[,…args]]): number
Sets a timer for the system to call a function after the timer goes off.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -23,15 +30,15 @@ Sets a timer for the system to call a function after the timer goes off.
**Example**
```js
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
```js
export default {
setTimeOut() {
var timeoutID = setTimeout(function() {
console.log('delay 1s');
}, 1000);
}
}
}
```
```
## clearTimeout
......@@ -40,6 +47,8 @@ clearTimeout(timeoutID: number): void
Cancels the timer created via **setTimeout()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -48,16 +57,16 @@ Cancels the timer created via **setTimeout()**.
**Example**
```js
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
```js
export default {
clearTimeOut() {
var timeoutID = setTimeout(function() {
console.log('do after 1s delay.');
}, 1000);
clearTimeout(timeoutID);
}
}
}
```
```
## setInterval
......@@ -66,6 +75,8 @@ setInterval(handler[, delay[, ...args]]): number
Sets a repeating timer for the system to repeatedly call a function at a fixed interval.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -82,15 +93,15 @@ Sets a repeating timer for the system to repeatedly call a function at a fixed i
**Example**
```js
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
```js
export default {
setInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
}
}
}
```
```
## clearInterval
......@@ -99,6 +110,8 @@ clearInterval(intervalID: number): void
Cancels the repeating timer set via **setInterval()**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -107,13 +120,13 @@ Cancels the repeating timer set via **setInterval()**.
**Example**
```js
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
```js
export default {
clearInterval() {
var intervalID = setInterval(function() {
console.log('do very 1s.');
}, 1000);
clearInterval(intervalID);
}
}
}
```
\ No newline at end of file
```
en/application-dev/reference/apis/js-apis-window.md
浏览文件 @ 5919c0fe
......@@ -10,7 +10,6 @@ This module provides the following common window-related functions:
>
> 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.
## Modules to Import
```js
......@@ -35,10 +34,10 @@ Enumerates the types of the area where the window cannot be displayed.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
| Name | Value | Description |
| ----------- | ---- | ------------------ |
| TYPE_SYSTEM | 0 | Default area of the system.|
| TYPE_CUTOUT | 1 | Notch. |
| Name | Value | Description |
|----------------------------------|-----| ----------------- |
| TYPE_SYSTEM | 0 | Default area of the system.|
| TYPE_CUTOUT | 1 | Notch. |
## WindowMode<sup>7+</sup>
......@@ -64,11 +63,11 @@ Describes the properties of the status bar and navigation bar.
| Name | Type| Readable| Writable| Description |
| -------------------------------------- | -------- | ---- | ---- | ------------------------------------------------------------ |
| statusBarColor | string | Yes | Yes | Background color of the status bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| statusBarColor | string | No | Yes | Background color of the status bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| isStatusBarLightIcon<sup>7+</sup> | boolean | No | Yes | Whether any icon on the status bar is highlighted. |
| statusBarContentColor<sup>8+</sup> | string | No | Yes | Color of the text on the status bar. |
| navigationBarColor | string | Yes | Yes | Background color of the navigation bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| isNavigationBarLightIcon<sup>7+</sup> | boolean | No | No | Whether any icon on the navigation bar is highlighted. |
| navigationBarColor | string | No | Yes | Background color of the navigation bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| isNavigationBarLightIcon<sup>7+</sup> | boolean | No | Yes | Whether any icon on the navigation bar is highlighted. |
| navigationBarContentColor<sup>8+</sup> | string | No | Yes | Color of the text on the navigation bar. |
## SystemBarRegionTint<sup>8+</sup>
......@@ -81,11 +80,11 @@ Describes the callback for a single system bar.
| Name | Type | Readable| Writable| Description |
| --------------- | ------------------------- | ---- | ---- | ------------------------------------------------------------ |
| type | [WindowType](#windowtype) | Yes | Yes | Type of the system bar whose properties are changed. Only the status bar and navigation bar are supported.|
| isEnable | boolean | Yes | Yes | Whether the system bar is displayed. |
| region | [Rect](#rect) | Yes | Yes | Current position and size of the system bar. |
| backgroundColor | string | Yes | Yes | Background color of the system bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| contentColor | string | Yes | Yes | Color of the text on the system bar. |
| type | [WindowType](#windowtype) | Yes | No | Type of the system bar whose properties are changed. Only the status bar and navigation bar are supported.|
| isEnable | boolean | Yes | No | Whether the system bar is displayed. |
| region | [Rect](#rect) | Yes | No | Current position and size of the system bar. |
| backgroundColor | string | Yes | No | Background color of the system bar. The value is a hexadecimal RGB or aRGB color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| contentColor | string | Yes | No | Color of the text on the system bar. |
## SystemBarTintState<sup>8+</sup>
......@@ -98,7 +97,7 @@ Describes the callback for the current system bar.
| Name | Type | Readable| Writable| Description |
| ---------- | --------------------------------------------------- | ---- | ---- | ---------------------------- |
| displayId | number | Yes | No | ID of the current physical screen. |
| regionTint | Array<[SystemBarRegionTint](#systembarregiontint8)> | Yes | Yes | All system bar information that has been changed.|
| regionTint | Array<[SystemBarRegionTint](#systembarregiontint8)> | Yes | No | All system bar information that has been changed.|
## Rect<sup>7+</sup>
......@@ -126,6 +125,7 @@ Describes the area where the window cannot be displayed.
| rightRect | [Rect](#rect) | Yes | Yes | Rectangle on the right of the screen.|
| bottomRect | [Rect](#rect) | Yes | Yes | Rectangle at the bottom of the screen.|
## Size<sup>7+</sup>
Describes the window size.
......@@ -143,20 +143,20 @@ Describes the window properties.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
| Name | Type | Readable| Writable| Description |
| ------------------------------- | ------------------------- | ---- | ---- | -------------------------------------------- |
| windowRect<sup>7+</sup> | [Rect](#rect) | Yes | Yes | Window size. |
| type<sup>7+</sup> | [WindowType](#windowtype) | Yes | Yes | Window type. |
| isFullScreen | boolean | Yes | Yes | Whether the window is displayed in full screen mode. The default value is `false`. |
| isLayoutFullScreen<sup>7+</sup> | boolean | Yes | Yes | Whether the window layout is in full-screen mode (whether the window is immersive). The default value is `false`. |
| focusable<sup>7+</sup> | boolean | Yes | No | Whether the window can gain focus. The default value is `true`. |
| touchable<sup>7+</sup> | boolean | Yes | No | Whether the window is touchable. The default value is `true`. |
| brightness | number | Yes | Yes | Screen brightness. The value ranges from 0 to 1. The value `1` indicates the maximum brightness. |
| dimBehindValue<sup>7+</sup> | number | Yes | Yes | Dimness of the window that is not on top. The value ranges from 0 to 1. The value `1` indicates the maximum dimness.|
| isKeepScreenOn | boolean | Yes | Yes | Whether the screen is always on. The default value is `false`. |
| isPrivacyMode<sup>7+</sup> | boolean | Yes | Yes | Whether the window is in privacy mode. The default value is `false`. |
| isRoundCorner<sup>7+</sup> | boolean | Yes | Yes | Whether the window has rounded corners. The default value is `false`. |
| isTransparent<sup>7+</sup> | boolean | Yes | Yes | Whether the window is transparent. The default value is `false`. |
| Name | Type | Readable| Writable| Description |
| ------------------------------------- | ------------------------- | ---- | ---- | ------------------------------------------------------------ |
| windowRect<sup>7+</sup> | [Rect](#rect) | Yes | Yes | Window size. |
| type<sup>7+</sup> | [WindowType](#windowtype) | Yes | Yes | Window type. |
| isFullScreen | boolean | Yes | Yes | Whether the window is displayed in full screen mode. The default value is `false`. |
| isLayoutFullScreen<sup>7+</sup> | boolean | Yes | Yes | Whether the window layout is in full-screen mode (whether the window is immersive). The default value is `false`. |
| focusable<sup>7+</sup> | boolean | Yes | No | Whether the window can gain focus. The default value is `true`. |
| touchable<sup>7+</sup> | boolean | Yes | No | Whether the window is touchable. The default value is `true`. |
| brightness | number | Yes | Yes | Screen brightness. The value ranges from 0 to 1. The value `1` indicates the maximum brightness. |
| dimBehindValue<sup>7+</sup> | number | Yes | Yes | Dimness of the window that is not on top. The value ranges from 0 to 1. The value `1` indicates the maximum dimness. |
| isKeepScreenOn | boolean | Yes | Yes | Whether the screen is always on. The default value is `false`. |
| isPrivacyMode<sup>7+</sup> | boolean | Yes | Yes | Whether the window is in privacy mode. The default value is `false`. |
| isRoundCorner<sup>7+</sup> | boolean | Yes | Yes | Whether the window has rounded corners. The default value is `false`. |
| isTransparent<sup>7+</sup> | boolean | Yes | Yes | Whether the window is transparent. The default value is `false`. |
## ColorSpace<sup>8+</sup>
......@@ -245,7 +245,7 @@ Creates a subwindow. This API uses an asynchronous callback to return the result
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ |
| ctx | [Context](js-apis-Context.md) | Yes | Current application context.|
| ctx | [Context](js-apis-Context.md) | Yes | Current application context.|
| id | string | Yes | Window ID. |
| type | [WindowType](#windowtype) | Yes | Window type. |
| callback | AsyncCallback&lt;[Window](#window)&gt; | Yes | Callback used to return the subwindow created. |
......@@ -430,7 +430,7 @@ Obtains the top window of the current application. This API uses an asynchronous
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ |
| ctx | [Context](js-apis-Context.md) | Yes | Current application context. |
| ctx | [Context](js-apis-Context.md) | Yes | Current application context.|
| callback | AsyncCallback&lt;[Window](#window)&gt; | Yes | Callback used to return the top window obtained. |
**Example**
......@@ -937,8 +937,8 @@ Obtains the area where this window cannot be displayed, for example, the system
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------------- | ---- | ------------------------------------------------------------ |
| Name | Type | Mandatory| Description |
| -------- |-----------------------------------------------| ---- | ------------------------------------------------------------ |
| type | [AvoidAreaType](#avoidareatype) | Yes | Type of the area. `TYPE_SYSTEM` indicates the default area of the system. `TYPE_CUTOUT` indicates the notch.|
| callback | AsyncCallback&lt;[AvoidArea](#avoidarea)&gt; | Yes | Callback used to return the area. |
......@@ -965,20 +965,21 @@ Obtains the area where this window cannot be displayed, for example, the system
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------- | ---- | ------------------------------------------------------------ |
| Name| Type | Mandatory| Description |
| ------ |----------------------------------| ---- | ------------------------------------------------------------ |
| type | [AvoidAreaType](#avoidareatype) | Yes | Type of the area. `TYPE_SYSTEM` indicates the default area of the system. `TYPE_CUTOUT` indicates the notch.|
**Return value**
| Type | Description |
| -------------------------------------- | ----------------------------------- |
| Type | Description |
|-----------------------------------------| ----------------------------------- |
| Promise&lt;[AvoidArea](#avoidarea)&gt; | Promise used to return the area.|
**Example**
```js
let promise = windowClass.getAvoidArea();
var type = window.AvoidAreaType.TYPE_SYSTEM;
let promise = windowClass.getAvoidArea(type);
promise.then((data)=> {
console.info('Succeeded in obtaining the area. Data:' + JSON.stringify(data));
}).catch((err)=>{
......@@ -1315,7 +1316,7 @@ Checks whether this window is displayed. This API uses an asynchronous callback
| Name | Type | Mandatory| Description |
| -------- | ---------------------------- | ---- | ------------------------------------------------------------ |
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return the result. The value `true` means that this window is displayed, and `false` means the opposite.|
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return the result. The value `true` means that the window is displayed, and `false` means the opposite.|
**Example**
......@@ -1341,7 +1342,7 @@ Checks whether this window is displayed. This API uses a promise to return the r
| Type | Description |
| ---------------------- | ------------------------------------------------------------ |
| Promise&lt;boolean&gt; | Promise used to return the result. The value `true` means that this window is displayed, and `false` means the opposite.|
| Promise&lt;boolean&gt; | Promise used to return the result. The value `true` means that the window is displayed, and `false` means the opposite.|
**Example**
......@@ -1408,9 +1409,9 @@ Enables listening for changes to the area where the window cannot be displayed.
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
| type | string | Yes | Event type. The value is fixed at `systemAvoidAreaChange`, indicating the event of changes to the area where the window cannot be displayed.|
| Name | Type | Mandatory| Description |
| -------- |------------------------------------------| ---- | ------------------------------------------------------- |
| type | string | Yes | Event type. The value is fixed at `systemAvoidAreaChange`, indicating the event of changes to the area where the window cannot be displayed.|
| callback | Callback&lt;[AvoidArea](#avoidarea)&gt; | Yes | Callback used to return the area. |
**Example**
......@@ -1431,10 +1432,10 @@ Disables listening for changes to the area where the window cannot be displayed.
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------------------- | ---- | ------------------------------------------------------------ |
| type | string | Yes | Event type. The value is fixed at `systemAvoidAreaChange`, indicating the event of changes to the area where the window cannot be displayed.|
| callback | Callback&lt;[AvoidArea](#avoidarea)&gt; | No | Callback used to return the area. |
| Name | Type | Mandatory| Description |
| -------- |------------------------------------------| ---- | ------------------------------------------------------- |
| type | string | Yes | Event type. The value is fixed at `systemAvoidAreaChange`, indicating the event of changes to the area where the window cannot be displayed.|
| callback | Callback&lt;[AvoidArea](#avoidarea)&gt; | No | Callback used to return the area. |
**Example**
......@@ -1658,7 +1659,7 @@ Sets the background color for this window. This API uses an asynchronous callbac
| Name | Type | Mandatory| Description |
| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
| color | string | Yes | Background color to set. The value is a hexadecimal color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| color | string | Yes | Background color to set. The value is a hexadecimal color code and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result. |
**Example**
......@@ -1686,7 +1687,7 @@ Sets the background color for this window. This API uses a promise to return the
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| color | string | Yes | Background color to set. The value is a hexadecimal color value and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
| color | string | Yes | Background color to set. The value is a hexadecimal color code and is case insensitive, for example, `#00FF00` or `#FF00FF00`.|
**Return value**
......@@ -1772,8 +1773,9 @@ setDimBehind(dimBehindValue: number, callback: AsyncCallback&lt;void&gt;): void
Sets the dimness of the window that is not on top. This API uses an asynchronous callback to return the result.
> **NOTE**: This API cannot be used.
> **NOTE**
>
> This API cannot be used.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
......@@ -1802,8 +1804,9 @@ setDimBehind(dimBehindValue: number): Promise&lt;void&gt;
Sets the dimness of the window that is not on top. This API uses a promise to return the result.
> **NOTE**: This API cannot be used.
> **NOTE**
>
> This API cannot be used.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
......@@ -1956,8 +1959,9 @@ setOutsideTouchable(touchable: boolean, callback: AsyncCallback&lt;void&gt;): vo
Sets whether the area outside the subwindow is touchable. This API uses an asynchronous callback to return the result.
> **NOTE**: This API cannot be used.
> **NOTE**
>
> This API cannot be used.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
......@@ -1986,8 +1990,9 @@ setOutsideTouchable(touchable: boolean): Promise&lt;void&gt;
Sets whether the area outside the subwindow is touchable. This API uses a promise to return the result.
> **NOTE**: This API cannot be used.
> **NOTE**
>
> This API cannot be used.
**System capability**: SystemCapability.WindowManager.WindowManager.Core
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 5919c0fe
# Search
The **\<Search>** component provides an input area for users to search.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Required Permissions
None
......@@ -18,34 +18,34 @@ Not supported
Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | string | No| - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No| - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png. |
| controller | SearchController | No| - | Controller. |
| Name | Type | Mandatory | Default Value | Description |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | No | - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No | - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No | - | Controller. |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. |
| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. |
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. |
| Name | Type | Default Value | Description |
| ----------------------- | ---------------------------------------- | ---- | --------------------- |
| searchButton | string | – | Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Placeholder text color. |
| placeholderFont | [Font](ts-types.md#font) | - | Placeholder text style. |
| textFont | [Font](ts-types.md#font) | - | Text font for the search text box. |
## Events
| Name | Description |
| -------- | -------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> - **value**: current text input. |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> - **value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> - **value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> - **value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> - **value**: text pasted. |
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController
......@@ -61,11 +61,11 @@ caretPosition(value: number): void
Sets the position of the caret.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | Yes | - | Length from the start of the character string to the position where the caret is located.|
......@@ -76,29 +76,30 @@ Sets the position of the caret.
@Entry
@Component
struct SearchExample {
@State changevalue: string = ''
@State submitvalue: string = ''
@State changeValue: string = ''
@State submitValue: string = ''
controller: SearchController = new SearchController()
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text(this.submitvalue)
Text(this.changevalue)
Search({value: '', placeholder: 'Type to search', controller: this.controller})
Text(this.submitValue)
Text(this.changeValue)
Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
.searchButton('Search')
.width(400)
.height(35)
.backgroundColor(Color.White)
.placeholderColor(Color.Grey)
.placeholderFont({ size: 50, weight: 10, family: 'serif', style: FontStyle.Normal })
.placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
.onSubmit((value: string) => {
this.submitvalue = value
this.submitValue = value
})
.onChange((value: string) => {
this.changevalue = value
this.changeValue = value
})
.margin({ top: 30 })
.margin({ top: 30, left:10, right:10 })
}
}
}
```
![search](figures/search.png)
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 5919c0fe
......@@ -33,23 +33,23 @@ Swiper(value:{controller?: SwiperController})
[Menu control](ts-universal-attributes-menu.md) is not supported.
| Name | Type | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | Length | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?:&nbsp;Length,<br>top?:&nbsp;Length,<br>right?:&nbsp;Length,<br>bottom?:&nbsp;Length,<br>size?:&nbsp;Length,<br>color?:&nbsp;Color,<br>selectedColor?:&nbsp;Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** |
| effectMode<sup>8+</sup> | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| Name | Type | Default Value | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 0 | Index of the child component currently displayed in the container. |
| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect. |
| interval | number | 3000 | Interval for automatic playback, in ms. |
| indicator | boolean | true | Whether to enable the navigation dots indicator. |
| loop | boolean | true | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5. |
| duration | number | 400 | Duration of the animation for switching child components, in ms. |
| vertical | boolean | false | Whether vertical swiping is used. |
| itemSpace | number \| string | 0 | Space between child components. |
| displayMode | SwiperDisplayMode | SwiperDisplayMode.Stretch | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| displayCount<sup>8+</sup> | number \| string | 1 | Number of elements to display. |
| effectMode<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | Swipe effect. For details, see **EdgeEffect**. |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?: [Length](ts-types.md#length),<br/>top?: [Length](ts-types.md#length),<br/>right?: [Length](ts-types.md#length),<br/>bottom?: [Length](ts-types.md#length),<br/>size?: [Length](ts-types.md#length),<br/>mask?: boolean,<br/>color?: [ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?: [ResourceColor](ts-types.md#resourcecolor8)<br/>} | - | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
## SwiperDisplayMode
......@@ -98,7 +98,7 @@ Stops this animation.
### onChange
onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
onChange( index: number) =&gt; void
Triggered when the index of the currently displayed component changes.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 5919c0fe
# Image Effect Configuration
# Image Effects
Image effects include background blur, content blur, grayscale, and much more.
> **NOTE**
>
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -15,28 +17,30 @@ None
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color,<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| blur | number | - | Adds the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color \| string \| [Resource](../../ui/ts-types.md#resource-type),<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| colorBlend<sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | number \| string | '0deg' |Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
| hueRotate | number \| string | '0deg' | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated for one more circle. In other words, the value **370deg** has the same effect as **10deg**.|
## Example
You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
```
```ts
// xxx.ets
@Entry
@Component
struct ImageEffectsExample {
build() {
Column({space: 10}) {
Column({space: 10}) {
// Blur the font.
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Text('text').blur(3).width('90%').height(40)
......
en/application-dev/reference/native-lib/Readme-EN.md
浏览文件 @ 5919c0fe
# Standard Libraries Supported by Native APIs
- [Standard Libraries](third_party_libc/musl.md)
- [Node_API](third_party_napi/napi.md)
- [libuv](third_party_libuv/libuv.md)
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
\ No newline at end of file
- [Standard Libraries](third_party_libc/musl.md)
- Appendix
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
- [EGL Symbols Exported from Native APIs](third_party_opengl/egl-symbol.md)
- [OpenGL ES 3.0 Symbols Exported from Native APIs](third_party_opengl/openglesv3-symbol.md)
\ No newline at end of file
en/application-dev/ui/Readme-EN.md
浏览文件 @ 5919c0fe
# UI Development
- [ArkUI Overview](arkui-overview.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- Framework Overview
- File Organization
- [Directory Structure](ts-framework-directory.md)
- [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
- ["js" Tag](ts-framework-js-tag.md)
- Resource Management
- [Resource File Categories](ui-ts-basic-resource-file-categories.md)
- [Accessing Resources](ts-resource-access.md)
- [Pixel Units](ts-pixel-units.md)
- Declarative Syntax
- [Overview](ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ts-general-ui-concepts.md)
- Declarative UI Description Specifications
- [Configuration Without Parameters](ts-parameterless-configuration.md)
- [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
- [Attribute Configuration](ts-attribution-configuration.md)
- [Event Configuration](ts-event-configuration.md)
- [Child Component Configuration](ts-child-component-configuration.md)
- Componentization
- [@Component](ts-component-based-component.md)
- [@Entry](ts-component-based-entry.md)
- [@Preview](ts-component-based-preview.md)
- [@Builder](ts-component-based-builder.md)
- [@Extend](ts-component-based-extend.md)
- [@CustomDialog](ts-component-based-customdialog.md)
- [@Styles](ts-component-based-styles.md)
- About UI State Management
- [Basic Concepts](ts-ui-state-mgmt-concepts.md)
- Managing Component States
- [@State](ts-component-states-state.md)
- [@Prop](ts-component-states-prop.md)
- [@Link](ts-component-states-link.md)
- Managing Application States
- [AppStorage](ts-application-states-appstorage.md)
- [PersistentStorage](ts-application-states-apis-persistentstorage.md)
- [Environment](ts-application-states-apis-environment.md)
- Managing Other States
- [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
- [@Consume and @Provide](ts-other-states-consume-provide.md)
- [@Watch](ts-other-states-watch.md)
- About Rendering Control Syntax
- [if/else](ts-rending-control-syntax-if-else.md)
- [ForEach](ts-rending-control-syntax-foreach.md)
- [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
- About @Component
- [build Function](ts-function-build.md)
- [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
- [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
- [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
- [About Syntactic Sugar](ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui-ts-basic-components-button.md)
- [Web](ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui-ts-layout-flex.md)
- [Grid Layout](ui-ts-layout-grid-container.md)
- [Media Query](ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui-ts-creating-project.md)
- [Getting to Know Components](ui-ts-components.md)
- [Creating a Simple Page](ui-ts-creating-simple-page.md)
- Defining Page Layout and Connection
- [Building a Food Data Model](ui-ts-building-data-model.md)
- [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
- [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
- JavaScript-based Web-like Development Paradigm
- [Overview](ui-js-overview.md)
- Framework
......@@ -73,73 +142,3 @@
- [Animation Effect](ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui-js-animate-frame.md)
- [Custom Components](ui-js-custom-components.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- Framework Overview
- File Organization
- [Directory Structure](ts-framework-directory.md)
- [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md)
- ["js" Tag](ts-framework-js-tag.md)
- Resource Management
- [Resource File Categories](ui-ts-basic-resource-file-categories.md)
- [Accessing Resources](ts-resource-access.md)
- [Pixel Units](ts-pixel-units.md)
- [Types](ts-types.md)
- Declarative Syntax
- [Overview](ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ts-general-ui-concepts.md)
- Declarative UI Description Specifications
- [Configuration Without Parameters](ts-parameterless-configuration.md)
- [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
- [Attribute Configuration](ts-attribution-configuration.md)
- [Event Configuration](ts-event-configuration.md)
- [Child Component Configuration](ts-child-component-configuration.md)
- Componentization
- [@Component](ts-component-based-component.md)
- [@Entry](ts-component-based-entry.md)
- [@Preview](ts-component-based-preview.md)
- [@Builder](ts-component-based-builder.md)
- [@Extend](ts-component-based-extend.md)
- [@CustomDialog](ts-component-based-customdialog.md)
- [@Styles](ts-component-based-styles.md)
- About UI State Management
- [Basic Concepts](ts-ui-state-mgmt-concepts.md)
- Managing Component States
- [@State](ts-component-states-state.md)
- [@Prop](ts-component-states-prop.md)
- [@Link](ts-component-states-link.md)
- Managing Application States
- [AppStorage](ts-application-states-appstorage.md)
- [PersistentStorage](ts-application-states-apis-persistentstorage.md)
- [Environment](ts-application-states-apis-environment.md)
- Managing Other States
- [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
- [@Consume and @Provide](ts-other-states-consume-provide.md)
- [@Watch](ts-other-states-watch.md)
- About Rendering Control Syntax
- [if/else](ts-rending-control-syntax-if-else.md)
- [ForEach](ts-rending-control-syntax-foreach.md)
- [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
- About @Component
- [build Function](ts-function-build.md)
- [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
- [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
- [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
- [About Syntactic Sugar](ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui-ts-basic-components-button.md)
- [Web](ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui-ts-layout-flex.md)
- [Grid Layout](ui-ts-layout-grid-container.md)
- [Media Query](ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui-ts-creating-project.md)
- [Getting to Know Components](ui-ts-components.md)
- [Creating a Simple Page](ui-ts-creating-simple-page.md)
- Defining Page Layout and Connection
- [Building a Food Data Model](ui-ts-building-data-model.md)
- [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
- [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
- [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 5919c0fe
......@@ -85,11 +85,11 @@ The following is an example:
```css
/* Page style xxx.css */
/\* Set the style for all <div> components. \*/
/* Set the style for all <div> components. */
div {
flex-direction: column;
}
/* Set the style for the component whose class is title. */
/* Set the style for the component whose class is title.*/
.title {
font-size: 30px;
}
......@@ -101,13 +101,13 @@ div {
.title, .content {
padding: 5px;
}
/\* Set the style for all texts of components whose class is container.\*/
/* Set the style for all texts of components whose class is container.*/
.container text {
color: \#007dff;
}
/\* Set the style for direct descendant texts of components whose class is container.\*/
/* Set the style for direct descendant texts of components whose class is container.*/
.container &gt; text {
color: \#fa2a2d;
color: #fa2a2d;
}
```
......@@ -128,7 +128,7 @@ When multiple selectors point to the same element, their priorities are as follo
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
| Pseudo-class | Available Components | Description |
......
en/application-dev/ui/ts-application-states-appstorage.md
浏览文件 @ 5919c0fe
......@@ -21,7 +21,7 @@ By default, the attributes in the AppStorage are changeable. If needed, AppStora
| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> The attribute value used in the prop method must be of a simple type. |
| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>**NOTE**<br/>The attribute value used in the prop method must be of a simple type. |
| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
| Get | key: string | T or undefined | Obtains the value of the specified key. |
| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
......@@ -51,9 +51,8 @@ One-way data binding can be established between components and the AppStorage th
## Example
```
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
```ts
// xxx.ets
@Entry
@Component
......
en/application-dev/ui/ts-resource-access.md
浏览文件 @ 5919c0fe
......@@ -5,10 +5,13 @@
To reference an application resource in a project, use the `"$r('app.type.name')"` format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
When referencing resources in the **rawfile** sub-directory, use the `"$rawfile('filename')"` format. Currently, **$rawfile** allows only the **\<Image>** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
> **NOTE**
>
> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined.
>
> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../reference/apis/js-apis-resource-manager.md#getstring).
In the **.ets** file, you can use the resources defined in the **resources** directory.
......@@ -47,7 +50,7 @@ Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile direc
System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
To reference a system resource, use the ```"$r('sys.type.resource_id')"``` format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID.
```ts
Text('Hello')
......
en/application-dev/ui/ts-syntactic-sugar.md
浏览文件 @ 5919c0fe
# About Syntactic Sugar
## Decorators
A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
A decorator **@Decorator** can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
```
In the example below, the elements decorated by **@Component** take on the form of a component, and the variables decorated by **@State** can be used to represent states.
```ts
@Component
struct MyComponent {
@State count: number = 0
}
```
Multiple decorators can be defined on a single line, as shown below:
```
```ts
@Entry @Component struct MyComponent {
}
```
However, you are advised to define the decorators on multiple lines, as shown below:
```
```ts
@Entry
@Component
struct MyComponent {
......@@ -36,30 +39,29 @@ struct MyComponent {
### Supported Decorators
| Decorator | Decorates... | Description |
| -------- | -------- | -------- |
| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
| Decorator | Decorates... | Description |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| @Component | struct | The decorated structure has the component-based capability. The **build** method must be implemented to update the UI.|
| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
| @Preview | struct | Custom components decorated by **@Preview** can be previewed in DevEco Studio. When the target page is loaded, the custom components decorated by **@Preview** are created and displayed.|
| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component.|
| @Extend | Methods | This decorator adds attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component.|
| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the **build** method of the component will be called to update the UI. |
| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated.|
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of **@Observed** decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page rendering.|
| @Watch | Variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, or **@StorageLink** | This decorator is used to listen for the changes of the state variables. The application can register a callback method through **@Watch**. |
## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
```
```ts
Column() {
Image('1.jpg')
.alt('error.jpg')
......@@ -71,10 +73,9 @@ Column() {
## struct
Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
Components can be implemented based on **struct**s. Components cannot inherit from each other. The **struct**s implemented components can be created and destroyed more quickly than **class** implemented components.
```
```ts
@Component
struct MyComponent {
@State data: string = ''
......@@ -87,10 +88,9 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword
You can omit the new keyword when instantiating a struct.
You can omit the **new** keyword when instantiating a **struct**.
```
```ts
// Definition
@Component
struct MyComponent {
......@@ -98,7 +98,7 @@ struct MyComponent {
}
}
// Use
// Usage
Column() {
MyComponent()
}
......@@ -114,23 +114,22 @@ new Column() {
TypeScript has the following restrictions on generators:
- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
- Expressions can be used only in character strings (${expression}), **if** conditions, **ForEach** parameters, and component parameters.
- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- The generator function cannot contain local variables.
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
None of the above restrictions apply to anonymous function implementations of event-handling functions (such as **onClick**)
Incorrect:
```
```ts
build() {
let a: number = 1 // invalid: variable declaration not allowed
Column() {
Text('Hello ${this.myName.toUpperCase()}') // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
Text(`Hello ${this.myName.toUpperCase()}`) // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial() // invalid: no function calls
Text(this.calcTextValue()) // this function call is ok.
......@@ -139,11 +138,13 @@ build() {
## $$
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
**$$** supports two-way binding for simple variables and **@State**, **@Link**, and **@Prop** decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the \<Radio> component.
Currently, **$$** supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the **@State** decorated variable, and the **checked** attribute of the **\<Radio>** component.
```
```ts
// xxx.ets
@Entry
@Component
struct bindPopup {
......@@ -166,3 +167,29 @@ struct bindPopup {
}
```
## Restrictions on Declaring Multiple Data Types of State Variables
If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time.
Example:
```ts
@Entry
@Component
struct Index {
// Incorrect: @State message: string | Resource = 'Hello World'
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(`${ this.message }`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
en/application-dev/ui/ts-types.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# Types
## Length Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Length | string \| number | Length unit. If the input is a number, use vp. If the input is a string, explicitly specify the unit, for example, '10px', or specify the length in percentage, for example, '100%'.|
## Angle Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Angle | string \| number | Angle unit. If the input is a number, use deg. If the input is a string, use either of the following angle units:<br>- deg: for example, '100deg'<br>- rad: for example, '3.14rad' |
## Point Type
| Name| Type| Description|
| -------- | -------- | -------- |
| Point | [Length, Length] | Coordinates of a point. The first value is the x-axis coordinate, and the second value is the y-axis coordinate.|
## Color Type
The Color type used by component attribute methods is described as follows:
| Name| Type| Description|
| -------- | -------- | -------- |
| Color | string \| number \| Color | Color information. If the input is a string, use rgb or rgba to specify the color. If the input is a number, use Hex format to specify the color. If the input is a Color enum, use a color value to specify the color.<br>- 'rgb(255, 255, 255)'<br>- 'rgba(255, 255, 255, 1.0)'<br>- Hex format: 0xrrggbb, 0xaarrggbb, '\#FFFFFF'<br>- Enum: Color.Black, Color.White |
The supported Color enums are described as follows:
| Color| Value| Illustration|
| -------- | -------- | -------- |
| Black | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
| Blue | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
| Brown | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
| Gray | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
| Green | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
| Orange | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
| Pink | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
| Red | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
| White | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
| Yellow | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
## ColorStop Type
ColorStop is used to describe the progressive color stop.
| Name| Type| Description|
| -------- | -------- | -------- |
| ColorStop | [Color, number] | Type of the progressive color stop. The first parameter specifies the color value, and the second parameter specifies the ratio of 0 to 1.|
## Resource Type
The Resource type is used to reference resources for setting the value of a component attribute.
You can use ` $r ` or ` $rawfile ` to create a Resource object. For details, see [Resource Access](ts-application-resource-access.md).
- ` $r('belonging.type.name') `
` belonging ` : system or application resource. The value can be 'sys' or 'app'.
` type ` : resource type, which can be 'color', 'float', 'string', or 'media'.
` name ` : resource name, which is determined during resource definition.
- ` $rawfile('filename') `
` filename ` : name of the file in resources/rawfile of the project.
| Name| Type| Description|
| -------- | -------- | -------- |
| Resource | {<br>readonly id: [number];<br>readonly type: [number];<br>readonly params?: any[];<br>} | **id**: resource ID.<br>**type**: resource type (enumerated value).<br>**params**: optional parameters.<br>After a **Resource** object is created using `$r` or `$rawfile`, modifying attribute values of the object is prohibited. |
## ResourceStr Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceStr | string \| Resource| Resource string.|
## ResourceColor Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| ResourceColor | Color \| number \| string \| Resource | Resource color.|
## Font Type<sup>8+</sup>
| Name| Type| Description|
| -------- | -------- | -------- |
| Font | {<br>size?: Length;<br>weight?: FontWeight \| number \| string;<br>family?: string \| Resource;<br>style?: FontStyle;<br>} | Text style.<br>**size**: font size. For the number type, use the unit fp.<br>weight: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight.<br>**family**: font family. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.<br>**style**: font style. |
## CustomBuilder Type<sup>8+</sup>
You can use CustomBuilder to define custom UI descriptions in component attribute methods.
| Name| Type| Description|
| -------- | -------- | -------- |
| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by @Builder. For details, see [@Builder](ts-component-based-builder.md).|
## Example
```
@Entry
@Component
struct dataTypeExample {
build() {
Column({ space: 5 }) {
Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('320').width(320).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('45deg')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
Text('45rad')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
Text('0xF9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(0xF9CF93)
Text('#F9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('#F9CF93')
Text('rgb(249, 207, 147)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
Text('rgba(249, 207, 147, 1.0)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
Text('Color.Yellow')
.textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(Color.Yellow)
}
.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001219982719](figures/en-us_image_0000001219982719.png)
en/application-dev/ui/ui-js-components-switch.md
浏览文件 @ 5919c0fe
......@@ -9,14 +9,15 @@ The **&lt;switch&gt;** component is used to switch between the on and off states
Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```
```html
<!-- xxx.hml -->
<div class="container">
<switch></switch>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -31,9 +32,9 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
## Adding Attributes and Methods
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
```
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
......@@ -41,28 +42,26 @@ Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
switch{
// Color of the selected text
switch {
texton-color: #002aff;
// Color of the unselected text
textoff-color: silver;
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -84,7 +83,8 @@ export default {
![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **NOTE**
>
> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
......@@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is
Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="change">
......@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is
```
```
```css
/* xxx.css */
.container {
width: 100%;
height: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
......@@ -168,7 +168,7 @@ switch{
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
en/application-dev/website.md
浏览文件 @ 5919c0fe
......@@ -11,7 +11,6 @@
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [Resource File Categories](quick-start/basic-resource-file-categories.md)
- [SysCap](quick-start/syscap.md)
- Development
- Ability Development
......@@ -43,12 +42,11 @@
- [Rules for Accessing Application Code Files](ui/ts-framework-file-access-rules.md)
- ["js" Tag](ui/ts-framework-js-tag.md)
- Resource Access
- [Accessing Application Resources](ui/ts-application-resource-access.md)
- [Accessing System Resources](ui/ts-system-resource-access.md)
- [Media Resource Types](ui/ts-media-resource-type.md)
- [Resource File Categories](ui/ui-ts-basic-resource-file-categories.md)
- [Accessing Application Resources](ui/ts-resource-access.md)
- [Pixel Units](ui/ts-pixel-units.md)
- [Types](ui/ts-types.md)
- Declarative Syntax
- [Overview](ui/ts-syntax-intro.md)
- General UI Description Specifications
- [Basic Concepts](ui/ts-general-ui-concepts.md)
......@@ -180,22 +178,15 @@
- [Custom Components](ui/ui-js-custom-components.md)
- Common Event and Notification
- [Common Event and Notification Overview](notification/notification-brief.md)
- Common Event
- [Common Event Development](notification/common-event.md)
- Notification
- [Notification Development](notification/notification.md)
- Debugging Tools
- [Common Event Development](notification/common-event.md)
- [Notification Development](notification/notification-guidelines.md)
- Agent-Powered Scheduled Reminder
- [Agent-Powered Scheduled Reminder Overview](notification/background-agent-scheduled-reminder-overview.md)
- [Agent-Powered Scheduled Reminder Development](notification/background-agent-scheduled-reminder-guide.md)
- [Debugging Assistant Usage](notification/assistant-guidelines.md)
- Window Manager
- Window
- [Window Overview](windowmanager/window-overview.md)
- [Window Development](windowmanager/window-guidelines.md)
- Display
- [Display Overview](windowmanager/display-overview.md)
- [Display Development](windowmanager/display-guidelines.md)
- Screenshot
- [Screenshot Overview](windowmanager/screenshot-overview.md)
- [Screenshot Development](windowmanager/screenshot-guidelines.md)
- [Window Overview](windowmanager/window-overview.md)
- [Window Development](windowmanager/window-guidelines.md)
- WebGL
- [WebGL Overview](webgl/webgl-overview.md)
- [WebGL Development](webgl/webgl-guidelines.md)
......@@ -212,6 +203,10 @@
- Image
- [Image Development](media/image.md)
- Security
- Access Control
- [Access Control Overview](security/accesstoken-overview.md)
- [Access Control Development](security/accesstoken-guidelines.md)
- [Permission List](security/permission-list.md)
- User Authentication
- [User Authentication Overview](security/userauth-overview.md)
- [User Authentication Development](security/userauth-guidelines.md)
......@@ -220,9 +215,6 @@
- [HUKS Development](security/huks-guidelines.md)
- hapsigner
- [hapsigner Guide](security/hapsigntool-guidelines.md)
- Access Control
- [Access Control Overview](security/accesstoken-overview.md)
- [Access Control Development](security/accesstoken-guidelines.md)
- Connectivity
- Network Management
- [Network Management Overview](connectivity/net-mgmt-overview.md)
......@@ -250,15 +242,13 @@
- Distributed Data Object
- [Distributed Data Object Overview](database/database-distributedobject-overview.md)
- [Distributed Data Object Development](database/database-distributedobject-guidelines.md)
- Agent-Powered Scheduled Reminders
- [Agent-Powered Scheduled Reminder Overview](background-agent-scheduled-reminder/background-agent-scheduled-reminder-overview.md)
- [Agent-Powered Scheduled Reminder Development](background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md)
- Background Task Management
- [Background Task Management Overview](background-task-management/background-task-overview.md)
- [Background Task Management Development](background-task-management/background-task-dev-guide.md)
- Work Scheduler
- [Work Scheduler Overview](work-scheduler/work-scheduler-overview.md)
- [Work Scheduler Development](work-scheduler/work-scheduler-dev-guide.md)
- Task Management
- Background Task Management
- [Background Task Management Overview](background-task-management/background-task-overview.md)
- [Background Task Management Development](background-task-management/background-task-dev-guide.md)
- Work Scheduler
- [Work Scheduler Overview](task-management/work-scheduler-overview.md)
- [Work Scheduler Development](task-management/work-scheduler-dev-guide.md)
- Device
- USB Service
- [USB Service Overview](device/usb-overview.md)
......@@ -292,7 +282,10 @@
- [Internationalization Development (i18n)](internationalization/i18n-guidelines.md)
- Native APIs
- [Using Native APIs in Application Projects](napi/napi-guidelines.md)
- Tools
- [Drawing Development](napi/drawing-guidelines.md)
- [Raw File Development](napi/rawfile-guidelines.md)
- [NativeWindow Development](napi/native-window-guidelines.md)
- Tools
- [DevEco Studio (OpenHarmony) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
- Hands-On Tutorials
- [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
......@@ -562,8 +555,8 @@
- [@ohos.application.formError](reference/apis/js-apis-formerror.md)
- [@ohos.application.formHost](reference/apis/js-apis-formhost.md)
- [@ohos.application.formInfo](reference/apis/js-apis-formInfo.md)
- [@ohos.application.missionManager](reference/apis/js-apis-missionManager.md)
- [@ohos.application.formProvider](reference/apis/js-apis-formprovider.md)
- [@ohos.application.missionManager](reference/apis/js-apis-missionManager.md)
- [@ohos.ability.particleAbility](reference/apis/js-apis-particleAbility.md)
- [@ohos.application.ServiceExtensionAbility](reference/apis/js-apis-service-extension-ability.md)
- [@ohos.application.StartOptions](reference/apis/js-apis-application-StartOptions.md)
......@@ -575,19 +568,23 @@
- [AbilityContext](reference/apis/js-apis-ability-context.md)
- [abilityDelegator](reference/apis/js-apis-application-abilityDelegator.md)
- [abilityDelegatorArgs](reference/apis/js-apis-application-abilityDelegatorArgs.md)
- [AbilityManager](reference/apis/js-apis-abilityManager.md)
- [abilityMonitor](reference/apis/js-apis-application-abilityMonitor.md)
- [AbilityRunningInfo](reference/apis/js-apis-abilityrunninginfo.md)
- [AbilityStageContext](reference/apis/js-apis-abilitystagecontext.md)
- [Context](reference/apis/js-apis-application-context.md)
- [ExtensionAbilityContext](reference/apis/js-apis-extension-ability-context.md)
- [ExtensionAbilityInfo](reference/apis/js-apis-extensionAbilityInfo.md)
- [ExtensionContext](reference/apis/js-apis-extension-context.md)
- [ExtensionRunningInfo](reference/apis/js-apis-extensionrunninginfo.md)
- [FormExtensionContext](reference/apis/js-apis-formextensioncontext.md)
- [MissionInfo](reference/apis/js-apis-application-missionInfo.md)
- [MissionSnapshot](reference/apis/js-apis-application-MissionSnapshot.md)
- [PermissionRequestResult](reference/apis/js-apis-permissionrequestresult.md)
- [ProcessRunningInfo](reference/apis/js-apis-processrunninginfo.md)
- [ServiceExtAbilityContext](reference/apis/js-apis-serviceExtAbilityContext.md)
- [ServiceExtensionContext](reference/apis/js-apis-service-extension-context.md)
- [shellCmdResult](reference/apis/js-apis-application-shellCmdResult.md)
- [AbilityStageContext](reference/apis/js-apis-abilityStageContext.md)
- Common Event and Notification
- [@ohos.commonEvent](reference/apis/js-apis-commonEvent.md)
- [@ohos.events.emitter](reference/apis/js-apis-emitter.md)
......@@ -598,6 +595,14 @@
- [@ohos.bundle](reference/apis/js-apis-Bundle.md)
- [@ohos.bundleState ](reference/apis/js-apis-deviceUsageStatistics.md)
- [@ohos.zlib](reference/apis/js-apis-zlib.md)
- [AbilityInfo](reference/apis/js-apis-bundle-AbilityInfo.md)
- [ApplicationInfo](reference/apis/js-apis-bundle-ApplicationInfo.md)
- [BundleInfo](reference/apis/js-apis-bundle-BundleInfo.md)
- [CustomizeData](reference/apis/js-apis-bundle-CustomizeData.md)
- [ExtensionAbilityInfo](reference/apis/js-apis-bundle-ExtensionAbilityInfo.md)
- [HapModuleInfo](reference/apis/js-apis-bundle-HapModuleInfo.md)
- [Metadata](reference/apis/js-apis-bundle-Metadata.md)
- [ModuleInfo](reference/apis/js-apis-bundle-ModuleInfo.md)
- UI Page
- [@ohos.animator](reference/apis/js-apis-animator.md)
- [@ohos.mediaquery](reference/apis/js-apis-mediaquery.md)
......@@ -611,7 +616,6 @@
- [webgl2](reference/apis/js-apis-webgl2.md)
- Media
- [@ohos.multimedia.audio](reference/apis/js-apis-audio.md)
- [@ohos.multimedia.camera](reference/apis/js-apis-camera.md)
- [@ohos.multimedia.image](reference/apis/js-apis-image.md)
- [@ohos.multimedia.media](reference/apis/js-apis-media.md)
- [@ohos.multimedia.medialibrary](reference/apis/js-apis-medialibrary.md)
......@@ -635,7 +639,6 @@
- [@ohos.data.distributedData](reference/apis/js-apis-distributed-data.md)
- [@ohos.data.distributedDataObject](reference/apis/js-apis-data-distributedobject.md)
- [@ohos.data.rdb](reference/apis/js-apis-data-rdb.md)
- [@ohos.settings](reference/apis/js-apis-settings.md)
- [@ohos.data.storage](reference/apis/js-apis-data-storage.md)
- [resultSet](reference/apis/js-apis-data-resultset.md)
- File Management
......@@ -643,6 +646,7 @@
- [@ohos.environment](reference/apis/js-apis-environment.md)
- [@ohos.fileio](reference/apis/js-apis-fileio.md)
- [@ohos.fileManager](reference/apis/js-apis-filemanager.md)
- [@ohos.securityLabel](reference/apis/js-apis-securityLabel.md)
- [@ohos.statfs](reference/apis/js-apis-statfs.md)
- [@ohos.storageStatistics](reference/apis/js-apis-storage-statistics.md)
- [@ohos.volumeManager](reference/apis/js-apis-volumemanager.md)
......@@ -657,12 +661,15 @@
- Network Management
- [@ohos.net.connection](reference/apis/js-apis-net-connection.md)
- [@ohos.net.http](reference/apis/js-apis-http.md)
- [@ohos.request](reference/apis/js-apis-request.md)
- [@ohos.net.socket](reference/apis/js-apis-socket.md)
- [@ohos.net.webSocket](reference/apis/js-apis-webSocket.md)
- [@ohos.request](reference/apis/js-apis-request.md)
- Connectivity
- [@ohos.bluetooth](reference/apis/js-apis-bluetooth.md)
- [@ohos.connectedTag](reference/apis/js-apis-connectedTag.md)
- [@ohos.nfc.cardEmulation](reference/apis/js-apis-cardEmulation.md)
- [@ohos.nfc.controller](reference/apis/js-apis-nfcController.md)
- [@ohos.nfc.tag](reference/apis/js-apis-nfcTag.md)
- [@ohos.rpc](reference/apis/js-apis-rpc.md)
- [@ohos.wifi](reference/apis/js-apis-wifi.md)
- [@ohos.wifiext](reference/apis/js-apis-wifiext.md)
......@@ -681,6 +688,7 @@
- [@ohos.screenLock](reference/apis/js-apis-screen-lock.md)
- [@ohos.systemTime](reference/apis/js-apis-system-time.md)
- [@ohos.wallpaper](reference/apis/js-apis-wallpaper.md)
- [console](reference/apis/js-apis-logs.md)
- [Timer](reference/apis/js-apis-timer.md)
- Device Management
- [@ohos.batteryInfo ](reference/apis/js-apis-battery-info.md)
......@@ -695,6 +703,7 @@
- [@ohos.power](reference/apis/js-apis-power.md)
- [@ohos.runningLock](reference/apis/js-apis-runninglock.md)
- [@ohos.sensor](reference/apis/js-apis-sensor.md)
- [@ohos.settings](reference/apis/js-apis-settings.md)
- [@ohos.systemParameter](reference/apis/js-apis-system-parameter.md)
- [@ohos.thermal](reference/apis/js-apis-thermal.md)
- [@ohos.update](reference/apis/js-apis-update.md)
......@@ -751,4 +760,3 @@
- [@system.sensor](reference/apis/js-apis-system-sensor.md)
- [@system.storage](reference/apis/js-apis-system-storage.md)
- [@system.vibrator](reference/apis/js-apis-system-vibrate.md)
- [console](reference/apis/js-apis-logs.md)
\ No newline at end of file
en/application-dev/windowmanager/Readme-EN.md
浏览文件 @ 5919c0fe
# Window Manager
* Window
* [Window Overview](window-overview.md)
* [Window Development](window-guidelines.md)
* Display
* [Display Overview](display-overview.md)
* [Display Development](display-guidelines.md)
* Screenshot
* [Screenshot Overview](screenshot-overview.md)
* [Screenshot Development](screenshot-guidelines.md)
- [Window Overview](window-overview.md)
- [Window Development](window-guidelines.md)
en/application-dev/windowmanager/display-guidelines.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# Display Development
## When to Use
An application can obtain the default display object or all display objects by calling the **Display** APIs.
## Available APIs
For details about the APIs, see [Display](../reference/apis/js-apis-display.md).
## How to Develop
Call **getDefaultDisplay(): Promise\<Display>** to obtain the default display object. An example code snippet is as follows:
```js
import display from '@ohos.display' // Import the module.
let disp; // disp is used to save the default display object.
display.getDefaultDisplay().then((disp) => {
console.log('display.getDefaultDisplay success, display :' + JSON.stringify(disp));
}, (err) => {
console.log('display.getDefaultDisplay failed, error : ' + JSON.stringify(err));
})
```
en/application-dev/windowmanager/display-overview.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# Display Overview
The **Display** APIs present the window layout of an application. The display attributes include the display ID, name, active status, state, refresh rate, rotation angle, width, height, pixel density, font scaling factor, and exact physical dots per inch.
## Basic Concepts
**Display**: a screen visible to an application. It can be used as a window container. It is an abstract concept that is different from a physical screen.
en/application-dev/windowmanager/screenshot-guidelines.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# Screenshot Development
## When to Use
You can specify a display device to take screenshots, with screenshot parameters specified.
## Available APIs
For details about the APIs, see [Screenshot](../reference/apis/js-apis-screenshot.md).
## How to Develop
Call **save(options?: ScreenshotOptions): Promise<image.PixelMap>** to take a screenshot. In this API, **options** is a predefined screenshot parameter. If **options** is unspecified, the entire screen is captured by default. An example code snippet is as follows:
```js
import screenshot from '@ohos.screenshot' // Import the module.
// Set screenshot parameters.
var ScreenshotOptions = {
"screenRect": {
"left": 200,
"top": 100,
"width": 200,
"height": 200},
"imageSize": {
"width": 300,
"height": 300},
"rotation": 0
};
let image; // image is used to save the screenshot.
screenshot.save(ScreenshotOptions).then((image) => {
console.log('screenshot.save success, screenshot image :' + JSON.stringify(image));
}, (err) => {
console.log('screenshot.save failed, error : ' + JSON.stringify(err));
})
```
en/application-dev/windowmanager/screenshot-overview.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# Screenshot Overview
The screenshot APIs, with parameters, enable you to take screenshots on display devices.
## Basic Concepts
Screenshot: provides the screenshot capability.
en/device-dev/driver/driver-platform-uart-des.md
浏览文件 @ 5919c0fe
# UART<a name="EN-US_TOPIC_0000001160652800"></a>
# UART
## Overview<a name="section833012453535"></a>
The Universal Asynchronous Receiver/Transmitter \(UART\) is a universal serial data bus used for asynchronous communication. It enables bi-directional communication between devices in full-duplex mode.
## Overview
The Universal Asynchronous Receiver/Transmitter (UART) is a universal serial data bus used for asynchronous communication. It enables bi-directional communication between devices in full-duplex mode.
UART is widely used to print information for debugging or to connect to various external modules such as GPS and Bluetooth.
A UART is connected to other modules through two wires \(as shown in [Figure 1](#fig68294715408)\) or four wires \(as shown in [Figure 2](#fig179241542163112)\).
- TX: TX pin of the transmitting UART. It is connected to the RX pin of the peer UART.
- RX: RX pin of the receiving UART. It is connected to the TX pin of the peer UART.
- RTS: Request to Send signal pin. It is connected to the CTS pin of the peer UART and is used to indicate whether the local UART is ready to receive data.
- CTS: Clear to Send signal pin. It is connected to the RTS pin of the peer UART and is used to indicate whether the local UART is allowed to send data to the peer end.
**Figure 1** 2-wire UART communication<a name="fig68294715408"></a>
![](figures/2-wire-uart-communication.png "2-wire-uart-communication")
**Figure 2** 4-wire UART communication<a name="fig179241542163112"></a>
![](figures/4-wire-uart-communication.png "4-wire-uart-communication")
The transmitting and receiving UARTs must ensure that they have the same settings on particular attributes such as the baud rate and data format \(start bit, data bit, parity bit, and stop bit\) before they start to communicate. During data transmission, a UART sends data to the peer end over the TX pin and receives data from the peer end over the RX pin. When the size of the buffer used by a UART for storing received data reaches the preset threshold, the RTS signal of the UART changes to **1** \(data cannot be received\), and the peer UART stops sending data to it because its CTS signal does not allow it to send data.
## Available APIs<a name="section1928742202715"></a>
The UART interface defines a set of common functions for operating a UART port, including obtaining and releasing device handles, reading and writing data of a specified length, and obtaining and setting the baud rate, as well as the device attributes.
**Table 1** APIs for the UART driver
<a name="table1731550155318"></a>
<table><thead align="left"><tr id="row1223152681611"><th class="cellrowborder" valign="top" width="26.619999999999997%" id="mcps1.2.4.1.1"><p id="p210413571619"><a name="p210413571619"></a><a name="p210413571619"></a><strong id="b4100105545211"><a name="b4100105545211"></a><a name="b4100105545211"></a>Capability</strong></p>
</th>
<th class="cellrowborder" valign="top" width="31.369999999999997%" id="mcps1.2.4.1.2"><p id="p810403511614"><a name="p810403511614"></a><a name="p810403511614"></a><strong id="b1653121711186"><a name="b1653121711186"></a><a name="b1653121711186"></a>Function</strong></p>
</th>
<th class="cellrowborder" valign="top" width="42.01%" id="mcps1.2.4.1.3"><p id="p110418354161"><a name="p110418354161"></a><a name="p110418354161"></a><strong id="b69108168153412"><a name="b69108168153412"></a><a name="b69108168153412"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row1638573613415"><td class="cellrowborder" rowspan="2" valign="top" width="26.619999999999997%" headers="mcps1.2.4.1.1 "><p id="p917154316414"><a name="p917154316414"></a><a name="p917154316414"></a>Obtaining and releasing device handles</p>
<p id="p9596111154212"><a name="p9596111154212"></a><a name="p9596111154212"></a></p>
</td>
<td class="cellrowborder" valign="top" width="31.369999999999997%" headers="mcps1.2.4.1.2 "><p id="p20385163614412"><a name="p20385163614412"></a><a name="p20385163614412"></a>UartOpen</p>
</td>
<td class="cellrowborder" valign="top" width="42.01%" headers="mcps1.2.4.1.3 "><p id="p12101135184213"><a name="p12101135184213"></a><a name="p12101135184213"></a>Obtains the UART device handle.</p>
</td>
</tr>
<tr id="row5950143316415"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p149501733134113"><a name="p149501733134113"></a><a name="p149501733134113"></a>UartClose</p>
</td>
<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p371073520422"><a name="p371073520422"></a><a name="p371073520422"></a>Releases a specified UART device handle.</p>
</td>
</tr>
<tr id="row34145016535"><td class="cellrowborder" rowspan="2" valign="top" width="26.619999999999997%" headers="mcps1.2.4.1.1 "><p id="p229610227124"><a name="p229610227124"></a><a name="p229610227124"></a>Reading and writing data</p>
<p id="p131072201215"><a name="p131072201215"></a><a name="p131072201215"></a></p>
</td>
<td class="cellrowborder" valign="top" width="31.369999999999997%" headers="mcps1.2.4.1.2 "><p id="p8296182221219"><a name="p8296182221219"></a><a name="p8296182221219"></a>UartRead</p>
</td>
<td class="cellrowborder" valign="top" width="42.01%" headers="mcps1.2.4.1.3 "><p id="p16297172213125"><a name="p16297172213125"></a><a name="p16297172213125"></a>Reads data of a specified length from a UART device.</p>
</td>
</tr>
<tr id="row11585016539"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p1095722493616"><a name="p1095722493616"></a><a name="p1095722493616"></a>UartWrite</p>
</td>
<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p15297162215122"><a name="p15297162215122"></a><a name="p15297162215122"></a>Writes data of a specified length into a UART device.</p>
</td>
</tr>
<tr id="row8687115843715"><td class="cellrowborder" rowspan="2" valign="top" width="26.619999999999997%" headers="mcps1.2.4.1.1 "><p id="p196317143813"><a name="p196317143813"></a><a name="p196317143813"></a>Obtaining and setting the baud rate</p>
</td>
<td class="cellrowborder" valign="top" width="31.369999999999997%" headers="mcps1.2.4.1.2 "><p id="p166885582375"><a name="p166885582375"></a><a name="p166885582375"></a>UartGetBaud</p>
</td>
<td class="cellrowborder" valign="top" width="42.01%" headers="mcps1.2.4.1.3 "><p id="p13688358183716"><a name="p13688358183716"></a><a name="p13688358183716"></a>Obtains the UART baud rate.</p>
</td>
</tr>
<tr id="row18987529382"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p698719214383"><a name="p698719214383"></a><a name="p698719214383"></a>UartSetBaud</p>
</td>
<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p1398712123810"><a name="p1398712123810"></a><a name="p1398712123810"></a>Sets the UART baud rate.</p>
</td>
</tr>
<tr id="row1551850115317"><td class="cellrowborder" rowspan="2" valign="top" width="26.619999999999997%" headers="mcps1.2.4.1.1 "><p id="p1629782201218"><a name="p1629782201218"></a><a name="p1629782201218"></a>Obtaining and setting device attributes</p>
<p id="p10308192211216"><a name="p10308192211216"></a><a name="p10308192211216"></a></p>
</td>
<td class="cellrowborder" valign="top" width="31.369999999999997%" headers="mcps1.2.4.1.2 "><p id="p32972022151218"><a name="p32972022151218"></a><a name="p32972022151218"></a>UartGetAttribute</p>
</td>
<td class="cellrowborder" valign="top" width="42.01%" headers="mcps1.2.4.1.3 "><p id="p13297122216123"><a name="p13297122216123"></a><a name="p13297122216123"></a>Obtains the UART device attributes.</p>
</td>
</tr>
<tr id="row7545065311"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p102974224120"><a name="p102974224120"></a><a name="p102974224120"></a>UartSetAttribute</p>
</td>
<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p152971322111219"><a name="p152971322111219"></a><a name="p152971322111219"></a>Sets the UART device attributes.</p>
</td>
</tr>
<tr id="row14614115403"><td class="cellrowborder" valign="top" width="26.619999999999997%" headers="mcps1.2.4.1.1 "><p id="p1746281144010"><a name="p1746281144010"></a><a name="p1746281144010"></a>Setting the transmission mode</p>
</td>
<td class="cellrowborder" valign="top" width="31.369999999999997%" headers="mcps1.2.4.1.2 "><p id="p1146215112405"><a name="p1146215112405"></a><a name="p1146215112405"></a>UartSetTransMode</p>
</td>
<td class="cellrowborder" valign="top" width="42.01%" headers="mcps1.2.4.1.3 "><p id="p11303181216414"><a name="p11303181216414"></a><a name="p11303181216414"></a>Sets the UART transmission mode.</p>
</td>
</tr>
</tbody>
</table>
>![](../public_sys-resources/icon-note.gif) **NOTE**<br>
>All functions provided in this document can be called only in kernel space.
## Usage Guidelines<a name="section12779050105412"></a>
### How to Use<a name="section1858116395510"></a>
A UART is connected to other modules through two wires (as shown in Figure 1) or four wires (as shown in Figure 2).
- TX: TX pin of the transmitting UART. It is connected to the RX pin of the peer UART.
- RX: RX pin of the receiving UART. It is connected to the TX pin of the peer UART.
- RTS: Request to Send signal pin. It is connected to the CTS pin of the peer UART and is used to indicate whether the local UART is ready to receive data.
- CTS: Clear to Send signal pin. It is connected to the RTS pin of the peer UART and is used to indicate whether the local UART is allowed to send data to the peer end.
**Figure 1** Two-wire UART communication
![](figures/2-wire-uart-communication.png "2-wire-uart-communication")
**Figure 2** Four-wire UART communication
![](figures/4-wire-uart-communication.png "4-wire-uart-communication")
- The transmitting and receiving UARTs must ensure that they have the same settings on particular attributes such as the baud rate and data format (start bit, data bit, parity bit, and stop bit) before they start to communicate. During data transmission, a UART sends data to the peer end over the TX pin and receives data from the peer end over the RX pin. When the size of the buffer used by a UART for storing received data reaches the preset threshold, the RTS signal of the UART changes to **1** (data cannot be received), and the peer UART stops sending data to it because its CTS signal does not allow it to send data.
- The UART interface defines a set of common functions for operating a UART port, including obtaining and releasing device handles, reading and writing data of a specified length, and obtaining and setting the baud rate, as well as the device attributes.
## Available APIs
**Table 1** UART driver APIs
| API| Description|
| -------- | -------- |
| UartOpen | Obtains a UART device handle.|
| UartClose | Releases a UART device handle.|
| UartRead | Reads data of the specified length from a UART device.|
| UartWrite | Writes data of the specified length to a UART device.|
| UartGetBaud | Obtains the UART baud rate.|
| UartSetBaud | Sets the UART baud rate.|
| UartGetAttribute | Obtains UART device attributes.|
| UartSetAttribute | Sets UART device attributes.|
| UartSetTransMode | Sets the UART transmission mode.|
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> All APIs described in this document can be called only in kernel mode.
## Usage Guidelines
### How to Use
The figure below illustrates how to use the APIs.
**Figure 3** Using UART driver APIs<a name="fig99673244388"></a>
![](figures/using-uart-process.png "process-of-using-a-uart-device")
### Obtaining a UART Device Handle<a name="section124512065617"></a>
Before performing UART communication, call **UartOpen** to obtain a UART device handle. This function returns the pointer to the UART device handle with a specified port number.
DevHandle UartOpen\(uint32\_t port\);
**Table 2** Description of UartOpen
<a name="table14222165114310"></a>
<table><thead align="left"><tr id="row1022175133111"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p13221551153117"><a name="p13221551153117"></a><a name="p13221551153117"></a><strong id="b538194163718"><a name="b538194163718"></a><a name="b538194163718"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p122211251103111"><a name="p122211251103111"></a><a name="p122211251103111"></a><strong id="b20924204203714"><a name="b20924204203714"></a><a name="b20924204203714"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row6222451133114"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p92221518315"><a name="p92221518315"></a><a name="p92221518315"></a>port</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1322217518318"><a name="p1322217518318"></a><a name="p1322217518318"></a>UART port number.</p>
</td>
</tr>
<tr id="row1122245153112"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p102221451123118"><a name="p102221451123118"></a><a name="p102221451123118"></a><strong id="b101754483378"><a name="b101754483378"></a><a name="b101754483378"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1122215143113"><a name="p1122215143113"></a><a name="p1122215143113"></a><strong id="b647184919374"><a name="b647184919374"></a><a name="b647184919374"></a>Description</strong></p>
</td>
</tr>
<tr id="row522275114317"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p422235114313"><a name="p422235114313"></a><a name="p422235114313"></a>NULL</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p5222351203112"><a name="p5222351203112"></a><a name="p5222351203112"></a>Failed to obtain the UART device handle.</p>
</td>
</tr>
<tr id="row1222212513311"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p5222125115316"><a name="p5222125115316"></a><a name="p5222125115316"></a>Device handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p192228515311"><a name="p192228515311"></a><a name="p192228515311"></a>UART device handle.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to obtain a UART device handle based on the assumption that the UART port number is **3**:
```
DevHandle handle = NULL; /* The UART device handle */
uint32_t port = 3; /* UART port number */
**Figure 3** Using UART driver APIs
![](figures/using-UART-process.png)
### Opening a UART Device Handle
Before performing UART communication, call **UartOpen** to obtain a UART device handle. This function returns the pointer to the UART device handle with the specified port number.
```
DevHandle UartOpen(uint32_t port);
```
**Table 2** Description of UartOpen
| Parameter| Description|
| -------- | -------- |
| port | UART port number.|
| **Return Value**| **Description**|
| NULL | The operation failed.|
| Device handle| The operation is successful. The obtained UART device handle is returned.|
Example: Obtain the device handle of UART port 3.
```
DevHandle handle = NULL; /* UART device handle */
uint32_t port = 3; /* UART port number */
handle = UartOpen(port);
if (handle == NULL) {
HDF_LOGE("UartOpen: failed!\n");
......@@ -158,51 +88,29 @@ if (handle == NULL) {
}
```
### Setting the UART Baud Rate<a name="section86881004579"></a>
After obtaining the UART device handle, set the UART baud rate by calling the following function:
int32\_t UartSetBaud\(DevHandle handle, uint32\_t baudRate\);
**Table 3** Description of UartSetBaud
<a name="table539135313325"></a>
<table><thead align="left"><tr id="row15391205311323"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p11390453103216"><a name="p11390453103216"></a><a name="p11390453103216"></a><strong id="b0704124143717"><a name="b0704124143717"></a><a name="b0704124143717"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p839065316328"><a name="p839065316328"></a><a name="p839065316328"></a><strong id="b10127164520376"><a name="b10127164520376"></a><a name="b10127164520376"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row2039115373216"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1639165310324"><a name="p1639165310324"></a><a name="p1639165310324"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p539115320328"><a name="p539115320328"></a><a name="p539115320328"></a>UART device handle.</p>
</td>
</tr>
<tr id="row163911753143214"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p13911653203215"><a name="p13911653203215"></a><a name="p13911653203215"></a>baudRate</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p163919537322"><a name="p163919537322"></a><a name="p163919537322"></a>Baud rate of the UART to set.</p>
</td>
</tr>
<tr id="row539155343218"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1039185313321"><a name="p1039185313321"></a><a name="p1039185313321"></a><strong id="b1551834812373"><a name="b1551834812373"></a><a name="b1551834812373"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p123911753143213"><a name="p123911753143213"></a><a name="p123911753143213"></a><strong id="b43667492373"><a name="b43667492373"></a><a name="b43667492373"></a>Description</strong></p>
</td>
</tr>
<tr id="row2391853153218"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p17391185310322"><a name="p17391185310322"></a><a name="p17391185310322"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p14391653193210"><a name="p14391653193210"></a><a name="p14391653193210"></a>Succeeded in setting the UART baud rate.</p>
</td>
</tr>
<tr id="row23912053143211"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p7391165320321"><a name="p7391165320321"></a><a name="p7391165320321"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p639185318322"><a name="p639185318322"></a><a name="p639185318322"></a>Failed to set the UART baud rate.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to set the UART baud rate to **9600**:
### Setting the UART Baud Rate
Call **UartSetBaud()** to set the UART baud rate.
```
int32_t UartSetBaud(DevHandle handle, uint32_t baudRate);
```
**Table 3** Description of UartSetBaud
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| baudRate | Baud rate to set.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Set the UART baud rate to **9600**.
```
int32_t ret;
/* Set the UART baud rate to 9600. */
......@@ -212,51 +120,29 @@ if (ret != 0) {
}
```
### Obtaining the UART Baud Rate<a name="section897032965712"></a>
After setting the UART baud rate, obtain the current baud rate by calling the following function:
int32\_t UartGetBaud\(DevHandle handle, uint32\_t \*baudRate\);
**Table 4** Description of UartGetBaud
<a name="table20393185311326"></a>
<table><thead align="left"><tr id="row19392653123215"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p6392105315326"><a name="p6392105315326"></a><a name="p6392105315326"></a><strong id="b13706541173716"><a name="b13706541173716"></a><a name="b13706541173716"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p53920531329"><a name="p53920531329"></a><a name="p53920531329"></a><strong id="b15128194510378"><a name="b15128194510378"></a><a name="b15128194510378"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row103921553103211"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1539220536326"><a name="p1539220536326"></a><a name="p1539220536326"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p6392553203217"><a name="p6392553203217"></a><a name="p6392553203217"></a>UART device handle.</p>
</td>
</tr>
<tr id="row1539211532322"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p93921053123210"><a name="p93921053123210"></a><a name="p93921053123210"></a>baudRate</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p93926536328"><a name="p93926536328"></a><a name="p93926536328"></a>Pointer to the UART baud rate.</p>
</td>
</tr>
<tr id="row1239318531326"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p17392653123213"><a name="p17392653123213"></a><a name="p17392653123213"></a><strong id="b55191048113716"><a name="b55191048113716"></a><a name="b55191048113716"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1339365316327"><a name="p1339365316327"></a><a name="p1339365316327"></a><strong id="b193671249193713"><a name="b193671249193713"></a><a name="b193671249193713"></a>Description</strong></p>
</td>
</tr>
<tr id="row143939531328"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p2393953153213"><a name="p2393953153213"></a><a name="p2393953153213"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p8393165383218"><a name="p8393165383218"></a><a name="p8393165383218"></a>Succeeded in obtaining the UART baud rate.</p>
</td>
</tr>
<tr id="row5393105363210"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p17393125363215"><a name="p17393125363215"></a><a name="p17393125363215"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1539325393211"><a name="p1539325393211"></a><a name="p1539325393211"></a>Failed to obtain the UART baud rate.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to obtain the UART baud rate:
### Obtaining the UART Baud Rate
Call **UartGetBaud()** to obtain the UART baud rate.
```
int32_t UartGetBaud(DevHandle handle, uint32_t *baudRate);
```
**Table 4** Description of UartGetBaud
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| baudRate | Pointer to the UART baud rate obtained.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Obtain the UART baud rate.
```
int32_t ret;
uint32_t baudRate;
......@@ -267,168 +153,102 @@ if (ret != 0) {
}
```
### Setting the UART Device Attributes<a name="section129141884588"></a>
Before performing UART communication, set the UART device attributes by calling the following function:
int32\_t UartSetAttribute\(DevHandle handle, struct UartAttribute \*attribute\);
**Table 5** Description of UartSetAttribute
<a name="table1453119335341"></a>
<table><thead align="left"><tr id="row3530433103416"><th class="cellrowborder" valign="top" width="49.980000000000004%" id="mcps1.2.3.1.1"><p id="p1853073310341"><a name="p1853073310341"></a><a name="p1853073310341"></a><strong id="b8706441133719"><a name="b8706441133719"></a><a name="b8706441133719"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50.019999999999996%" id="mcps1.2.3.1.2"><p id="p553083393417"><a name="p553083393417"></a><a name="p553083393417"></a><strong id="b16129154519371"><a name="b16129154519371"></a><a name="b16129154519371"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row55303331347"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p1530113313341"><a name="p1530113313341"></a><a name="p1530113313341"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p3530173313346"><a name="p3530173313346"></a><a name="p3530173313346"></a>UART device handle.</p>
</td>
</tr>
<tr id="row45309337342"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p553083319348"><a name="p553083319348"></a><a name="p553083319348"></a>attribute</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p5530133314343"><a name="p5530133314343"></a><a name="p5530133314343"></a>Pointer to the UART device attributes to set.</p>
</td>
</tr>
<tr id="row12530833103415"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p185309331345"><a name="p185309331345"></a><a name="p185309331345"></a><strong id="b18520248203717"><a name="b18520248203717"></a><a name="b18520248203717"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p145309332344"><a name="p145309332344"></a><a name="p145309332344"></a><strong id="b5367174913370"><a name="b5367174913370"></a><a name="b5367174913370"></a>Description</strong></p>
</td>
</tr>
<tr id="row14530203310348"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p1653014339343"><a name="p1653014339343"></a><a name="p1653014339343"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p1453023323419"><a name="p1453023323419"></a><a name="p1453023323419"></a>Succeeded in setting the UART device attributes.</p>
</td>
</tr>
<tr id="row6531163373412"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p16530123310345"><a name="p16530123310345"></a><a name="p16530123310345"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p1953118334347"><a name="p1953118334347"></a><a name="p1953118334347"></a>Failed to set the UART device attributes.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to set the UART device attributes:
### Setting UART Device Attributes
Call **UartSetAttribute()** to set UART device attributes.
```
int32_t UartSetAttribute(DevHandle handle, struct UartAttribute *attribute);
```
**Table 5** Description of UartSetAttribute
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| attribute | Pointer to the UART device attributes to set.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Set UART device attributes.
```
int32_t ret;
struct UartAttribute attribute;
attribute.dataBits = UART_ATTR_DATABIT_7; /* Set the number of data bits to 7. */
attribute.parity = UART_ATTR_PARITY_NONE; /* Set the parity bit to no parity. */
attribute.dataBits = UART_ATTR_DATABIT_7; /* Enable 7 bits to be transferred each time. */
attribute.parity = UART_ATTR_PARITY_NONE; /* Disable parity check. */
attribute.stopBits = UART_ATTR_STOPBIT_1; /* Set the stop bit to 1. */
attribute.rts = UART_ATTR_RTS_DIS; /* Disable the RTS signal. */
attribute.cts = UART_ATTR_CTS_DIS; /* Disable the CTS signal. */
attribute.fifoRxEn = UART_ATTR_RX_FIFO_EN; /* Enable RX FIFO. */
attribute.fifoTxEn = UART_ATTR_TX_FIFO_EN; /* Enable TX FIFO. */
/* Set the UART device attributes. */
/* Set UART device attributes. */
ret = UartSetAttribute(handle, &attribute);
if (ret != 0) {
HDF_LOGE("UartSetAttribute: failed, ret %d\n", ret);
}
```
### Obtaining UART Device Attributes<a name="section18689637165812"></a>
After setting the UART device attributes, obtain the current device attributes by calling the following function:
int32\_t UartGetAttribute\(DevHandle handle, struct UartAttribute \*attribute\);
**Table 6** Description of UartGetAttribute
<a name="table17532123316342"></a>
<table><thead align="left"><tr id="row18531193383420"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p85311833143420"><a name="p85311833143420"></a><a name="p85311833143420"></a><strong id="b1770784123715"><a name="b1770784123715"></a><a name="b1770784123715"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p17531103319348"><a name="p17531103319348"></a><a name="p17531103319348"></a><strong id="b0130114519373"><a name="b0130114519373"></a><a name="b0130114519373"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row35311533153413"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p453133333418"><a name="p453133333418"></a><a name="p453133333418"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p753193323420"><a name="p753193323420"></a><a name="p753193323420"></a>UART device handle.</p>
</td>
</tr>
<tr id="row1953103315344"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p35315333346"><a name="p35315333346"></a><a name="p35315333346"></a>attribute</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p14531633133416"><a name="p14531633133416"></a><a name="p14531633133416"></a>Pointer to the UART device attributes.</p>
</td>
</tr>
<tr id="row45321433143415"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p653273363417"><a name="p653273363417"></a><a name="p653273363417"></a><strong id="b15211548193719"><a name="b15211548193719"></a><a name="b15211548193719"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1653203312347"><a name="p1653203312347"></a><a name="p1653203312347"></a><strong id="b836815498379"><a name="b836815498379"></a><a name="b836815498379"></a>Description</strong></p>
</td>
</tr>
<tr id="row175320339342"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p10532163383412"><a name="p10532163383412"></a><a name="p10532163383412"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p5532143319341"><a name="p5532143319341"></a><a name="p5532143319341"></a>Succeeded in obtaining the UART device attributes.</p>
</td>
</tr>
<tr id="row125327337340"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p19532153317345"><a name="p19532153317345"></a><a name="p19532153317345"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p175321933163410"><a name="p175321933163410"></a><a name="p175321933163410"></a>Failed to obtain the UART device attributes.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to obtain the UART device attributes:
### Obtaining UART Device Attributes
Call **UartGetAttribute()** to obtain the current UART device attributes.
```
int32_t UartGetAttribute(DevHandle handle, struct UartAttribute *attribute);
```
**Table 6** Description of UartGetAttribute
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| attribute | Pointer to the UART device attributes obtained.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Obtain UART device attributes.
```
int32_t ret;
struct UartAttribute attribute;
/* Obtain the UART attributes. */
/* Obtain UART device attributes. */
ret = UartGetAttribute(handle, &attribute);
if (ret != 0) {
HDF_LOGE("UartGetAttribute: failed, ret %d\n", ret);
}
```
### Setting the UART Transmission Mode<a name="section72713435918"></a>
Before performing UART communication, set the UART transmission mode by calling the following function:
int32\_t UartSetTransMode\(DevHandle handle, enum UartTransMode mode\);
**Table 7** Description of UartSetTransMode
<a name="table131892266313"></a>
<table><thead align="left"><tr id="row018922615318"><th class="cellrowborder" valign="top" width="49.980000000000004%" id="mcps1.2.3.1.1"><p id="p131891826835"><a name="p131891826835"></a><a name="p131891826835"></a><strong id="b197086411379"><a name="b197086411379"></a><a name="b197086411379"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50.019999999999996%" id="mcps1.2.3.1.2"><p id="p101894269314"><a name="p101894269314"></a><a name="p101894269314"></a><strong id="b813014510375"><a name="b813014510375"></a><a name="b813014510375"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row11893261734"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p81897261333"><a name="p81897261333"></a><a name="p81897261333"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p5190142618310"><a name="p5190142618310"></a><a name="p5190142618310"></a>UART device handle.</p>
</td>
</tr>
<tr id="row1119082615317"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p1519012261314"><a name="p1519012261314"></a><a name="p1519012261314"></a>mode</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p121901026632"><a name="p121901026632"></a><a name="p121901026632"></a>UART transmission mode to set.</p>
</td>
</tr>
<tr id="row19190152612317"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p131900266316"><a name="p131900266316"></a><a name="p131900266316"></a><strong id="b1352194823717"><a name="b1352194823717"></a><a name="b1352194823717"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p1519022616315"><a name="p1519022616315"></a><a name="p1519022616315"></a><strong id="b1836924917371"><a name="b1836924917371"></a><a name="b1836924917371"></a>Description</strong></p>
</td>
</tr>
<tr id="row919016261932"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p10190526334"><a name="p10190526334"></a><a name="p10190526334"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p1219012264318"><a name="p1219012264318"></a><a name="p1219012264318"></a>Succeeded in setting the UART transmission mode.</p>
</td>
</tr>
<tr id="row1219017262313"><td class="cellrowborder" valign="top" width="49.980000000000004%" headers="mcps1.2.3.1.1 "><p id="p15190162616316"><a name="p15190162616316"></a><a name="p15190162616316"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50.019999999999996%" headers="mcps1.2.3.1.2 "><p id="p131906262311"><a name="p131906262311"></a><a name="p131906262311"></a>Failed to set the UART transmission mode.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to set the transmission mode to **UART\_MODE\_RD\_BLOCK**:
### Setting the UART Transmission Mode
Call **UartSetTransMode()** to set the UART transmission mode.
```
int32_t UartSetTransMode(DevHandle handle, enum UartTransMode mode);
```
**Table 7** Description of UartSetTransMode
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| mode | UART transmission mode to set.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Set the UART transmission mode to **UART_MODE_RD_BLOCK**.
```
int32_t ret;
/* Set the UART transmission mode. */
......@@ -438,116 +258,64 @@ if (ret != 0) {
}
```
### Writing Data of a Specified Length into a UART Device<a name="section128001736155919"></a>
To write data into a UART device, call the following function:
int32\_t UartWrite\(DevHandle handle, uint8\_t \*data, uint32\_t size\);
**Table 8** Description of UartWrite
<a name="table27825111368"></a>
<table><thead align="left"><tr id="row1578171123619"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p078112115360"><a name="p078112115360"></a><a name="p078112115360"></a><strong id="b14708841203711"><a name="b14708841203711"></a><a name="b14708841203711"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p37811711163612"><a name="p37811711163612"></a><a name="p37811711163612"></a><strong id="b2131174553712"><a name="b2131174553712"></a><a name="b2131174553712"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row1878291143611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p07818112360"><a name="p07818112360"></a><a name="p07818112360"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p178281113369"><a name="p178281113369"></a><a name="p178281113369"></a>UART device handle.</p>
</td>
</tr>
<tr id="row7782811123614"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p8782911173610"><a name="p8782911173610"></a><a name="p8782911173610"></a>data</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p17782171120366"><a name="p17782171120366"></a><a name="p17782171120366"></a>Pointer to the data to write.</p>
</td>
</tr>
<tr id="row1578251112367"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p3782911183612"><a name="p3782911183612"></a><a name="p3782911183612"></a>size</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p17782161110366"><a name="p17782161110366"></a><a name="p17782161110366"></a>Length of the data to write.</p>
</td>
</tr>
<tr id="row1378281113363"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p87821411183616"><a name="p87821411183616"></a><a name="p87821411183616"></a><strong id="b2052274863718"><a name="b2052274863718"></a><a name="b2052274863718"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p13782111116361"><a name="p13782111116361"></a><a name="p13782111116361"></a><strong id="b73704492377"><a name="b73704492377"></a><a name="b73704492377"></a>Description</strong></p>
</td>
</tr>
<tr id="row47822112365"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p107821011103613"><a name="p107821011103613"></a><a name="p107821011103613"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p11782191103610"><a name="p11782191103610"></a><a name="p11782191103610"></a>Succeeded in writing data into the UART device.</p>
</td>
</tr>
<tr id="row11782911113611"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1578221111367"><a name="p1578221111367"></a><a name="p1578221111367"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p9782151110366"><a name="p9782151110366"></a><a name="p9782151110366"></a>Failed to write data into the UART device.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to write data of a specified length into the UART device:
### Writing Data to a UART Device
Call **UartWrite()** to write data of the specified length to a UART device.
```
int32_t UartWrite(DevHandle handle, uint8_t *data, uint32_t size);
```
**Table 8** Description of UartWrite
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| data | Pointer to the data to write.|
| size | Length of the data to write.|
| **Return Value**| **Description**|
| 0 | The operation is successful.|
| Negative value| The operation failed.|
Example: Write data to a UART device.
```
int32_t ret;
uint8_t wbuff[5] = {1, 2, 3, 4, 5};
/* Write 5-byte data into the UART device. */
/* Write 5-byte data to the UART device. */
ret = UartWrite(handle, wbuff, 5);
if (ret != 0) {
HDF_LOGE("UartWrite: failed, ret %d\n", ret);
}
```
### Reading Data of a Specified Length from a UART Device<a name="section92851601604"></a>
To write data into a UART device, call the following function:
int32\_t UartRead\(DevHandle handle, uint8\_t \*data, uint32\_t size\);
**Table 9** Description of UartRead
<a name="table162341717123713"></a>
<table><thead align="left"><tr id="row023313171377"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p1123331710376"><a name="p1123331710376"></a><a name="p1123331710376"></a><strong id="b970911411374"><a name="b970911411374"></a><a name="b970911411374"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p523321783715"><a name="p523321783715"></a><a name="p523321783715"></a><strong id="b16132114553713"><a name="b16132114553713"></a><a name="b16132114553713"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row6234417133712"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p7233121716379"><a name="p7233121716379"></a><a name="p7233121716379"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p17234101753712"><a name="p17234101753712"></a><a name="p17234101753712"></a>UART device handle.</p>
</td>
</tr>
<tr id="row18234151718372"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p16234191783711"><a name="p16234191783711"></a><a name="p16234191783711"></a>data</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p923417175378"><a name="p923417175378"></a><a name="p923417175378"></a>Pointer to the buffer for receiving the data.</p>
</td>
</tr>
<tr id="row82341017193711"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p13234917103717"><a name="p13234917103717"></a><a name="p13234917103717"></a>size</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p182341817153717"><a name="p182341817153717"></a><a name="p182341817153717"></a>Length of the data to read.</p>
</td>
</tr>
<tr id="row102341617123717"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p172341617163712"><a name="p172341617163712"></a><a name="p172341617163712"></a><strong id="b1352319486376"><a name="b1352319486376"></a><a name="b1352319486376"></a>Return Value</strong></p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p1623431763718"><a name="p1623431763718"></a><a name="p1623431763718"></a><strong id="b73711949113718"><a name="b73711949113718"></a><a name="b73711949113718"></a>Description</strong></p>
</td>
</tr>
<tr id="row4234151719372"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p3234131716375"><a name="p3234131716375"></a><a name="p3234131716375"></a>Non-negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p7234171783718"><a name="p7234171783718"></a><a name="p7234171783718"></a>Length of the data read from the UART device.</p>
</td>
</tr>
<tr id="row112340173378"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p1423431743714"><a name="p1423431743714"></a><a name="p1423431743714"></a>Negative value</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p32349178378"><a name="p32349178378"></a><a name="p32349178378"></a>Failed to read data from the UART device.</p>
</td>
</tr>
</tbody>
</table>
The following example shows how to read data of a specified length from the UART device:
### Reading Data from a UART Device
Call **UartRead()** to read data of the specified length from a UART device.
```
int32_t UartRead(DevHandle handle, uint8_t *data, uint32_t size);
```
**Table 9** Description of UartRead
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle.|
| data | Pointer to the buffer for receiving the data.|
| size | Length of the data to read.|
| **Return Value**| **Description**|
| Non-negative value| The operation is successful. The length of the data read is returned.|
| Negative value| The operation failed.|
Example: Read data of the specified length from a UART device.
```
int32_t ret;
uint8_t rbuff[5] = {0};
......@@ -558,44 +326,39 @@ if (ret < 0) {
}
```
>![](../public_sys-resources/icon-caution.gif) **CAUTION:**
>Data is successfully read from the UART device if a non-negative value is returned. If the return value is **0**, no valid data can be read from the UART device. If the return value is greater than **0**, the return value is the length of the data actually read from the UART device. The length is less than or equal to the value of **size** and does not exceed the maximum length of data to read at a time specified by the UART controller in use.
> ![icon-caution.gif](../public_sys-resources/icon-caution.gif) **CAUTION**<br/>
> Data is successfully read from the UART device if a non-negative value is returned. If **0** is returned, no valid data can be read from the UART device. A value greater than **0** indicates the length of the data read from the UART device. The data length must be less than or equal to the value of **size** and cannot exceed the maximum length of the data to read at a time specified by the UART controller in use.
### Destroying the UART Device Handle<a name="section1477410521406"></a>
After the UART communication, destroy the UART device handle by calling the following function:
### Closing a UART Device Handle
void UartClose\(DevHandle handle\);
Call **UartClose()** to close a UART device handle.
This function will release the resources previously obtained.
```
void UartClose(DevHandle handle);
```
**Table 10** Description of UartClose
This function releases the resources requested by **UartOpen**.
<a name="table03348317351"></a>
<table><thead align="left"><tr id="row15334837351"><th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.1"><p id="p933411316354"><a name="p933411316354"></a><a name="p933411316354"></a><strong id="b1710184115375"><a name="b1710184115375"></a><a name="b1710184115375"></a>Parameter</strong></p>
</th>
<th class="cellrowborder" valign="top" width="50%" id="mcps1.2.3.1.2"><p id="p16334103143517"><a name="p16334103143517"></a><a name="p16334103143517"></a><strong id="b2013254513370"><a name="b2013254513370"></a><a name="b2013254513370"></a>Description</strong></p>
</th>
</tr>
</thead>
<tbody><tr id="row733483103513"><td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.1 "><p id="p7334530358"><a name="p7334530358"></a><a name="p7334530358"></a>handle</p>
</td>
<td class="cellrowborder" valign="top" width="50%" headers="mcps1.2.3.1.2 "><p id="p133341331356"><a name="p133341331356"></a><a name="p133341331356"></a>UART device handle.</p>
</td>
</tr>
</tbody>
</table>
**Table 10** Description of UartClose
The following example shows how to destroy the UART device handle:
| Parameter| Description|
| -------- | -------- |
| handle | UART device handle to close.|
Example: Close a UART device handle.
```
UartClose(handle); /* Destroy the UART device handle. */
UartClose(handle); /* Close the UART device handle. */
```
## Usage Example<a name="section35404241311"></a>
The following is a usage example of a UART device, including how to obtain the UART device handle, set the baud rate, device attributes, and transmission mode, read data from or write data into the UART device, and then destroy the UART device handle.
## Example
The following example shows how to open a UART device handle, set the baud rate, device attributes, and transmission mode, read data from or write data into the UART device, and then close the UART device handle.
```
#include "hdf_log.h"
#include "uart_if.h"
......@@ -608,16 +371,16 @@ void UartTestSample(void)
uint8_t wbuff[5] = { 1, 2, 3, 4, 5 };
uint8_t rbuff[5] = { 0 };
struct UartAttribute attribute;
attribute.dataBits = UART_ATTR_DATABIT_7; /* Set the number of data bits to 7. */
attribute.parity = UART_ATTR_PARITY_NONE; /* Set the parity bit to no parity. */
attribute.dataBits = UART_ATTR_DATABIT_7; /* Enable 7 bits to be transferred each time. */
attribute.parity = UART_ATTR_PARITY_NONE; /* Disable parity check. */
attribute.stopBits = UART_ATTR_STOPBIT_1; /* Set the stop bit to 1. */
attribute.rts = UART_ATTR_RTS_DIS; /* Disable the RTS signal. */
attribute.cts = UART_ATTR_CTS_DIS; /* Disable the CTS signal. */
attribute.fifoRxEn = UART_ATTR_RX_FIFO_EN; /* Enable RX FIFO. */
attribute.fifoTxEn = UART_ATTR_TX_FIFO_EN; /* Enable TX FIFO. */
/* Set the UART port number actually used. */
/* Enter the UART port number. */
port = 1;
/* Obtain the UART device handle. */
/* Open the UART device handle based on the port number. */
handle = UartOpen(port);
if (handle == NULL) {
HDF_LOGE("UartOpen: failed!\n");
......@@ -629,7 +392,7 @@ void UartTestSample(void)
HDF_LOGE("UartSetBaud: failed, ret %d\n", ret);
goto _ERR;
}
/* Set the UART device attributes. */
/* Set UART device attributes. */
ret = UartSetAttribute(handle, &attribute);
if (ret != 0) {
HDF_LOGE("UartSetAttribute: failed, ret %d\n", ret);
......@@ -641,7 +404,7 @@ void UartTestSample(void)
HDF_LOGE("UartSetTransMode: failed, ret %d\n", ret);
goto _ERR;
}
/* Write 5-byte data into the UART device. */
/* Write 5-byte data to the UART device. */
ret = UartWrite(handle, wbuff, 5);
if (ret != 0) {
HDF_LOGE("UartWrite: failed, ret %d\n", ret);
......@@ -654,7 +417,7 @@ void UartTestSample(void)
goto _ERR;
}
_ERR:
/* Destroy the UART device handle. */
/* Close the UART device handle. */
UartClose(handle);
}
```
\ No newline at end of file
```
en/device-dev/driver/driver-platform-uart-develop.md
浏览文件 @ 5919c0fe
......@@ -14,7 +14,7 @@ In the Hardware Driver Foundation (HDF), the Universal Asynchronous Receiver/Tra
**UartHostMethod**:
```
struct UartHostMethod {
int32_t (*Init)(struct UartHost *host);
......@@ -32,18 +32,18 @@ struct UartHostMethod {
**Table 1** Description of the callback functions in UartHostMethod
| Function| Input Parameter| Output Parameter| Return Value| Description|
| Function| Input Parameter| Output Parameter| Return Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| Init | **host**: structure pointer to the UART controller at the core layer.| –| HDF_STATUS| Initializes a UART device.|
| Deinit | **host**: structure pointer to the UART controller at the core layer.| –| HDF_STATUS| Deinitializes a UART device.|
| Read | **host**: structure pointer to the UART controller at the core layer.<br>**size**: data size, which is of the uint32_t type.| **data**: pointer to the output data. The value is of the uint8_t type.| HDF_STATUS| Reads data.|
| Write | **host**: structure pointer to the UART controller at the core layer.<br>**data**: pointer to the input data. The value is of the uint8_t type.<br>**size**: data size, which is of the uint32_t type.| –| HDF_STATUS| Writes data.|
| SetBaud | **host**: structure pointer to the UART controller at the core layer.<br>**baudRate**: pointer to the input baud rate. The value is of the uint32_t type. | –| HDF_STATUS| Sets the baud rate.|
| GetBaud | **host**: structure pointer to the UART controller at the core layer.| **baudRate**: pointer to the output baud rate. The value is of the uint32_t type.| HDF_STATUS| Obtains the current baud rate.|
| GetAttribute | **host**: structure pointer to the UART controller at the core layer.| **attribute**: structure pointer to the UART attributes. For details, see **UartAttribute** in **uart_if.h**.| HDF_STATUS| Obtains UART attributes.|
| SetAttribute | **host**: structure pointer to the UART controller at the core layer.<br>**attribute**: structure pointer to the UART attributes to set.| –| HDF_STATUS| Sets UART attributes.|
| SetTransMode | **host**: structure pointer to the UART controller at the core layer.<br>**mode**: transfer mode to set. For details, see **UartTransMode** in **uart_if.h**.| –| HDF_STATUS| Sets the UART transfer mode.|
| PollEvent | **host**: structure pointer to the UART controller at the core layer.<br>**filep**: void pointer to a file.<br>**table**: void pointer to poll_table.| –| HDF_STATUS| Polls for pending events.|
| Init | **host**: structure pointer to the UART controller at the core layer.| –| HDF_STATUS| Initializes a UART device.|
| Deinit | **host**: structure pointer to the UART controller at the core layer.| –| HDF_STATUS| Deinitializes a UART device.|
| Read | **host**: structure pointer to the UART controller at the core layer.<br>**size**: data size, which is of the uint32_t type.| **data**: pointer to the data read. The value is of the uint8_t type. | HDF_STATUS| Reads data.|
| Write | **host**: structure pointer to the UART controller at the core layer.<br>**data**: pointer to the data to write. The value is of the uint8_t type.<br>**size**: data size, which is of the uint32_t type. | –| HDF_STATUS| Writes data.|
| SetBaud | **host**: structure pointer to the UART controller at the core layer.<br>**baudRate**: pointer to the baud rate to set. The value is of the uint32_t type. | –| HDF_STATUS| Sets the baud rate.|
| GetBaud | **host**: structure pointer to the UART controller at the core layer.| **baudRate**: pointer to the baud rate obtained. The value is of the uint32_t type. | HDF_STATUS| Obtains the current baud rate.|
| GetAttribute | **host**: structure pointer to the UART controller at the core layer.| **attribute**: structure pointer to the attribute obtained. For details, see **UartAttribute** in **uart_if.h**. | HDF_STATUS| Obtains UART attributes.|
| SetAttribute | **host**: structure pointer to the UART controller at the core layer.<br>**attribute**: structure pointer to the attribute to set. | –| HDF_STATUS| Sets UART attributes.|
| SetTransMode | **host**: structure pointer to the UART controller at the core layer.<br>**mode**: transfer mode to set. For details, see **UartTransMode** in **uart_if.h**.| –| HDF_STATUS| Sets the UART transfer mode.|
| PollEvent | **host**: structure pointer to the UART controller at the core layer.<br>**filep**: void pointer to a file.<br>**table**: void pointer to poll_table.| –| HDF_STATUS| Polls for pending events.|
## How to Develop
......@@ -61,10 +61,11 @@ The UART module adaptation involves the following steps:
3. Instantiate the UART controller object.
- Initialize **UartHost**.
- Instantiate **UartHostMethod** in the **UartHost** object.
> ![icon-note.gif](../public_sys-resources/icon-note.gif) **NOTE**<br>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> For details about the functions in **UartHostMethod**, see [Available APIs](#available-apis).
4. Debug the driver.<br>
4. Debug the driver.
(Optional) For new drivers, verify the basic functions, such as the UART status control and response to interrupts.
......@@ -72,11 +73,16 @@ The UART module adaptation involves the following steps:
The following uses **uart_hi35xx.c** as an example to present the information required for implementing device functions.
1. Instantiate the driver entry.<br/>The driver entry must be a global variable of the **HdfDriverEntry** type (defined in **hdf_device_desc.h**), and the value of **moduleName** must be the same as that in **device_info.hcs**. In the HDF, the start address of each **HdfDriverEntry** object of all loaded drivers is collected to form a segment address space similar to an array for the upper layer to invoke.
1. Instantiate the driver entry.
The driver entry must be a global variable of the **HdfDriverEntry** type (defined in **hdf_device_desc.h**), and the value of **moduleName** must be the same as that in **device_info.hcs**.
In the HDF, the start address of each **HdfDriverEntry** object of all loaded drivers is collected to form a segment address space similar to an array for the upper layer to invoke.
Generally, the HDF calls the **Bind** function and then the **Init** function to load a driver. If **Init** fails to be called, the HDF calls **Release** to release driver resources and exit.
UART driver entry example:
UART driver entry example:
```
struct HdfDriverEntry g_hdfUartDevice = {
.moduleVersion = 1,
......@@ -89,11 +95,15 @@ The following uses **uart_hi35xx.c** as an example to present the information re
HDF_INIT(g_hdfUartDevice);
```
2. Add the **deviceNode** information to the **device_info.hcs** file and configure the device attributes in the **uart_config.hcs** file.<br> The **deviceNode** information is related to registration of the driver entry. The device attribute values are closely related to the default values or value ranges of the **UartHost** members at the core layer.
In this example, there is only one UART controller. If there are multiple UART controllers, you need to add the **deviceNode** information to the **device_info** file and add the corresponding device attributes to the **uart_config** file for each controller.
- **device_info.hcs** configuration example
2. Add the **deviceNode** information to the **device_info.hcs** file and configure the device attributes in the **uart_config.hcs** file.
The **deviceNode** information is related to registration of the driver entry. The device attribute values are closely related to the default values or value ranges of the **UartHost** members at the core layer.
In this example, there is only one UART controller. If there are multiple UART controllers, you need to add the **deviceNode** information to the **device_info** file and add the corresponding device attributes to the **uart_config** file for each controller.
- **device_info.hcs** configuration example:
```
root {
device_info {
......@@ -103,11 +113,11 @@ The following uses **uart_hi35xx.c** as an example to present the information re
priority = 50;
device_uart :: device {
device0 :: deviceNode {
policy = 1; // The driver publishes services only for kernel-mode processes.
priority = 40; // Driver startup priority.
permission = 0644; // Permission for the driver to create a device node.
moduleName = "HDF_PLATFORM_UART"; // Driver name, which must be the same as moduleName in the HdfDriverEntry structure.
serviceName = "HDF_PLATFORM_UART_0";// Unique name of the service published by the driver. The name is in the HDF_PLATFORM_UART_X format. X indicates the UART controller number.
policy = 1; // The driver publishes services only for kernel-mode processes.
priority = 40; // Driver startup priority.
permission = 0644; // Permission for the driver to create a device node.
moduleName = "HDF_PLATFORM_UART"; // Driver name, which must be the same as moduleName in the HdfDriverEntry structure.
serviceName = "HDF_PLATFORM_UART_0"; // Unique name of the service published by the driver. The name is in the HDF_PLATFORM_UART_X format. X indicates the UART controller number.
deviceMatchAttr = "hisilicon_hi35xx_uart_0"; // Keyword for matching the private data of the driver. The value must be the same as that of match_attr in the private data configuration table of the driver.
}
device1 :: deviceNode {
......@@ -127,20 +137,20 @@ The following uses **uart_hi35xx.c** as an example to present the information re
- **uart_config.hcs** configuration example
```
root {
platform {
template uart_controller { // Template configuration. In the template, you can configure the common parameters shared by device nodes.
template uart_controller { // Template configuration. In the template, you can configure the common parameters shared by device nodes.
match_attr = "";
num = 0; // (Mandatory) Device number
baudrate = 115200; // (Mandatory) Baud rate. Set the value based on service requirements.
fifoRxEn = 1; // (Mandatory) Enable FIFOs to be received.
fifoTxEn = 1; // (Mandatory) Enable FIFOs to be transferred.
flags = 4; // (Mandatory) Flag signal.
regPbase = 0x120a0000; // (Mandatory) Used for address mapping.
interrupt = 38; // (Mandatory) Interrupt number.
iomemCount = 0x48; // (Mandatory) Used for address mapping.
num = 0; // (Mandatory) Device number.
baudrate = 115200; // (Mandatory) Baud rate. Set the value based on service requirements.
fifoRxEn = 1; // (Mandatory) Enable FIFOs to be received.
fifoTxEn = 1; // (Mandatory) Enable FIFOs to be transferred.
flags = 4; // (Mandatory) Flag signal.
regPbase = 0x120a0000; // (Mandatory) Used for address mapping.
interrupt = 38; // (Mandatory) Interrupt number.
iomemCount = 0x48; // (Mandatory) Used for address mapping.
}
controller_0x120a0000 :: uart_controller {
match_attr = "hisilicon_hi35xx_uart_0";// (Mandatory) The value must be the same as that of deviceMatchAttr of the corresponding device in device_info.hcs.
......@@ -159,43 +169,44 @@ The following uses **uart_hi35xx.c** as an example to present the information re
```
3. Initialize the **UartHost** object at the core layer, including defining a custom structure (to pass parameters and data) and implementing the **HdfDriverEntry** member functions (**Bind**, **Init**, and **Release**) to instantiate **UartHostMethod** in **UartHost** (so that the underlying driver functions can be called).
- Defining a custom structure
To the driver, the custom structure holds parameters and data. The **DeviceResourceIface** method provided by the HDF reads the values in the **uart_config.hcs** file to initialize the members in the custom structure and passes important parameters, such as the device number, to the **UartHost** object at the core layer.
```
struct UartPl011Port { // Interface structure
struct UartPl011Port { // Interface structure
int32_t enable;
unsigned long physBase; // Physical address
unsigned long physBase; // Physical address
uint32_t irqNum; // Interrupt number
uint32_t defaultBaudrate;// Default baud rate
uint32_t flags; // Flags related to the following three macros.
uint32_t defaultBaudrate; // Default baud rate
uint32_t flags; // Flags related to the following three macros
#define PL011_FLG_IRQ_REQUESTED (1 << 0)
#define PL011_FLG_DMA_RX_REQUESTED (1 << 1)
#define PL011_FLG_DMA_TX_REQUESTED (1 << 2)
struct UartDmaTransfer *rxUdt; // DMA transfer
struct UartDriverData *udd; // The data structure is defined as follows:
struct UartDmaTransfer *rxUdt; // DMA transfer
struct UartDriverData *udd; // The data structure is defined as follows:
};
struct UartDriverData { // Structure related to data transfer
struct UartDriverData { // Structure related to data transfer
uint32_t num;
uint32_t baudrate; // Baud rate (configurable)
struct UartAttribute attr; // Attributes, such as the data bit and stop bit, related to data transfer
struct UartTransfer *rxTransfer; // Buffer (FIFO structure)
wait_queue_head_t wait; // Queuing signal related to conditional variables
int32_t count; // Data count
int32_t state; // UART controller state
uint32_t baudrate; // Baud rate (configurable)
struct UartAttribute attr; // Attributes, such as the data bit and stop bit, related to data transfer.
struct UartTransfer *rxTransfer; // Buffer (FIFO structure)
wait_queue_head_t wait; // Queuing signal related to conditional variables
int32_t count; // Data count
int32_t state; // UART controller state
#define UART_STATE_NOT_OPENED 0
#define UART_STATE_OPENING 1
#define UART_STATE_USEABLE 2
#define UART_STATE_SUSPENDED 3
uint32_t flags; // Status flags
uint32_t flags; // Status flags
#define UART_FLG_DMA_RX (1 << 0)
#define UART_FLG_DMA_TX (1 << 1)
#define UART_FLG_RD_BLOCK (1 << 2)
RecvNotify recv; // Pointer to the function that receives serial port data
struct UartOps *ops; // Custom function pointer structure. For details, see device/hisilicon/drivers/uart/uart_pl011.c.
void *private; // It stores the pointer to the start address of UartPl011Port for easy invocation.
RecvNotify recv; // Pointer to the function that receives serial port data.
struct UartOps *ops; // Custom function pointer structure. For details, see device/hisilicon/drivers/uart/uart_pl011.c.
void *private; // It stores the pointer to the start address of UartPl011Port for easy invocation.
};
// UartHost is the controller structure at the core layer. The Init function assigns values to the members of UartHost.
......@@ -205,12 +216,13 @@ The following uses **uart_hi35xx.c** as an example to present the information re
uint32_t num;
OsalAtomic atom;
void *priv; // It stores the pointer to the start address of the vendor's custom structure for easy invocation.
struct UartHostMethod *method; // Hook at the core layer. You need to implement and instantiate its member functions.
struct UartHostMethod *method; // Hook at the core layer. You need to implement and instantiate its member functions.
};
```
- Instantiating **UartHostMethod** in **UartHost** (other members are initialized by **Bind**)
```
// Example in uart_hi35xx.c: instantiate the hook.
struct UartHostMethod g_uartHostMethod = {
......@@ -229,30 +241,30 @@ The following uses **uart_hi35xx.c** as an example to present the information re
- **Bind** function
Input parameter:
**Input parameter**:
**HdfDeviceObject**, an interface parameter exposed by the driver, contains the .hcs information.
Return value:
**Return value**:
HDF_STATUS<br/>The table below describes some status. For more information, see **HDF_STATUS** in the **/drivers/framework/include/utils/hdf_base.h** file.
**HDF_STATUS**<br/>The table below describes some status. For more information, see **HDF_STATUS** in the **/drivers/framework/include/utils/hdf_base.h** file.
**Table 2** HDF_STATUS
**Table 2** Description of HDF_STATUS
| Status| Description|
| Status| Description|
| -------- | -------- |
| HDF_ERR_INVALID_OBJECT | Invalid controller object.|
| HDF_ERR_MALLOC_FAIL | Failed to allocate memory.|
| HDF_ERR_INVALID_PARAM | Invalid parameter.|
| HDF_ERR_IO | I/O error.|
| HDF_SUCCESS | Initialization successful.|
| HDF_FAILURE | Initialization failed.|
| HDF_ERR_INVALID_OBJECT | Invalid controller object.|
| HDF_ERR_MALLOC_FAIL | Failed to allocate memory.|
| HDF_ERR_INVALID_PARAM | Invalid parameter.|
| HDF_ERR_IO | I/O error.|
| HDF_SUCCESS | Initialization successful.|
| HDF_FAILURE | Initialization failed.|
Function description:
**Function description**:
Initializes the custom structure object and **UartHost**.
```
//uart_hi35xx.c
static int32_t HdfUartDeviceBind(struct HdfDeviceObject *device)
......@@ -267,10 +279,10 @@ The following uses **uart_hi35xx.c** as an example to present the information re
...
host = (struct UartHost *)OsalMemCalloc(sizeof(*host));// Allocate memory.
...
host->device = device; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and UartHost
device->service = &(host->service; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and UartHost
host->device->service->Dispatch = UartIoDispatch;// Assign values to Dispatch of service.
OsalAtomicSet(&host->atom, 0); // Initialize or set the atomic services.
host->device = device; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and UartHost.
device->service = &(host->service; // (Mandatory) Prerequisites for conversion between HdfDeviceObject and UartHost.
host->device->service->Dispatch = UartIoDispatch; // Assign values to Dispatch of service.
OsalAtomicSet(&host->atom, 0); // Initialize or set the atomic services.
host->priv = NULL;
host->method = NULL;
return host;
......@@ -279,19 +291,19 @@ The following uses **uart_hi35xx.c** as an example to present the information re
- **Init** function
Input parameter:
**Input parameter**:
**HdfDeviceObject**, an interface parameter exposed by the driver, contains the .hcs information.
Return value:
**Return value**:
HDF_STATUS
**HDF_STATUS**
Function description:
**Function description**:
Initializes the custom structure object and **UartHost**, calls the **artAddDev** function at the core layer, and connects to the VFS.
```
int32_t HdfUartDeviceInit(struct HdfDeviceObject *device)
{
......@@ -303,7 +315,7 @@ The following uses **uart_hi35xx.c** as an example to present the information re
...
ret = Hi35xxAttach(host, device); // Initialize the UartHost object.
...
host->method = &g_uartHostMethod; // Hook the UartHostMethod instance.
host->method = &g_uartHostMethod; // Attach the UartHostMethod instance.
return ret;
}
// Initialize UartHost.
......@@ -351,30 +363,34 @@ The following uses **uart_hi35xx.c** as an example to present the information re
```
- **Release** function
Input parameter:
**Input parameter**:
**HdfDeviceObject**, an interface parameter exposed by the driver, contains the .hcs information.
Return value:
**Return value**:
No value is returned.
Function description:
**Function description**:
Releases the memory and deletes the controller. This function assigns values to the **Release** API in the driver entry structure. When the HDF fails to call the **Init** function to initialize the driver, the **Release** function can be called to release driver resources. All forced conversion operations for obtaining the corresponding object can be successful only when **Init()** has the corresponding value assignment operations.
Releases the memory and deletes the controller. This function assigns values to the **Release** API in the driver entry structure. When the HDF fails to call the **Init** function to initialize the driver, the **Release** function can be called to release driver resources.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> All forced conversion operations for obtaining the corresponding object can be successful only when **Init()** has the corresponding value assignment operations.
```
void HdfUartDeviceRelease(struct HdfDeviceObject *device)
{
struct UartHost *host = NULL;
...
host = UartHostFromDevice(device);// Forcibly convert HdfDeviceObject to UartHost by using service. For details about the value assignment, see the Bind function.
host = UartHostFromDevice(device); // Forcibly convert HdfDeviceObject to UartHost by using service. For details about the value assignment, see the Bind function.
...
if (host->priv != NULL) {
Hi35xxDetach(host); // Customized memory release function.
Hi35xxDetach(host); // Customized memory release function.
}
UartHostDestroy(host); // Call the function of the core layer to release the host.
UartHostDestroy(host); // Call the function of the core layer to release the host.
}
static void Hi35xxDetach(struct UartHost *host)
......@@ -382,10 +398,10 @@ The following uses **uart_hi35xx.c** as an example to present the information re
struct UartDriverData *udd = NULL;
struct UartPl011Port *port = NULL;
...
udd = host->priv; // Convert UartHost to UartDriverData.
udd = host->priv; // The conversion from UartHost to UartDriverData is involved.
...
UartRemoveDev(host);// Remove the VFS.
port = udd->private;// Convert UartDriverData to UartPl011Port.
UartRemoveDev (host); // Remove the VFS.
port = udd->private; // The conversion from UartDriverData to UartPl011Port is involved.
if (port != NULL) {
if (port->physBase != 0) {
OsalIoUnmap((void *)port->physBase);// Unmap addresses.
......@@ -393,7 +409,7 @@ The following uses **uart_hi35xx.c** as an example to present the information re
OsalMemFree(port);
udd->private = NULL;
}
OsalMemFree(udd);//Release UartDriverData.
OsalMemFree (udd); // Release UartDriverData.
host->priv = NULL;
}
```
en/device-dev/kernel/Readme-EN.md
浏览文件 @ 5919c0fe
......@@ -19,13 +19,13 @@
- [Software Timer](kernel-mini-basic-soft.md)
- Extended Components
- [C++ Support](kernel-mini-extend-support.md)
- [PUP](kernel-mini-extend-cpup.md)
- [CPUP](kernel-mini-extend-cpup.md)
- [Dynamic Loading](kernel-mini-extend-dynamic-loading.md)
- [File System](kernel-mini-extend-file.md)
- File System
- [FAT](kernel-mini-extend-file-fat.md)
- [LittleFS](kernel-mini-extend-file-lit.md)
- Kernel Debugging
- [Memory Debugging](kernel-mini-memory-debug.md)
- Memory Debugging
- [Memory Information Statistics](kernel-mini-memory-debug-mes.md)
- [Memory Leak Check](kernel-mini-memory-debug-det.md)
- [Memory Corruption Check](kernel-mini-memory-debug-cet.md)
......@@ -52,25 +52,25 @@
- Memory Management
- [Heap Memory Management](kernel-small-basic-memory-heap.md)
- [Physical Memory Management](kernel-small-basic-memory-physical.md)
- [Virtual Memory Management](kernel-small-basic-memory-virtual.md)
- [Virtual-to-Physical Mapping](kernel-small-basic-inner-reflect.md)
- [Virtual Memory Management](kernel-small-basic-memory-virtual.md)
- [Virtual-to-Physical Mapping](kernel-small-basic-inner-reflect.md)
- Kernel Communication Mechanisms
- [Event](kernel-small-basic-trans-event.md)
- [Semaphore](kernel-small-basic-trans-semaphore.md)
- [Mutex](kernel-small-basic-trans-mutex.md)
- [Semaphore](kernel-small-basic-trans-semaphore.md)
- [Mutex](kernel-small-basic-trans-mutex.md)
- [Queue](kernel-small-basic-trans-queue.md)
- [RW Lock](kernel-small-basic-trans-rwlock.md)
- [Futex](kernel-small-basic-trans-user-mutex.md)
- [Signal](kernel-small-basic-trans-user-signal.md)
- [Time Management](kernel-small-basic-time.md)
- [Software Timer](kernel-small-basic-softtimer.md)
- [Atomic Operation](kernel-small-basic-atomic.md)
- [Software Timer](kernel-small-basic-softtimer.md)
- [Atomic Operation](kernel-small-basic-atomic.md)
- Extension Components
- [System Call](kernel-small-bundles-system.md)
- [Dynamic Loading and Linking](kernel-small-bundles-linking.md)
- [Virtual Dynamic Shared Object](kernel-small-bundles-share.md)
- [LiteIPC](kernel-small-bundles-ipc.md)
- [File Systems](kernel-small-bundles-fs.md)
- File Systems
- [Virtual File System](kernel-small-bundles-fs-virtual.md)
- Supported File Systems
- [FAT](kernel-small-bundles-fs-support-fat.md)
......@@ -160,7 +160,7 @@
- [Working Principles](kernel-small-debug-user-function.md)
- Usage
- [Available APIs](kernel-small-debug-user-guide-api.md)
- [How to Use](kernel-small-debug-user-guide-use.md)
- How to Use
- [Calling APIs](kernel-small-debug-user-guide-use-api.md)
- [Using the CLI](kernel-small-debug-user-guide-use-cli.md)
- [Typical Memory Problems](kernel-small-debug-user-faqs.md)
......
en/device-dev/quick-start/Readme-EN.md
浏览文件 @ 5919c0fe
......@@ -19,9 +19,8 @@
- [Burning](quickstart-ide-lite-steps-hi3516-burn.md)
- [Running](quickstart-ide-lite-steps-hi3516-running.md)
- Appendix
- Introduction to Development Boards
- [Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)
- [Introduction to the Hi3861 Development Board](quickstart-ide-lite-introduction-hi3861.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-lite-introduction-hi3516.md)
- Getting Started with Mini and Small Systems (Installation Package Mode)
- [Mini and Small System Overview](quickstart-lite-overview.md)
- [Environment Preparation](quickstart-lite-env-setup.md)
......@@ -67,9 +66,8 @@
- [Burning](quickstart-ide-standard-running-rk3568-burning.md)
- [Running](quickstart-ide-standard-running-rk3568-running.md)
- Appendix
- Introduction to Development Boards
- [Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)
- [Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)
- [Introduction to the Hi3516 Development Board](quickstart-ide-standard-board-introduction-hi3516.md)
- [Introduction to the RK3568 Development Board](quickstart-ide-standard-board-introduction-rk3568.md)
- Getting Started with Standard System (Installation Package Mode)
- [Standard System Overview](quickstart-standard-overview.md)
- [Setting Up Environments for Standard System](quickstart-standard-env-setup.md)
......
zh-cn/application-dev/database/database-mdds-guidelines.md
浏览文件 @ 5919c0fe
......@@ -14,13 +14,13 @@
| 接口名称 | 描述 |
| ------------------------------------------------------------ | ----------------------------------------------- |
| createKVManager(config:KVManagerConfig,callback:AsyncCallback&lt;KVManager&gt;):void<br/>createKVManager(config:KVManagerConfig):Promise&lt;KVManager> | 创建一个`KVManager`对象实例，用于管理数据库对象。 |
| getKVStore&lt;TextendsKVStore&gt;(storeId:string,options:Options,callback:AsyncCallback&lt;T&gt;):void<br/>getKVStore&lt;TextendsKVStore&gt;(storeId:string,options:Options):Promise&lt;T&gt; | 指定`Options`和`storeId`，创建并获取`KVStore`数据库。 |
| put(key:string,value:Uint8Array\|string\|number\|boolean,callback:AsyncCallback&lt;void&gt;):void<br/>put(key:string,value:Uint8Array\|string\|number\|boolean):Promise&lt;void> | 插入和更新数据。 |
| delete(key:string,callback:AsyncCallback&lt;void&gt;):void<br/>delete(key:string):Promise&lt;void> | 删除数据。 |
| get(key:string,callback:AsyncCallback&lt;Uint8Array\|string\|boolean\|number&gt;):void<br/>get(key:string):Promise&lt;Uint8Array\|string\|boolean\|number> | 查询数据。 |
| on(event:'dataChange',type:SubscribeType,observer:Callback&lt;ChangeNotification&gt;):void<br/>on(event:'syncComplete',syncCallback:Callback&lt;Array&lt;[string,number]&gt;&gt;):void | 订阅数据库中数据的变化。 |
| sync(deviceIdList:string[],mode:SyncMode,allowedDelayMs?:number):void | 在手动模式下，触发数据库同步。 |
| createKVManager(config: KVManagerConfig, callback: AsyncCallback&lt;KVManager&gt;): void<br/>createKVManager(config: KVManagerConfig): Promise&lt;KVManager> | 创建一个`KVManager`对象实例，用于管理数据库对象。 |
| getKVStore&lt;TextendsKVStore&gt;(storeId: string, options: Options, callback: AsyncCallback&lt;T&gt;): void<br/>getKVStore&lt;TextendsKVStore&gt;(storeId: string, options: Options): Promise&lt;T&gt; | 指定`Options`和`storeId`，创建并获取`KVStore`数据库。 |
| put(key: string, value: Uint8Array\|string\|number\|boolean, callback: AsyncCallback&lt;void&gt;): void<br/>put(key: string, value: Uint8Array\|string\|number\|boolean): Promise&lt;void> | 插入和更新数据。 |
| delete(key: string, callback: AsyncCallback&lt;void&gt;): void<br/>delete(key: string): Promise&lt;void> | 删除数据。 |
| get(key: string, callback: AsyncCallback&lt;Uint8Array\|string\|boolean\|number&gt;): void<br/>get(key: string): Promise&lt;Uint8Array\|string\|boolean\|number> | 查询数据。 |
| on(event: 'dataChange', type: SubscribeType, observer: Callback&lt;ChangeNotification&gt;): void<br/>on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string,number]&gt;&gt;): void | 订阅数据库中数据的变化。 |
| sync(deviceIdList: string[], mode: SyncMode, allowedDelayMs?: number): void | 在手动模式下，触发数据库同步。 |
......@@ -34,8 +34,40 @@
```js
import distributedData from '@ohos.data.distributedData';
```
2. 请求权限（同步操作时进行该步骤）。
2. 根据配置构造分布式数据库管理类实例。
需要在`config.json`文件里进行配置请求权限，示例代码如下：
```json
{
"module": {
"reqPermissions": [
{
"name": "ohos.permission.DISTRIBUTED_DATASYNC"
}
]
}
}
```
这个权限还需要在应用首次启动的时候弹窗获取用户授权，可以通过如下代码实现：
```js
import featureAbility from '@ohos.ability.featureAbility';
function grantPermission() {
console.info('grantPermission');
let context = featureAbility.getContext();
context.requestPermissionsFromUser(['ohos.permission.DISTRIBUTED_DATASYNC'], 666, function (result) {
console.info(`result.requestCode=${result.requestCode}`)
})
console.info('end grantPermission');
}
grantPermission();
```
3. 根据配置构造分布式数据库管理类实例。
1. 根据应用上下文创建`kvManagerConfig`对象。
2. 创建分布式数据库管理器实例。
......@@ -64,7 +96,7 @@
}
```
3. 获取/创建分布式数据库。
4. 获取/创建分布式数据库。
1. 声明需要创建的分布式数据库ID描述。
2. 创建分布式数据库，建议关闭自动同步功能（`autoSync:false`），需要同步时主动调用`sync`接口。
......@@ -98,7 +130,7 @@
>
> 组网设备间同步数据的场景，建议在应用启动时打开分布式数据库，获取数据库的句柄。在该句柄（如示例中的`kvStore`）的生命周期内无需重复创建数据库，可直接使用句柄对数据库进行数据的插入等操作。
4. 订阅分布式数据变化。
5. 订阅分布式数据变化。
以下为订阅单版本分布式数据库数据变化通知的代码示例:
```js
......@@ -107,7 +139,7 @@
});
```
5. 将数据写入分布式数据库。
6. 将数据写入分布式数据库。
1. 构造需要写入分布式数据库的`Key`（键）和`Value`（值）。
2. 将键值数据写入分布式数据库。
......@@ -130,7 +162,7 @@
}
```
6. 查询分布式数据库数据。
7. 查询分布式数据库数据。
1. 构造需要从单版本分布式数据库中查询的`Key`（键）。
2. 从单版本分布式数据库中获取数据。
......@@ -155,7 +187,7 @@
}
```
7. 同步数据到其他设备。
8. 同步数据到其他设备。
选择同一组网环境下的设备以及同步模式，进行数据同步。
......
zh-cn/application-dev/database/database-mdds-overview.md
浏览文件 @ 5919c0fe
......@@ -9,65 +9,69 @@
## 基本概念
- **KV数据模型**
“KV数据模型”是“Key-Value数据模型”的简称，“Key-Value”即“键-值”；其数据以键值对的形式进行组织、索引和存储。
### KV数据模型
KV数据模型适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。分布式数据库也是基于KV数据模型，对外提供KV类型的访问接口。
“KV数据模型”是“Key-Value数据模型”的简称，“Key-Value”即“键-值”；其数据以键值对的形式进行组织、索引和存储。
- **分布式数据库事务性**
分布式数据库事务支持本地事务（和传统数据库的事务概念一致）和同步事务。同步事务是指在设备之间同步数据时，以本地事务为单位进行同步，一次本地事务的修改要么都同步成功，要么都同步失败。
KV数据模型适合不涉及过多数据关系和业务关系的业务数据存储，比SQL数据库存储拥有更好的读写性能，同时因其在分布式场景中降低了解决数据库版本兼容问题的复杂度，和数据同步过程中冲突解决的复杂度而被广泛使用。分布式数据库也是基于KV数据模型，对外提供KV类型的访问接口。
- **分布式数据库一致性**
在分布式场景中一般会涉及多个设备，组网内设备之间看到的数据是否一致称为分布式数据库的一致性。分布式数据库一致性可以分为**强一致性**、**弱一致性**和**最终一致性**。
### 分布式数据库事务性
- **强一致性**：是指某一设备成功增、删、改数据后，组网内设备对该数据的读取操作都将得到更新后的值。
- **弱一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取到本次更新数据，也可能读取不到，不能保证在多长时间后每个设备的数据一定是一致的。
- **最终一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取不到本次更新数据，但在某个时间窗口之后组网内设备的数据能够达到一致状态。
分布式数据库事务支持本地事务（和传统数据库的事务概念一致）和同步事务。同步事务是指在设备之间同步数据时，以本地事务为单位进行同步，一次本地事务的修改要么都同步成功，要么都同步失败。
强一致性对分布式数据的管理要求非常高，在服务器的分布式场景可能会遇到。因为移动终端设备的不常在线、以及无中心的特性，分布式数据服务不支持强一致性，只支持最终一致性。
### 分布式数据库一致性
- **分布式数据库同步**
底层通信组件完成设备发现和认证，会通知上层应用程序（包括分布式数据服务）设备上线。收到设备上线的消息后分布式数据服务可以在两个设备之间建立加密的数据传输通道，利用该通道在两个设备之间进行数据同步。
在分布式场景中一般会涉及多个设备，组网内设备之间看到的数据是否一致称为分布式数据库的一致性。分布式数据库一致性可以分为**强一致性**、**弱一致性**和**最终一致性**。
分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。
- **强一致性**：是指某一设备成功增、删、改数据后，组网内设备对该数据的读取操作都将得到更新后的值。
- **弱一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取到本次更新数据，也可能读取不到，不能保证在多长时间后每个设备的数据一定是一致的。
- **最终一致性**：是指某一设备成功增、删、改数据后，组网内设备可能读取不到本次更新数据，但在某个时间窗口之后组网内设备的数据能够达到一致状态。
- **手动同步**：由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。
- **自动同步**：包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。
强一致性对分布式数据的管理要求非常高，在服务器的分布式场景可能会遇到。因为移动终端设备的不常在线、以及无中心的特性，分布式数据服务不支持强一致性，只支持最终一致性。
- **单版本分布式数据库**
单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。
### 分布式数据库同步
- **设备协同分布式数据库**
设备协同分布式数据库建立在单版本分布式数据库之上，对应用程序存入的KV数据中的Key前面拼接了本设备的DeviceID标识符，这样能保证每个设备产生的数据严格隔离，底层按照设备的维度管理这些数据，设备协同分布式数据库支持以设备的维度查询分布式数据，但是不支持修改远端设备同步过来的数据。
底层通信组件完成设备发现和认证，会通知上层应用程序（包括分布式数据服务）设备上线。收到设备上线的消息后分布式数据服务可以在两个设备之间建立加密的数据传输通道，利用该通道在两个设备之间进行数据同步。
- **分布式数据库冲突解决策略**
分布式数据库多设备提交冲突场景，在给提交冲突做合并的过程中，如果多个设备同时修改了同一数据，则称这种场景为数据冲突。数据冲突采用默认冲突解决策略（Last-write-wins），基于提交时间戳，取时间戳较大的提交数据，当前不支持定制冲突解决策略。
分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。
- **数据库Schema化管理与谓词查询**
单版本数据库支持在创建和打开数据库时指定Schema，数据库根据Schema定义感知KV记录的Value格式，以实现对Value值结构的检查，并基于Value中的字段实现索引建立和谓词查询。
- **手动同步**：由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。
- **自动同步**：包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。
- **分布式数据库备份能力**
提供分布式数据库备份能力，业务通过设置backup属性为true，可以触发分布式数据服务每日备份。当分布式数据库发生损坏，分布式数据服务会删除损坏数据库，并且从备份数据库中恢复上次备份的数据。如果不存在备份数据库，则创建一个新的数据库。同时支持加密数据库的备份能力。
### 单版本分布式数据库
单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。
### 设备协同分布式数据库
设备协同分布式数据库建立在单版本分布式数据库之上，对应用程序存入的KV数据中的Key前面拼接了本设备的DeviceID标识符，这样能保证每个设备产生的数据严格隔离，底层按照设备的维度管理这些数据，设备协同分布式数据库支持以设备的维度查询分布式数据，但是不支持修改远端设备同步过来的数据。
### 分布式数据库冲突解决策略
分布式数据库多设备提交冲突场景，在给提交冲突做合并的过程中，如果多个设备同时修改了同一数据，则称这种场景为数据冲突。数据冲突采用默认冲突解决策略（Last-write-wins），基于提交时间戳，取时间戳较大的提交数据，当前不支持定制冲突解决策略。
### 数据库Schema化管理与谓词查询
单版本数据库支持在创建和打开数据库时指定Schema，数据库根据Schema定义感知KV记录的Value格式，以实现对Value值结构的检查，并基于Value中的字段实现索引建立和谓词查询。
### 分布式数据库备份能力
提供分布式数据库备份能力，业务通过设置backup属性为true，可以触发分布式数据服务每日备份。当分布式数据库发生损坏，分布式数据服务会删除损坏数据库，并且从备份数据库中恢复上次备份的数据。如果不存在备份数据库，则创建一个新的数据库。同时支持加密数据库的备份能力。
## 运作机制
分布式数据服务支撑OpenHarmony系统上应用程序数据库数据分布式管理，支持数据在相同帐号的多端设备之间相互同步，为用户在多端设备上提供一致的用户体验，分布式数据服务包含五部分：
- **服务接口**
分布式数据服务提供专门的数据库创建、数据访问、数据订阅等接口给应用程序调用，接口支持KV数据模型，支持常用的数据类型，同时确保接口的兼容性、易用性和可发布性。
- **服务接口：** 分布式数据服务提供专门的数据库创建、数据访问、数据订阅等接口给应用程序调用，接口支持KV数据模型，支持常用的数据类型，同时确保接口的兼容性、易用性和可发布性。
- **服务组件**
服务组件负责服务内元数据管理、权限管理、加密管理、备份和恢复管理以及多用户管理等、同时负责初始化底层分布式DB的存储组件、同步组件和通信适配层。
- **服务组件：** 服务组件负责服务内元数据管理、权限管理、加密管理、备份和恢复管理以及多用户管理等、同时负责初始化底层分布式DB的存储组件、同步组件和通信适配层。
- **存储组件**
存储组件负责数据的访问、数据的缩减、事务、快照、数据库加密，以及数据合并和冲突解决等特性。
- **存储组件：** 存储组件负责数据的访问、数据的缩减、事务、快照、数据库加密，以及数据合并和冲突解决等特性。
- **同步组件**
同步组件连结了存储组件与通信组件，其目标是保持在线设备间的数据库数据一致性，包括将本地产生的未同步数据同步给其他设备，接收来自其他设备发送过来的数据，并合并到本地设备中。
- **同步组件：** 同步组件连结了存储组件与通信组件，其目标是保持在线设备间的数据库数据一致性，包括将本地产生的未同步数据同步给其他设备，接收来自其他设备发送过来的数据，并合并到本地设备中。
- **通信适配层**
通信适配层负责调用底层公共通信层的接口完成通信管道的创建、连接，接收设备上下线消息，维护已连接和断开设备列表的元数据，同时将设备上下线信息发送给上层同步组件，同步组件维护连接的设备列表，同步数据时根据该列表，调用通信适配层的接口将数据封装并发送给连接的设备。
- **通信适配层：** 通信适配层负责调用底层公共通信层的接口完成通信管道的创建、连接，接收设备上下线消息，维护已连接和断开设备列表的元数据，同时将设备上下线信息发送给上层同步组件，同步组件维护连接的设备列表，同步数据时根据该列表，调用通信适配层的接口将数据封装并发送给连接的设备。
应用程序通过调用分布式数据服务接口实现分布式数据库创建、访问、订阅功能，服务接口通过操作服务组件提供的能力，将数据存储至存储组件，存储组件调用同步组件实现将数据同步，同步组件使用通信适配层将数据同步至远端设备，远端设备通过同步组件接收数据，并更新至本端存储组件，通过服务接口提供给应用程序使用。
......@@ -83,6 +87,7 @@
- 分布式数据服务的数据模型仅支持KV数据模型，不支持外键、触发器等关系型数据库中的功能。
- 分布式数据服务支持的KV数据模型规格：
- 设备协同数据库，针对每条记录，Key的长度≤896 Byte，Value的长度&lt;4 MB。
- 单版本数据库，针对每条记录，Key的长度≤1 KB，Value的度&lt;4 MB。
- 每个应用程序最多支持同时打开16个分布式数据库。
......
zh-cn/application-dev/database/database-relational-guidelines.md
浏览文件 @ 5919c0fe
......@@ -16,8 +16,8 @@
| 接口名 | 描述 |
| -------- | -------- |
|getRdbStore(config:StoreConfig,version:number):Promise&lt;RdbStore&gt; | 获得一个相关的RdbStore，操作关系型数据库，用户可以根据自己的需求配置RdbStore的参数，然后通过RdbStore调用相关接口可以执行相关的数据操作，使用Promise异步回调。<br/>-config：与此RDB存储相关的数据库配置。<br/>-version：数据库版本。 |
| deleteRdbStore(name:string):Promise&lt;void&gt; | 使用指定的数据库文件配置删除数据库，使用Promise异步回调。<br/>-name：数据库名称。 |
|getRdbStore(config: StoreConfig, version: number): Promise&lt;RdbStore&gt; | 获得一个相关的RdbStore，操作关系型数据库，用户可以根据自己的需求配置RdbStore的参数，然后通过RdbStore调用相关接口可以执行相关的数据操作，使用Promise异步回调。<br/>-config：与此RDB存储相关的数据库配置。<br/>-version：数据库版本。 |
| deleteRdbStore(name: string): Promise&lt;void&gt; | 使用指定的数据库文件配置删除数据库，使用Promise异步回调。<br/>-name：数据库名称。 |
### 数据库的增删改查
......@@ -31,7 +31,7 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| RdbStore | insert(name:string,values:ValuesBucket):Promise&lt;number&gt; | 向目标表中插入一行数据，使用Promise异步回调。<br>如果操作成功，返回行ID；否则返回-1。<br/>-name：指定的目标表名。<br/>-values：表示要插入到表中的数据行。 |
| RdbStore | insert(name: string, values: ValuesBucket): Promise&lt;number&gt; | 向目标表中插入一行数据，使用Promise异步回调。<br>如果操作成功，返回行ID；否则返回-1。<br/>-name：指定的目标表名。<br/>-values：表示要插入到表中的数据行。 |
- **更新**
......@@ -41,7 +41,7 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| RdbStore | update(values:ValuesBucket,rdbPredicates:RdbPredicates):Promise\<number> | 根据RdbPredicates的指定实例对象更新数据库中的数据，使用Promise异步回调。<br>返回受影响的行数。<br/>-values：以ValuesBucket存储的要更新的数据。<br/>-rdbPredicates：表示RdbPredicates的实例对象指定的更新条件。 |
| RdbStore | update(values: ValuesBucket, rdbPredicates: RdbPredicates): Promise\<number> | 根据RdbPredicates的指定实例对象更新数据库中的数据，使用Promise异步回调。<br>返回受影响的行数。<br/>-values：以ValuesBucket存储的要更新的数据。<br/>-rdbPredicates：表示RdbPredicates的实例对象指定的更新条件。 |
- **删除**
......@@ -51,7 +51,7 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| RdbStore | delete(rdbPredicates:RdbPredicates):Promise\<number> | 根据rdbPredicates的指定实例对象从数据库中删除数据，使用Promise异步回调。<br>返回受影响的行数。<br/>-rdbPredicates：RdbPredicates的实例对象指定的删除条件。 |
| RdbStore | delete(rdbPredicates: RdbPredicates): Promise\<number> | 根据rdbPredicates的指定实例对象从数据库中删除数据，使用Promise异步回调。<br>返回受影响的行数。<br/>-rdbPredicates：RdbPredicates的实例对象指定的删除条件。 |
- **查询**
......@@ -64,8 +64,8 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| RdbStore | query(rdbPredicates:RdbPredicates,columns:Array):Promise&lt;ResultSet&gt; | 根据指定条件查询数据库中的数据，使用Promise异步回调。<br/>-rdbPredicates：表示RdbPredicates的实例对象指定的查询条件。<br/>-columns：表示要查询的列。如果值为空，则查询应用于所有列。 |
| RdbStore | querySql(sql:string,bindArgs?:Array&lt;ValueType&gt;):Promise&lt;ResultSet&gt; | 根据指定SQL语句查询数据库中的数据，使用Promise异步回调。<br/>-sql：指定要查询的SQL语句。<br/>-bindArgs：SQL语句中参数的值。 |
| RdbStore | query(rdbPredicates: RdbPredicates, columns: Array): Promise&lt;ResultSet&gt; | 根据指定条件查询数据库中的数据，使用Promise异步回调。<br/>-rdbPredicates：表示RdbPredicates的实例对象指定的查询条件。<br/>-columns：表示要查询的列。如果值为空，则查询应用于所有列。 |
| RdbStore | querySql(sql: string, bindArgs?: Array&lt;ValueType&gt;): Promise&lt;ResultSet&gt; | 根据指定SQL语句查询数据库中的数据，使用Promise异步回调。<br/>-sql：指定要查询的SQL语句。<br/>-bindArgs：SQL语句中参数的值。 |
### 数据库谓词的使用
......@@ -77,11 +77,11 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| RdbPredicates | equalTo(field:string,value:ValueType):RdbPredicates | 配置谓词以匹配数据字段为ValueType且值等于指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回与指定字段匹配的谓词。 |
| RdbPredicates | notEqualTo(field:string,value:ValueType):RdbPredicates | 配置谓词以匹配数据字段为ValueType且值不等于指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回与指定字段匹配的谓词。 |
| RdbPredicates | or():RdbPredicates | 将或条件添加到谓词中。<br/>-RdbPredicates：返回带有或条件的谓词。 |
| RdbPredicates | and():RdbPredicates | 向谓词添加和条件。<br/>-RdbPredicates：返回带有和条件的谓词。 |
| RdbPredicates | contains(field:string,value:string):RdbPredicats | 配置谓词以匹配数据字段为String且value包含指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回带有包含条件的谓词。 |
| RdbPredicates | equalTo(field: string, value: ValueType): RdbPredicates | 配置谓词以匹配数据字段为ValueType且值等于指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回与指定字段匹配的谓词。 |
| RdbPredicates | notEqualTo(field: string, value: ValueType): RdbPredicates | 配置谓词以匹配数据字段为ValueType且值不等于指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回与指定字段匹配的谓词。 |
| RdbPredicates | or(): RdbPredicates | 将或条件添加到谓词中。<br/>-RdbPredicates：返回带有或条件的谓词。 |
| RdbPredicates | and(): RdbPredicates | 向谓词添加和条件。<br/>-RdbPredicates：返回带有和条件的谓词。 |
| RdbPredicates | contains(field: string, value: string): RdbPredicats | 配置谓词以匹配数据字段为String且value包含指定值的字段。<br/>-field：数据库表中的列名。<br/>-value：指示要与谓词匹配的值。<br/>-RdbPredicates：返回带有包含条件的谓词。 |
### 查询结果集的使用
......@@ -97,12 +97,12 @@
| 类名 | 接口名 | 描述 |
| -------- | -------- | -------- |
| ResultSet | goToFirstRow():boolean | 将结果集移动到第一行。 |
| ResultSet | getString(columnIndex:number):string | 获取当前行指定列的值，以String类型返回。 |
| ResultSet | getBlob(columnIndex:number):Uint8Array | 获取当前行指定列的值，以字节数组形式返回。 |
| ResultSet | getDouble(columnIndex:number):number | 获取当前行指定列的值，以double型返回。 |
| ResultSet | getLong(columnIndex:number):number | 获取当前行指定列的值，以Long形式返回。 |
| ResultSet | close():void | 关闭结果集。 |
| ResultSet | goToFirstRow(): boolean | 将结果集移动到第一行。 |
| ResultSet | getString(columnIndex:number): string | 获取当前行指定列的值，以String类型返回。 |
| ResultSet | getBlob(columnIndex:number): Uint8Array | 获取当前行指定列的值，以字节数组形式返回。 |
| ResultSet | getDouble(columnIndex:number): number | 获取当前行指定列的值，以double型返回。 |
| ResultSet | getLong(columnIndex:number): number | 获取当前行指定列的值，以Long形式返回。 |
| ResultSet | close(): void | 关闭结果集。 |
......
zh-cn/application-dev/device/usb-guidelines.md
浏览文件 @ 5919c0fe
......@@ -17,19 +17,19 @@ USB类开放能力如下，具体请查阅[API参考文档](../reference/apis/js
| 接口名 | 描述 |
| -------- | -------- |
| hasRight(deviceName:string):boolean | 如果“使用者”（如各种App或系统）有权访问设备则返回true；无权访问设备则返回false。 |
| requestRight(deviceName:string):Promise&lt;boolean&gt; | 请求给定软件包的临时权限以访问设备。 |
| connectDevice(device:USBDevice):Readonly&lt;USBDevicePipe&gt; | 根据`getDevices()`返回的设备信息打开USB设备。 |
| getDevices():Array&lt;Readonly&lt;USBDevice&gt;&gt; | 返回USB设备列表。 |
| setConfiguration(pipe:USBDevicePipe,config:USBConfig):number | 设置设备的配置。 |
| setInterface(pipe:USBDevicePipe,iface:USBInterface):number | 设置设备的接口。 |
| claimInterface(pipe:USBDevicePipe,iface:USBInterface,force?:boolean):number | 获取接口。 |
|bulkTransfer(pipe:USBDevicePipe,endpoint:USBEndpoint,buffer:Uint8Array,timeout?:number):Promise&lt;number&gt; | 批量传输。 |
| closePipe(pipe:USBDevicePipe):number | 关闭设备消息控制通道。 |
| releaseInterface(pipe:USBDevicePipe,iface:USBInterface):number | 释放接口。 |
| getFileDescriptor(pipe:USBDevicePipe):number | 获取文件描述符。 |
| getRawDescriptor(pipe:USBDevicePipe):Uint8Array | 获取原始的USB描述符。 |
| controlTransfer(pipe:USBDevicePipe,contrlparam:USBControlParams,timeout?:number):Promise&lt;number&gt; | 控制传输。 |
| hasRight(deviceName: string): boolean | 如果“使用者”（如各种App或系统）有权访问设备则返回true；无权访问设备则返回false。 |
| requestRight(deviceName: string): Promise&lt;boolean&gt; | 请求给定软件包的临时权限以访问设备。 |
| connectDevice(device: USBDevice): Readonly&lt;USBDevicePipe&gt; | 根据`getDevices()`返回的设备信息打开USB设备。 |
| getDevices(): Array&lt;Readonly&lt;USBDevice&gt;&gt; | 返回USB设备列表。 |
| setConfiguration(pipe: USBDevicePipe, config: USBConfig): number | 设置设备的配置。 |
| setInterface(pipe: USBDevicePipe, iface: USBInterface): number | 设置设备的接口。 |
| claimInterface(pipe: USBDevicePipe, iface: USBInterface, force?: boolean): number | 获取接口。 |
|bulkTransfer(pipe: USBDevicePipe, endpoint: USBEndpoint, buffer: Uint8Array, timeout?: number): Promise&lt;number&gt; | 批量传输。 |
| closePipe(pipe: USBDevicePipe): number | 关闭设备消息控制通道。 |
| releaseInterface(pipe: USBDevicePipe, iface: USBInterface): number | 释放接口。 |
| getFileDescriptor(pipe: USBDevicePipe): number | 获取文件描述符。 |
| getRawDescriptor(pipe: USBDevicePipe): Uint8Array | 获取原始的USB描述符。 |
| controlTransfer(pipe: USBDevicePipe, contrlparam: USBControlParams, timeout?: number): Promise&lt;number&gt; | 控制传输。 |
## 开发步骤
......@@ -39,7 +39,7 @@ USB设备可作为Host设备连接Device设备进行数据传输。开发示例
1. 获取设备列表。
```js
// 导入usb接口api包。
// 导入USB接口api包。
import usb from '@ohos.usb';
// 获取设备列表。
var deviceList = usb.getDevices();
......
zh-cn/application-dev/device/usb-overview.md
浏览文件 @ 5919c0fe
......@@ -9,7 +9,7 @@ USB服务是应用访问底层的一种设备抽象概念。开发者根据提
USB服务系统包含USB API、USB Service、USB HAL。
**图2** USB服务运作机制
**图1** USB服务运作机制
![zh-cn_image_0000001237821727](figures/zh-cn_image_0000001237821727.png)
......
zh-cn/application-dev/device/vibrator-overview.md
浏览文件 @ 5919c0fe
# Vibrator开发概述
马达振动服务最大化开放硬工最新马达器件能力，通过拓展原生马达服务实现振动与交互融合设计，打造细腻精致的一体化振动体验和差异化体验，提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。
振动器模块服务最大化开放硬工最新马达器件能力，通过拓展原生马达服务实现振动与交互融合设计，打造细腻精致的一体化振动体验和差异化体验，提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。
## 运作机制
......@@ -23,7 +23,7 @@ Vibrator属于控制类小器件，主要包含以下四个模块：Vibrator API
## 约束与限制
在使用振动器时，开发者需要配置请求振动器的权限ohos.permission.VIBRATE，才能控制振动器振动，敏感级别是system_grant。
在使用振动器时，开发者需要配置请求振动器的权限ohos.permission.VIBRATE，才能控制振动器振动，权限类型是system_grant。
zh-cn/application-dev/media/audio-recorder.md
浏览文件 @ 5919c0fe
......@@ -191,6 +191,5 @@ export class AudioRecorderDemo {
针对音频录制开发，有以下相关实例可供参考：
- [`Recorder:`录音机（eTS）（API8）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/media/Recorder)
- [`JsRecorder`：录音机（JS）（API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/media/JSRecorder)
- [`eTsAudioPlayer`: 音频播放器（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/blob/master/media/Recorder/entry/src/main/ets/MainAbility/pages/Play.ets)
- [音频播放器（eTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/Audio_OH_ETS)
zh-cn/application-dev/napi/native-window-guidelines.md
浏览文件 @ 5919c0fe
......@@ -86,7 +86,7 @@ NativeWindow是`OpenHarmony`**本地平台化窗口**，包括从`Surface`构建
SkImageInfo imageInfo = ...
bitmap.setInfo(imageInfo, bufferHandle->stride);
bitmap.setPixels(bufferHandle->virAddr);
//创建 Skia Canvas 并将内容写入naitve window
//创建 Skia Canvas 并将内容写入native window
...
//写入完成后，通过OH_NativeWindwo_NativeWindowFlushBuffer 提交给消费者使用，例如：显示在屏幕上
......@@ -101,7 +101,13 @@ NativeWindow是`OpenHarmony`**本地平台化窗口**，包括从`Surface`构建
OH_NativeXComponent_Callback &callback_;
callback_->OnSurfaceCreated = OnSufaceCreatedCB;
callback_->OnSurfaceChanged = OnSufaceChangedCB;
callback_->OnSurfaceDestoryed = OnSufaceDestoryedCB;
callback_->OnSurfaceDestroyed = OnSufaceDestroyedCB;
callback_->DispatchTouchEvent = DispatchTouchEventCB;
OH_NativeXComponent_RegisterCallback(nativeXComponent, callback_)
```
## 相关实例
针对NativeWindow的使用，有以下相关实例可供参考：
- [使用NativeWindow接口获取Buffer](https://gitee.com/openharmony/graphic_graphic_2d/blob/master/rosen/samples/hello_native_window/hello_native_window.cpp)
\ No newline at end of file
zh-cn/application-dev/reference/Readme-CN.md
浏览文件 @ 5919c0fe
# 开发参考
- [组件参考（基于TS扩展的声明式开发范式）](arkui-ts/Readme-CN.md)
- [组件参考（基于JS扩展的类Web开发范式）](arkui-js/Readme-CN.md)
- [组件参考（基于eTS的声明式开发范式）](arkui-ts/Readme-CN.md)
- [组件参考（兼容JS的类Web开发范式）](arkui-js/Readme-CN.md)
- [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
- [接口参考（JS及TS API）](apis/Readme-CN.md)
- 接口参考（Native API）
......
zh-cn/application-dev/reference/apis/js-apis-bluetooth.md
浏览文件 @ 5919c0fe
......@@ -13,17 +13,6 @@ import bluetooth from '@ohos.bluetooth';
```
## 权限
ohos.permission.USE_BLUETOOTH
ohos.permission.MANAGE_BLUETOOTH
ohos.permission.DISCOVER_BLUETOOTH
ohos.permission.LOCATION
## bluetooth.enableBluetooth<sup>8+</sup><a name="enableBluetooth"></a>
enableBluetooth(): boolean
......@@ -1962,7 +1951,7 @@ server端订阅特征值写请求事件。
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | -------------------------------------- |
| type | string | 是 | 填写"characteristicWrite"字符串，表示特征值写请求事件。 |
| callback | Callback&lt;[DescriptorWriteReq](#descriptorwritereq)&gt; | 是 | 表示回调函数的入参，client端发送的写请求数据。 |
| callback | Callback&lt;[CharacteristicWriteReq](#characteristicwritereq)&gt; | 是 | 表示回调函数的入参，client端发送的写请求数据。 |
**返回值：**
......
zh-cn/application-dev/reference/apis/js-apis-data-rdb.md
浏览文件 @ 5919c0fe
......@@ -29,7 +29,7 @@ getRdbStore(context: Context, config: StoreConfig, version: number, callback: As
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| context | Context | 是 | 应用程序或功能的上下文。 <br>API version 9之前的Context定义见[Context](js-apis-Context.md)。<br>API version 9及之后的Context定义见[Context](js-apis-ability-context.md)。|
| context | [Context](js-apis-Context.md) | 是 | 应用上下文。|
| config | [StoreConfig](#storeconfig) | 是 | 与此RDB存储相关的数据库配置。 |
| version | number | 是 | 数据库版本。 |
| callback | AsyncCallback&lt;[RdbStore](#rdbstore)&gt; | 是 | 指定callback回调函数，返回一个RdbStore。 |
......@@ -37,8 +37,13 @@ getRdbStore(context: Context, config: StoreConfig, version: number, callback: As
**示例：**
```js
// 获取context
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext()
// 获取context后调用getRdbStore
const STORE_CONFIG = { name: "RdbTest.db"}
data_rdb.getRdbStore(this.context, STORE_CONFIG, 1, function (err, rdbStore) {
data_rdb.getRdbStore(context, STORE_CONFIG, 1, function (err, rdbStore) {
if (err) {
console.info("Get RdbStore failed, err: " + err)
return
......@@ -59,7 +64,7 @@ getRdbStore(context: Context, config: StoreConfig, version: number): Promise&lt;
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| context | Context | 是 | 应用程序或功能的上下文。 <br>API version 9之前的Context定义见[Context](js-apis-Context.md)。<br>API version 9及之后的Context定义见[Context](js-apis-ability-context.md)。 |
| context | [Context](js-apis-Context.md) | 是 | 应用上下文。 |
| config | [StoreConfig](#storeconfig) | 是 | 与此RDB存储相关的数据库配置。 |
| version | number | 是 | 数据库版本。 |
......@@ -72,8 +77,13 @@ getRdbStore(context: Context, config: StoreConfig, version: number): Promise&lt;
**示例：**
```js
// 获取context
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext()
// 获取context后调用getRdbStore
const STORE_CONFIG = { name: "RdbTest.db" }
let promise = data_rdb.getRdbStore(this.context, STORE_CONFIG, 1);
let promise = data_rdb.getRdbStore(context, STORE_CONFIG, 1);
promise.then(async (rdbStore) => {
console.log("Get RdbStore successfully.")
}).catch((err) => {
......@@ -92,13 +102,18 @@ deleteRdbStore(context: Context, name: string, callback: AsyncCallback&lt;void&g
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| context | Context | 是 | 应用程序或功能的上下文。 <br>API version 9之前的Context定义见[Context](js-apis-Context.md)。<br>API version 9及之后的Context定义见[Context](js-apis-ability-context.md)。|
| context | [Context](js-apis-Context.md) | 是 | 应用上下文。|
| name | string | 是 | 数据库名称。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 指定callback回调函数。 |
**示例：**
```js
data_rdb.deleteRdbStore(this.context, "RdbTest.db", function (err, rdbStore) {
// 获取context
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext()
// 获取context后调用deleteRdbStore
data_rdb.deleteRdbStore(context, "RdbTest.db", function (err) {
if (err) {
console.info("Delete RdbStore failed, err: " + err)
return
......@@ -118,7 +133,7 @@ deleteRdbStore(context: Context, name: string): Promise&lt;void&gt;
**参数**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| context | Context | 是 | 应用程序或功能的上下文。 <br>API version 9之前的Context定义见[Context](js-apis-Context.md)。<br>API version 9及之后的Context定义见[Context](js-apis-ability-context.md)。|
| context | [Context](js-apis-Context.md) | 是 | 应用上下文。|
| name | string | 是 | 数据库名称。 |
**返回值**：
......@@ -128,7 +143,12 @@ deleteRdbStore(context: Context, name: string): Promise&lt;void&gt;
**示例：**
```js
let promise = data_rdb.deleteRdbStore(this.context, "RdbTest.db")
// 获取context
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext()
// 获取context后调用deleteRdbStore
let promise = data_rdb.deleteRdbStore(context, "RdbTest.db")
promise.then(()=>{
console.log("Delete RdbStore successfully.")
}).catch((err) => {
......
zh-cn/application-dev/reference/apis/js-apis-data-storage.md
浏览文件 @ 5919c0fe
......@@ -53,7 +53,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
let storage = data_storage.getStorageSync(path + '/mystore');
storage.putSync('startup', 'auto');
......@@ -86,7 +86,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
data_storage.getStorage(path + '/mystore', function (err, storage) {
if (err) {
......@@ -129,7 +129,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
let getPromise = data_storage.getStorage(path + '/mystore');
getPromise.then((storage) => {
......@@ -165,7 +165,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
data_storage.deleteStorageSync(path + '/mystore');
});
......@@ -195,7 +195,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
data_storage.deleteStorage(path + '/mystore', function (err) {
if (err) {
......@@ -237,7 +237,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
let promisedelSt = data_storage.deleteStorage(path + '/mystore');
promisedelSt.then(() => {
......@@ -271,7 +271,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
data_storage.removeStorageFromCacheSync(path + '/mystore');
});
......@@ -302,7 +302,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
data_storage.removeStorageFromCache(path + '/mystore', function (err) {
if (err) {
......@@ -344,7 +344,7 @@ var path;
var context = featureAbility.getContext();
context.getFilesDir().then((filePath) => {
path = filePath;
console.info("======================>getFilesDirPromsie====================>");
console.info("======================>getFilesDirPromise====================>");
let promiserevSt = data_storage.removeStorageFromCache(path + '/mystore')
promiserevSt.then(() => {
......
zh-cn/application-dev/reference/apis/js-apis-distributed-data.md
浏览文件 @ 5919c0fe
......@@ -596,16 +596,15 @@ KVStore数据库类型枚举。
数据库的安全级别枚举。
**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core
| 名称 | 值 | 说明 |
| --- | ---- | ----------------------- |
| NO_LEVEL | 0 | 表示数据库不设置安全级别。 |
| S0 | 1 | 表示数据库的安全级别为公共级别。 |
| S1 | 2 | 表示数据库的安全级别为低级别，当数据泄露时会产生较低影响。例如，包含壁纸等系统数据的数据库。 |
| S2 | 3 | 表示数据库的安全级别为中级别，当数据泄露时会产生较大影响。例如，包含录音、视频等用户生成数据或通话记录等信息的数据库。 |
| S3 | 5 | 表示数据库的安全级别为高级别，当数据泄露时会产生重大影响。例如，包含用户运动、健康、位置等信息的数据库。 |
| S4 | 6 | 表示数据库的安全级别为关键级别，当数据泄露时会产生严重影响。例如，包含认证凭据、财务数据等信息的数据库。 |
| NO_LEVEL | 0 | 表示数据库不设置安全级别。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore |
| S0 | 1 | 表示数据库的安全级别为公共级别。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S1 | 2 | 表示数据库的安全级别为低级别，当数据泄露时会产生较低影响。例如，包含壁纸等系统数据的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S2 | 3 | 表示数据库的安全级别为中级别，当数据泄露时会产生较大影响。例如，包含录音、视频等用户生成数据或通话记录等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S3 | 5 | 表示数据库的安全级别为高级别，当数据泄露时会产生重大影响。例如，包含用户运动、健康、位置等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
| S4 | 6 | 表示数据库的安全级别为关键级别，当数据泄露时会产生严重影响。例如，包含认证凭据、财务数据等信息的数据库。<br>**系统能力：** SystemCapability.DistributedDataManager.KVStore.Core |
## Constants
......
zh-cn/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ 5919c0fe
# 弹窗
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明**
创建并显示文本提示框、对话框和操作菜单。
> **说明：**
>
> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
## 导入模块
```
```js
import prompt from '@ohos.prompt'
```
## 权限列表
无
## prompt.showToast
......@@ -21,32 +21,31 @@ showToast(options: ShowToastOptions): void
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------------- | ---- | ------- |
| options | [ShowToastOptions](#showtoastoptions) | 是 | 文本弹窗选项。 |
**示例：**
```
export default {
showToast() {
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
}
}
```
```js
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
```
## ShowToastOptions
文本提示框的选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 必填 | 说明 |
| -------- | -------------- | ---- | ---------------------------------------- |
| message | string | 是 | 显示的文本信息。 |
| duration | number | 否 | 默认值1500ms，建议区间：1500ms-10000ms，若小于1500ms则取默认值。 |
| bottom | &lt;length&gt; | 否 | 设置弹窗边框距离屏幕底部的位置。 |
| 名称 | 类型 | 必填 | 说明 |
| -------- | --------------- | ---- | ---------------------------------------- |
| message | string | 是 | 显示的文本信息。 |
| duration | number | 否 | 默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。 |
| bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 |
## prompt.showDialog
......@@ -54,9 +53,10 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
创建并显示对话框，对话框响应后同步返回结果。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 对话框选项。 |
......@@ -69,32 +69,28 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
**示例：**
```
export default {
showDialog() {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
{
text: 'button2',
color: '#000000',
}
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.index);
})
.catch(err => {
console.info('showDialog error: ' + err);
})
```js
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
{
text: 'button2',
color: '#000000',
}
}
```
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.index);
})
.catch(err => {
console.info('showDialog error: ' + err);
})
```
## prompt.showDialog
......@@ -102,61 +98,57 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSucc
创建并显示对话框，对话框响应结果异步返回。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 页面显示对话框信息描述。 |
| callback | AsyncCallback&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 是 | 对话框响应结果回调。 |
**示例：**
```
export default {
callback(err, data) {
if(err) {
console.info('showDialog err: ' + err);
return;
}
console.info('showDialog success callback, click button: ' + data.index);
```js
prompt.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
showDialog() {
prompt.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000',
},
{
text: 'button2',
color: '#000000',
}
]
}, this.callback);
{
text: 'button2',
color: '#000000',
}
]
}, (err, data) => {
if (err) {
console.info('showDialog err: ' + err);
return;
}
```
console.info('showDialog success callback, click button: ' + data.index);
});
```
## ShowDialogOptions
对话框的选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ---------------------------------------- |
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------- | ---- | ---------------------------------------- |
| title | string | 否 | 标题文本。 |
| message | string | 否 | 内容文本。 |
| buttons | Array | 否 | 对话框中按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 |
| message | string | 否 | 内容文本。 |
| buttons | Array | 否 | 对话框中按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。 |
## ShowDialogSuccessResponse
对话框的响应结果。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 说明 |
| ----- | ------ | ------------------- |
......@@ -172,6 +164,7 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | --------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
......@@ -179,95 +172,100 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
**示例：**
```
export default {
callback(err, data) {
if(err) {
console.info('showActionMenu err: ' + err);
return;
}
console.info('showActionMenu success callback, click button: ' + data.index);
```js
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
showActionMenu() {
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
]
}, this.callback)
}
{
text: 'item2',
color: '#000000',
},
]
}, (err, data) => {
if (err) {
console.info('showActionMenu err: ' + err);
return;
}
```
console.info('showActionMenu success callback, click button: ' + data.index);
})
```
## prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise\<ActionMenuSuccessResponse>
showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse&gt;
创建并显示操作菜单，菜单响应后同步返回结果。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 |
**示例：**
```
export default {
showActionMenu() {
prompt.showActionMenu({
title: 'showActionMenu Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
]
})
.then(data => {
console.info('showActionMenu success, click button: ' + data.index);
})
.catch(err => {
console.info('showActionMenu error: ' + err);
})
}
}
```
```js
prompt.showActionMenu({
title: 'showActionMenu Title Info',
buttons: [
{
text: 'item1',
color: '#666666',
},
{
text: 'item2',
color: '#000000',
},
]
})
.then(data => {
console.info('showActionMenu success, click button: ' + data.index);
})
.catch(err => {
console.info('showActionMenu error: ' + err);
})
```
## ActionMenuOptions
操作菜单的选项。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ---------------------------------------- |
| title | string | 否 | 标题文本。 |
| buttons | Array | 是 | 菜单中菜单项按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 |
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------------------------------ | ---- | ---------------------------------------- |
| title | string | 否 | 标题文本。 |
| buttons | Array&lt;[Button](#button)&gt; | 是 | 菜单中菜单项按钮的数组，结构为：{text:'button',&nbsp;color:&nbsp;'\#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。 |
## ActionMenuSuccessResponse
操作菜单的响应结果。
**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 必填 | 说明 |
| ----- | ------ | ---- | ------------------------ |
| index | number | 否 | 选中按钮在buttons数组中的索引，从0开始。 |
## Button
菜单中的菜单项按钮。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 必填 | 说明 |
| ----- | ------ | ---- | ------- |
| text | string | 是 | 按钮文本内容。 |
| color | string | 是 | 按钮文本颜色。 |
zh-cn/application-dev/reference/apis/js-apis-settings.md
浏览文件 @ 5919c0fe
# 设置数据项名称
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 本模块首批接口从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
本模块提供设置数据项的访问功能相关接口的说明及示例。
本模块提供访问设置数据项的能力。
> **说明：**
>
> 本模块首批接口从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 导入模块
```typescript
```ts
import settings from '@ohos.settings';
```
## date
提供设置时间和日期格式的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| DATE_FORMAT | string | 是 | 是 | 日期格式。<br/>日期格式包括mm/dd/yyyy、dd/mm/yyyy和yyyy/mm/dd ，其中mm、dd和yyyy分别代表月份、日期和年份。 |
| TIME_FORMAT | string | 是 | 是 | 时间是以12小时格式还是24小时格式显示。<br>值为 “12” 表示12小时格式；<br/>值为 ”24“ 表示24小时格式。 |
| AUTO_GAIN_TIME | string | 是 | 是 | 是否自动从网络获取日期、时间和时区。 <br>值为true表示自动从网络获取信息；<br/>值为false表示不自动获取。 |
| AUTO_GAIN_TIME_ZONE | string | 是 | 是 | 是否自动从NITZ获取时区。 <br>值为true表示自动获取；<br/>值为false表示不自动获取。 |
## display
提供设置显示效果的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| FONT_SCALE | string | 是 | 是 | 字体的比例因子，值为浮点数。 |
| SCREEN_BRIGHTNESS_STATUS | string | 是 | 是 | 屏幕亮度。该值的范围从0到255。 |
| AUTO_SCREEN_BRIGHTNESS | string | 是 | 是 | 是否启用屏幕亮度自动调整。<br/>值为AUTO_SCREEN_BRIGHTNESS_MODE，表示启用自动调整；<br/>值为MANUAL_SCREEN_BRIGHTNESS_MODE，表示不启用自动调整。 |
| AUTO_SCREEN_BRIGHTNESS_MODE | number | 是 | 是 | 使用屏幕亮度自动调整时AUTO_SCREEN_BRIGHTNESS的值。 |
| MANUAL_SCREEN_BRIGHTNESS_MODE | number | 是 | 是 | 使用屏幕亮度手动调整时的AUTO_SCREEN_BRIGHTNESS值。 |
| SCREEN_OFF_TIMEOUT | string | 是 | 是 | 设备在一段时间不活动后进入睡眠状态的等待时间（单位：ms）。 |
| DEFAULT_SCREEN_ROTATION | string | 是 | 是 | 启用屏幕的自动旋转时，此属性无效；不启用自动旋转时，以下值可用：<br>值为0，表示屏幕旋转0度；<br>值为1，表示屏幕旋转90度；<br/>值为2，表示屏幕旋转180度；<br/>值为3，表示屏幕旋转270度。 |
| ANIMATOR_DURATION_SCALE | string | 是 | 是 | 动画持续时间的比例因子。这会影响所有此类动画的开始延迟和持续时间。<br/>值为0，表示动画将立即结束，默认值为1。 |
| TRANSITION_ANIMATION_SCALE | string | 是 | 是 | 过渡动画的比例因子。<br/>值为0，表示禁用过渡动画。 |
| WINDOW_ANIMATION_SCALE | string | 是 | 是 | 普通窗口动画的比例因子。<br/>值为0，表示禁用窗口动画。 |
| DISPLAY_INVERSION_STATUS | string | 是 | 是 | 是否启用显示颜色反转。<br/>值为1，表示启用显示颜色反转；<br/>值为0，表示不启用显示颜色反转。 |
## general
提供设置设备常规信息的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| -------------------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| SETUP_WIZARD_FINISHED | string | 是 | 是 | 是否已运行启动向导。<br>值为0，表示启动向导尚未运行；<br/>值不是0，表示启动向导已运行。 |
| END_BUTTON_ACTION | string | 是 | 是 | 在用户不在呼叫中时，用户按下呼叫结束按钮会发生的情况。<br/>值为0，表示没有任何反应；<br/>值为1，表示显示主屏幕；<br/>值为2，表示设备进入睡眠状态，屏幕锁定；<br/>值为3，表示显示主屏幕。如果用户已在主屏幕上，设备将进入睡眠状态。 |
| ACCELEROMETER_ROTATION_STATUS | string | 是 | 是 | 是否使用加速计更改屏幕方向，即是否启用自动旋转。<br>值为1，表示启用加速度计；<br/>值为0，表示不启用加速计。 |
| AIRPLANE_MODE_STATUS | string | 是 | 是 | 是否启用飞行模式。<br>值为1，表示启用飞行模式；<br/>值为0，表示不启用飞行模式。 |
| DEVICE_PROVISION_STATUS | string | 是 | 是 | 是否预配设备。<br>在具有单个系统用户的多用户设备上，当值为true时，屏幕可能会被锁定。此外，其他功能无法在系统用户上启动，除非它们被标记为在屏幕锁定上显示。 |
| HDC_STATUS | string | 是 | 是 | 是否启用USB设备上的硬盘控制器（HDC）。<br>值为true，表示启用HDC；<br/>值为false，表示不启用HDC。 |
| BOOT_COUNTING | string | 是 | 是 | 设备开机后的启动操作数。 |
| CONTACT_METADATA_SYNC_STATUS | string | 是 | 是 | 是否启用联系人元数据同步。<br>值为true，表示启用同步；<br/>值为false，表示不启用同步。 |
| DEVELOPMENT_SETTINGS_STATUS | string | 是 | 是 | 是否启用开发人员选项。<br>值为true，表示启用开发人员选项；<br/>值为false，表示不启用开发人员选项。 |
| DEVICE_NAME | string | 是 | 是 | 设备名称。 |
| USB_STORAGE_STATUS | string | 是 | 是 | 是否启用USB大容量存储。<br>值为true，表示启用USB大容量存储；<br/>值为false，表示不启用USB大容量存储。 |
| DEBUGGER_WAITING | string | 是 | 是 | 设备在启动应用程序进行调试时是否等待调试器进行调试。<br>值为1，表示设备等待调试器；<br/>值为0，表示系统不会等待调试器，因此应用程序会正常运行。 |
| DEBUG_APP_PACKAGE | string | 是 | 是 | 要调试的应用程序的bundle name。 |
| ACCESSIBILITY_STATUS | string | 是 | 是 | 是否启用辅助功能。<br>值为1，表示启用辅助功能；<br/>值为0，表示不启用辅助功能。 |
| ACTIVATED_ACCESSIBILITY_SERVICES | string | 是 | 是 | 已激活的辅助功能的列表。 |
| GEOLOCATION_ORIGINS_ALLOWED | string | 是 | 是 | 浏览器可以使用的默认地理位置。多个地理位置由空格分隔。 |
| SKIP_USE_HINTS | string | 是 | 是 | 应用程序是否应在首次启动时尝试跳过所有介绍性提示。这适用于临时用户或熟悉环境的用户。<br>值为1，表示应用程序将尝试在第一次启动时跳过所有介绍性提示；<br/>值为0，表示应用程序不会在首次启动时跳过介绍性提示。 |
| TOUCH_EXPLORATION_STATUS | string | 是 | 是 | 是否启用触摸浏览。<br>值为1，表示启用触摸浏览；<br/>值为0，表示不启用触摸浏览。 |
## input
提供设置有关输入法信息的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------------------------ | ------ | ---- | ---- | ------------------------------------------------------------ |
| DEFAULT_INPUT_METHOD | string | 是 | 是 | 默认输入法及其ID。 |
| ACTIVATED_INPUT_METHOD_SUB_MODE | string | 是 | 是 | 默认输入法键盘类型及其ID。 |
| ACTIVATED_INPUT_METHODS | string | 是 | 是 | 已激活的输入法的列表。<br>该列表是一个字符串，由已激活的输入法的ID和输入法键盘类型组成。输入法ID后添加冒号':'连接，输入法的键盘类型后添加分号';'连接。用ima代表输入法ID，keyboardType代表键盘类型，示例格式是ima0:keyboardType0;keyboardType1;ima1:ima2:keyboardTypes0。 |
| SELECTOR_VISIBILITY_FOR_INPUT_METHOD | string | 是 | 是 | 输入法选择器是否可见。<br>值为1，表示输入法选择器可见；<br/>值为0，表示输入法选择器不可见。 |
| AUTO_CAPS_TEXT_INPUT | string | 是 | 是 | 是否为文本编辑器启用自动大写。<br>值为0，表示不启用自动大写；<br/>值为1，表示启用自动大写。 |
| AUTO_PUNCTUATE_TEXT_INPUT | string | 是 | 是 | 是否为文本编辑器启用自动标点符号。自动标点符号使文本编辑器能够将两个空格转换为句点'.'和空格。<br>值为0，表示不启用自动标点符号；<br/>值为1，表示启用自动标点符号。 |
| AUTO_REPLACE_TEXT_INPUT | string | 是 | 是 | 是否为文本编辑器启用自动更正。自动更正使文本编辑器能够更正拼写错误。<br>值为0，表示不启用自动更正；<br/>值为1，表示启用自动更正。 |
| SHOW_PASSWORD_TEXT_INPUT | string | 是 | 是 | 是否在文本编辑器中启用密码显示。密码显示使文本编辑器能够在用户键入密码字符时显示密码字符。<br>值为0，表示不启用密码显示；<br/>值为1，表示启用密码显示。 |
## network
提供设置网络信息的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------------ | ------ | ---- | ---- | ------------------------------------------------------------ |
| DATA_ROAMING_STATUS | string | 是 | 是 | 是否启用数据漫游。<br>值为true，表示启用数据漫游；<br/>值为false，表示不启用数据漫游。 |
| HTTP_PROXY_CFG | string | 是 | 是 | 全局 HTTP 代理的主机名和端口号。主机名和端口号由冒号':'分隔。 |
| NETWORK_PREFERENCE_USAGE | string | 是 | 是 | 要使用的网络的用户首选项。 |
## phone
提供设置来电和去电接听方式的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------ | ------ | ---- | ---- | ------------------------------------------------------------ |
| RTT_CALLING_STATUS | string | 是 | 是 | 是否启用实时文本 (RTT) 呼叫。启用，来电和去电在设备和运营商支持时作为 RTT 呼叫应答。 <br> 值为1，表示启用RTT 呼叫； <br/> 值为0，表示不启用 RTT 呼叫。 |
## sound
提供设置声音效果的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ---------------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| VIBRATE_WHILE_RINGING | string | 是 | 是 | 设备在来电响铃时是否振动。此属性将由电话和设置应用程序使用。 该值是布尔类型，仅影响设备因来电而响铃的情况，不影响任何其他应用程序或场景。 |
| DEFAULT_ALARM_ALERT | string | 是 | 是 | 系统默认告警的存储区域。 |
| DTMF_TONE_TYPE_WHILE_DIALING | string | 是 | 是 | 拨号时播放的双音多频 (DTMF) 音的类型。 <br>值为0表示常规的短音效，<br/>值为1表示长音效。 |
| DTMF_TONE_WHILE_DIALING | string | 是 | 是 | 拨号时是否播放 DTMF 音。<br>值为1，表示播放 DTMF 音；<br/>值为0，表示不播放。 |
| AFFECTED_MODE_RINGER_STREAMS | string | 是 | 是 | 哪些音频流受振铃模式和请勿打扰 (DND) 模式更改的影响。希望特定的音频流受到振铃模式和 DDN 模式变化的影响，请将对应比特位设置为1。 |
| AFFECTED_MUTE_STREAMS | string | 是 | 是 | 受静音模式影响的音频流。希望特定音频流在静音模式下保持静音，请将相应位设置为1。 |
| DEFAULT_NOTIFICATION_SOUND | string | 是 | 是 | 系统默认通知音的存储区域。 |
| DEFAULT_RINGTONE | string | 是 | 是 | 系统默认铃声的存储区域。 |
| SOUND_EFFECTS_STATUS | string | 是 | 是 | 声音功能是否可用。<br>值为0表示不可用； <br/>值为1表示可用 |
| VIBRATE_STATUS | string | 是 | 是 | 设备是否为事件振动。该参数在系统内部使用。 <br>值为1，表示设备会因事件而振动； <br/>值为0，表示设备不因事件振动。 |
| HAPTIC_FEEDBACK_STATUS | string | 是 | 是 | 设备是否启用触觉反馈。<br/>值为true，表示启用触觉反馈；<br/>值为false，表示不启用触觉反馈。 |
## TTS
提供设置文本到语音 (TTS) 转换信息的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| DEFAULT_TTS_PITCH | string | 是 | 是 | 文本转语音 (TTS) 引擎的默认音高。<br>其中100=1x，该值设置为200，表示频率是正常声音频率的两倍。 |
| DEFAULT_TTS_RATE | string | 是 | 是 | TTS 引擎的默认语速。<br>其中100=1x。 |
| DEFAULT_TTS_SYNTH | string | 是 | 是 | 默认TTS引擎。 |
| ENABLED_TTS_PLUGINS | string | 是 | 是 | 用于TTS的已激活插件包列表， 多个插件包以空格分隔。 |
## wireless
提供设置无线网络信息的数据项。
### 属性
**系统能力：** SystemCapability.Applications.settings.Core
| 名称 | 类型 | 可读 | 可写 | 说明 |
| --------------------------------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| BLUETOOTH_DISCOVER_ABILITY_STATUS | string | 是 | 是 | 设备是否可以被其他设备通过蓝牙发现或连接。<br>值为0表示设备不可以被连接或发现；<br/>值为1表示设备可以被连接但不可以被发现；<br/>值为2表示设备可以被连接和发现。 |
| BLUETOOTH_DISCOVER_TIMEOUT | string | 是 | 是 | 可以通过蓝牙发现设备的持续时间（以秒为单位）。<br>这段时间之后，设备不可以被蓝牙搜寻到。 |
| AIRPLANE_MODE_RADIOS | string | 是 | 是 | 启用飞行模式时要禁用的无线电信号列表。 <br>多个无线电信号用逗号 (,) 分隔。取值包括以下常量：BLUETOOTH_RADIO、 CELL_RADIO、 NFC_RADIO、 WIFI_RADIO。 |
| BLUETOOTH_RADIO | string | 是 | 否 | 常量，作为AIRPLANE_MODE_RADIOS的取值时表示蓝牙在飞行模式下禁用。 |
| CELL_RADIO | string | 是 | 否 | 常量，作为AIRPLANE_MODE_RADIOS的取值时表示蜂窝无线电在飞行模式下禁用。 |
| NFC_RADIO | string | 是 | 否 | 常量，作为AIRPLANE_MODE_RADIOS的取值时表示NFC在飞行模式下禁用。 |
| WIFI_RADIO | string | 是 | 否 | 常量，作为AIRPLANE_MODE_RADIOS的取值时表示Wi-Fi在飞行模式下禁用。 |
| BLUETOOTH_STATUS | string | 是 | 是 | 蓝牙是否可用。 <br>值为true表示蓝牙可用；<br/>值为false表示蓝牙不可用。 |
| OWNER_LOCKDOWN_WIFI_CFG | string | 是 | 是 | 是否应锁定由设备所有者的应用程序创建的Wi-Fi配置。<br>值为true表示Wi-Fi配置应该被锁定；<br/>值为false表示不应该被锁定。 |
| WIFI_DHCP_MAX_RETRY_COUNT | string | 是 | 是 | 尝试从DHCP服务器获取 IP 地址的最大次数。 |
| WIFI_TO_MOBILE_DATA_AWAKE_TIMEOUT | string | 是 | 是 | Wi-Fi连接断开后等待移动数据连接建立时保持唤醒锁的最长时间。 |
| WIFI_STATUS | string | 是 | 是 | Wi-Fi是否可用。<br>值为true表示Wi-Fi可用；<br/>值为false表示Wi-Fi不可用。 |
| WIFI_WATCHDOG_STATUS | string | 是 | 是 | Wi-Fi的WatchDog是否可用。 <br>值为true表示可用；<br/>值为false表示不可用。 |
## setting.getURI
getURI(name: string, callback: AsyncCallback\<object>): void
获取数据项的URI。使用callback异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------- | ---- | ------------------------------------------------------------ |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| callback | AsyncCallback\<object> | 是 | 回调函数。获取数据项的URI。 |
**示例**：
```js
settings.getUri(settings.display.SCREEN_BRIGHTNESS_STATUS, (uri) => {
console.log(`callback:uri -> ${JSON.stringify(uri)}`)
})
```
## setting.getURI
getURI(name: string): Promise\<object>
获取数据项的URI。使用Promise异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
**返回值**：
| 类型 | 说明 |
| ---------------- | ------------------------------------ |
| Promise\<object> | Promise对象。返回获取的数据项的URI。 |
**示例**：
```js
settings.getUri(settings.display.SCREEN_BRIGHTNESS_STATUS).then((uri) => {
console.log(`promise:uri -> ${JSON.stringify(uri)}`)
})
```
## setting.getValue
getValue(dataAbilityHelper: DataAbilityHelper, name: string, callback: AsyncCallback\<object>): void
获取数据库中指定数据项的值。使用callback异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br> - 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| callback | AsyncCallback\<object> | 是 | 使用callback方式获取数据项的值。 |
**示例**：
```js
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
settings.getValue(helper, settings.display.SCREEN_BRIGHTNESS_STATUS, (err, value) => {
if (err) {
console.error(`Failed to get the setting. ${err.message} `);
return;
}
console.log(`callback:value -> ${JOSN.stringify(value)}`)
});
```
## setting.getValue
getValue(dataAbilityHelper: DataAbilityHelper, name: string): Promise\<object>
获取数据库中指定数据项的值。使用Promise异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
## settings.getUriSync
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br> - 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
**返回值**：
| 类型 | 说明 |
| ---------------- | ----------------------------------- |
| Promise\<object> | Promise对象。返回获得的数据项的值。 |
**示例**：
```js
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
settings.getValue(helper, settings.display.SCREEN_BRIGHTNESS_STATUS).then((value) => {
console.log(`promise:value -> ${JOSN.stringify(value)}`)
});
```
## settings.setValue
setValue(dataAbilityHelper: DataAbilityHelper, name: string, value: object, callback: AsyncCallback\<boolean>): void
将数据项名称及数据项的值保存到数据库中。使用callback异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| value | object | 是 | 数据项值。取值范围随业务变动。 |
| callback | AsyncCallback\<boolean> | 是 | 回调函数。返回true表示操作成功，否则操作失败。 |
**示例**：
```js
import featureAbility from '@ohos.ability.featureAbility';
//更新数据项亮度的值（该数据项在数据库中已存在，故setValue方法将更新该数据项的值）
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
settings.setValue(helper, settings.display.SCREEN_BRIGHTNESS_STATUS, '100', (status) => {
console.log('Callback return whether value is set.');
});
```
## settings.setValue
setValue(dataAbilityHelper: DataAbilityHelper, name: string, value: object): Promise\<boolean>
将数据项名称及数据项的值保存到数据库中。使用Promise异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| value | object | 是 | 数据项值。取值范围随业务变动。 |
**返回值**：
| 类型 | 说明 |
| ----------------- | -------------------------------------------------- |
| Promise\<boolean> | Promise对象。返回true表示操作成功，否则返回false。 |
**示例**：
```js
import featureAbility from '@ohos.ability.featureAbility';
//更新数据项亮度的值（该数据项在数据库中已存在，故setValue方法将更新该数据项的值）
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
settings.setValue(helper, settings.display.SCREEN_BRIGHTNESS_STATUS, '100').then((status) => {
console.log('Callback return whether value is set.');
});
```
## settings.enableAirplaneMode
enableAirplaneMode(enable: boolean, callback: AsyncCallback\<void>): void
启用或禁用飞行模式。使用callback异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------------------- | ---- | ----------------------------------------------- |
| enable | boolean | 是 | 是否开启飞行模式。true表示开启，false表示禁用。 |
| callback | AsyncCallback\<void> | 是 | 回调函数。 |
**示例**：
```js
isEnabled =true;
enableAirplaneMode(isEnabled, (err) => {
if(err) {
console.log('Failed to enable AirplaneMode.');
return;
}
console.log('Return true if enable.');
})
```
## settings.enableAirplaneMode
enableAirplaneMode(enable: boolean): Promise<void>
启用或禁用飞行模式。使用Promise异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------- | ---- | ----------------------------------------------- |
| enable | boolean | 是 | 是否开启飞行模式。true表示开启，false表示禁用。 |
**返回值**：
| 类型 | 说明 |
| -------------- | ------------------------- |
| Promise\<void> | 无返回结果的Promise对象。 |
**示例**：
```js
isEnabled =true;
enableAirplaneMode(isEnabled).then((err) => {
if(err) {
console.log('Failed to enable AirplaneMode.');
return;
}
console.log('Return true if enable.');
});
```
## settings.canShowFloating
canShowFloating(callback: AsyncCallback\<boolean>): void
检查应用是否能够以悬浮窗形式显示。使用callback异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**参数**：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ----------------------- | ---- | ------------------------------------------------------------ |
| callback | AsyncCallback\<boolean> | 是 | 回调函数。<br/>返回true，表示应用能够以悬浮窗形式显示；返回false，则表示不能。 |
**示例**：
```js
canShowFloating((status) => {
console.log('Checks whether a specified application can show as float window.');
});
```
## settings.canShowFloating
canShowFloating(): Promise\<boolean>
检查应用是否能够以悬浮窗形式显示。使用Promise异步回调。
**系统能力**：SystemCapability.Applications.settings.Core
**返回值**：
| 类型 | 说明 |
| ----------------- | ------------------------------------------------------------ |
| Promise\<boolean> | Promise对象。<br/>返回true，表示应用能够以悬浮窗形式显示；返回false，则表示不能。 |
**示例**：
```js
canShowFloating().then((status) => {
console.log('Checks whether a specified application can show as float window.');
});
```
## settings.getUriSync<sup>8+</sup>
getUriSync(name: string): string
获取数据项的URI。
**系统能力**：SystemCapability.Applications.settings.Core。
**系统能力**：SystemCapability.Applications.settings.Core
- 参数：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br> <ul><li>数据库中已存在的数据项，包括：<br></li> <ul><li>亮度：'settings.screen.brightness' <br> </li> <li> 时间格式：'settings.time.format' <br> </li></ul> <li>开发者自行添加的数据项。</li></ul>|
**参数**：
- 返回值：
| 类型 | 说明 |
| -------- | -------- |
| string | 数据项的URI。 |
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ------------------------------------------------------------ |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
- 示例：
```typescript
// 获取数据项的URI
let urivar = settings.getUriSync('settings.screen.brightness');
```
**返回值**：
| 类型 | 说明 |
| ------ | ------------- |
| string | 数据项的URI。 |
## settings.getValueSync
**示例**：
```js
// 获取数据项的URI
let urivar = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
```
## settings.getValueSync<sup>8+</sup>
getValueSync(dataAbilityHelper: DataAbilityHelper, name: string, defValue: string): string
获取数据项的值。
获取数据项的值。此方法相较getValue为同步方法。
**系统能力**：SystemCapability.Applications.settings.Core
**系统能力**：SystemCapability.Applications.settings.Core。
**参数**：
- 参数：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br> <ul><li>数据库中已存在的数据项，包括：<br></li> <ul><li>亮度：'settings.screen.brightness' <br> </li> <li> 时间格式：'settings.time.format' <br> </li></ul> <li>开发者自行添加的数据项。</li></ul>|
| defValue | string | 是 | 默认值。由开发者设置，当未从数据库中查询到该数据时，则返回该默认值。 |
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| defValue | string | 是 | 默认值。由开发者设置，当未从数据库中查询到该数据时，表示返回该默认值。 |
- 返回值：
| 类型 | 说明 |
| -------- | -------- |
| string | 返回数据项的值。 |
**返回值**：
- 示例：
```typescript
import featureAbility from '@ohos.ability.featureAbility';
| 类型 | 说明 |
| ------ | ---------------- |
| string | 返回数据项的值。 |
//获取数据项亮度的值（该数据项在数据库中已存在）
let brightness = 'settings.screen.brightness';
let uri = settings.getUriSync(brightness);
let helper = featureAbility.acquireDataAbilityHelper(uri);
let value = settings.getValueSync(helper, brightness, '10');
```
**示例**：
```js
import featureAbility from '@ohos.ability.featureAbility';
## settings.setValueSync
//获取数据项亮度的值（该数据项在数据库中已存在）
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
let value = settings.getValueSync(helper, settings.display.SCREEN_BRIGHTNESS_STATUS, '10');
```
## settings.setValueSync<sup>8+</sup>
setValueSync(dataAbilityHelper: DataAbilityHelper, name: string, value: string): boolean
设置数据项的值。
设置数据项的值。此方法相较setValue为同步方法。
如果数据库中已经存在该数据项，则setValueSync方法将更新该数据项的值；如果数据库中尚未存在该数据项，则setValueSync方法将向数据库中插入该数据项。
**需要权限**：ohos.permission.WRITE_SYSTEM_SETTING。
**需要权限**：ohos.permission.MANAGE_SECUER_SETTINGS，仅系统应用可用。
**系统能力**：SystemCapability.Applications.settings.Core。
**系统能力**：SystemCapability.Applications.settings.Core
- 参数：
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br> <ul><li>数据库中已存在的数据项，包括：<br></li> <ul><li>亮度：'settings.screen.brightness' <br> </li> <li> 时间格式：'settings.time.format' <br> </li></ul> <li>开发者自行添加的数据项。</li></ul>|
| value | string | 是 | 数据项的具体数值。 |
**参数**：
- 返回值：
| 类型 | 说明 |
| -------- | -------- |
| boolean | 返回设置数据项的值是否成功的结果。true表示设置成功，false则表示设置失败。 |
| 参数名 | 类型 | 必填 | 说明 |
| ----------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ |
| dataAbilityHelper | [DataAbilityHelper](js-apis-dataAbilityHelper.md) | 是 | 数据管理辅助类。 |
| name | string | 是 | 数据项的名称。数据项名称分为以下两种：<br>- 上述任意一个数据库中已存在的数据项。<br>- 开发者自行添加的数据项。 |
| value | string | 是 | 数据项的具体数值。取值范围随业务变动。 |
- 示例：
```typescript
import featureAbility from '@ohos.ability.featureAbility';
**返回值**：
//更新数据项亮度的值（该数据项在数据库中已存在，故setValueSync方法将更新该数据项的值）
let brightness = 'settings.screen.brightness';
let uri = settings.getUriSync(brightness);
let helper = featureAbility.acquireDataAbilityHelper(uri);
let ret = settings.setValueSync(helper, brightness, '100');
```
| 类型 | 说明 |
| ------- | ------------------------------------------------------------ |
| boolean | 返回设置数据项的值是否成功的结果。true表示设置成功，false表示设置失败。 |
**示例**：
```js
import featureAbility from '@ohos.ability.featureAbility';
//更新数据项亮度的值（该数据项在数据库中已存在，故setValueSync方法将更新该数据项的值）
let uri = settings.getUriSync(settings.display.SCREEN_BRIGHTNESS_STATUS);
let helper = featureAbility.acquireDataAbilityHelper(uri);
let ret = settings.setValueSync(helper, settings.display.SCREEN_BRIGHTNESS_STATUS, '100');
```
zh-cn/application-dev/reference/apis/js-apis-workScheduler.md
浏览文件 @ 5919c0fe
......@@ -276,7 +276,7 @@ isLastWorkTimeOut(workId: number): Promise\<boolean>
```
## WorkInfo
提供工作的具体信息。
提供工作的具体信息。WorkInfo设置参数约束见[延迟任务调度概述](../../task-management/work-scheduler-overview.md)
**系统能力**：以下各项对应的系统能力均为SystemCapability.ResourceSchedule.WorkScheduler
......
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
浏览文件 @ 5919c0fe
# 基于JS扩展的类Web开发范式
# 兼容JS的类Web开发范式
- 组件通用信息
- [通用属性](js-components-common-attributes.md)
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ 5919c0fe
# picker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
......@@ -31,7 +32,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 |
| range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 |
| selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是&nbsp;range&nbsp;的索引值，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置普通选择器的值。 |
......@@ -47,7 +48,7 @@
| selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为&nbsp;YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期选择器的值。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
### 时间选择器
......@@ -59,7 +60,7 @@
| containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为&nbsp;HH:mm；当包含秒时，格式为HH:mm:ss，<br/>该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
### 日期时间选择器
......@@ -70,7 +71,7 @@
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。<br/>-&nbsp;月日时分：MM-DD-HH-mm<br/>-&nbsp;年月日时分：YYYY-MM-DD-HH-mm<br/>不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup>lunar<sup>5+</sup>booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>说明：<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
......@@ -82,7 +83,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。selectedArray[0,0,0,…]否设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。valueArray-否设置多列文本选择器的值，每一列被选中项对应的值构成的数组。使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 |
| value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 |
......@@ -95,7 +96,7 @@
| -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | 否 | 选择器的文本颜色。 |
| font-size | &lt;length&gt; | - | 否 | 选择器的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
......@@ -122,7 +123,7 @@
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;month值范围为：&nbsp;0（1月）~11（12月）。<sup>5+</sup> |
| change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>month值范围为：&nbsp;0（1月）~11（12月）。<sup>5+</sup> |
| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 |
......@@ -171,7 +172,7 @@
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext" "></picker>
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
......
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ 5919c0fe
# div
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
基础容器，用作页面结构的根节点或将内容进行分组。
......@@ -24,24 +24,24 @@
除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下。<br/>-&nbsp;row：水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素，每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>-&nbsp;row：逐行填充元素，如果行空间不够，则新增行；<br/>-&nbsp;column：逐列填充元素，如果列空间不够，则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>-&nbsp;hidden：元素内容超过元素大小时，进行裁切显示；<br/>-&nbsp;scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>> overflow:&nbsp;scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>-&nbsp;stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>-&nbsp;flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>-&nbsp;flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>-&nbsp;center：Flex布局容器内元素在交叉轴居中对齐；<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>-&nbsp;none：滑动到边缘后无效果 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：<br/>-&nbsp;column：垂直方向从上到下。<br/>-&nbsp;row：水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：<br/>-&nbsp;nowrap：不换行，单行显示。<br/>-&nbsp;wrap：换行，多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：<br/>-&nbsp;flex-start：项目位于容器的开头。<br/>-&nbsp;flex-end：项目位于容器的结尾。<br/>-&nbsp;center：项目位于容器的中心。<br/>-&nbsp;space-between：项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around：项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素，每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：<br/>-&nbsp;flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素<br />-inline-flex<sup>9+</sup>：当设置为inline-flex 时，同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。<br/>示例：如设置grid-template-columns为：<br/>-&nbsp;50px&nbsp;100px&nbsp;60px：分三列，第一列50px，第二列100px，第三列60px；<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；<br/>-&nbsp;30%&nbsp;20%&nbsp;50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；<br/>-&nbsp;repeat(2,100px)：分两列，第一列100px，第二列100px；<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：<br/>-&nbsp;row：逐行填充元素，如果行空间不够，则新增行；<br/>-&nbsp;column：逐列填充元素，如果列空间不够，则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible：多个子元素内容超过元素大小时，显示在元素外面；<br/>-&nbsp;hidden：元素内容超过元素大小时，进行裁切显示；<br/>-&nbsp;scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：<br/>-&nbsp;stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；<br/>-&nbsp;flex-start：Flex布局容器内元素向交叉轴起点对齐；<br/>-&nbsp;flex-end：Flex布局容器内元素向交叉轴终点对齐；<br/>-&nbsp;center：Flex布局容器内元素在交叉轴居中对齐；<br/>-&nbsp;baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果，可选值为：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；<br/>-&nbsp;none：滑动到边缘后无效果 |
## 事件
......@@ -50,42 +50,42 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| 名称 | 参数 | 描述 |
| ------------------------ | ---- | ---------------------------------------- |
| reachstart<sup>6+</sup> | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachend<sup>6+</sup> | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction:&nbsp;row时才会触发。 |
| reachtop<sup>6+</sup> | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
| reachbottom<sup>6+</sup> | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction:&nbsp;column时才会触发。 |
## 方法
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 返回值 | 描述 |
| -------- | -------- | -------- | -------- |
| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;需要设置overflow样式为scroll。 |
| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;需要设置overflow样式为scroll。 |
| 名称 | 参数 | 返回值 | 描述 |
| ---------------------------- | ----------- | ------------ | --------------------------------------- |
| getScrollOffset<sup>6+</sup> | - | ScrollOffset | 获取元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 |
| scrollBy<sup>6+</sup> | ScrollParam | - | 指定元素内容的滚动偏移。<br/>需要设置overflow样式为scroll。 |
**表1** ScrollOffset<sup>6+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| x | number | 在x轴方向的偏移，单位为px。 |
| y | number | 在y轴方向的偏移，单位为px。 |
| 名称 | 类型 | 描述 |
| ---- | ------ | --------------- |
| x | number | 在x轴方向的偏移，单位为px。 |
| y | number | 在y轴方向的偏移，单位为px。 |
**表2** ScrollParam<sup>6+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| dx | number | 水平方向滑动的偏移量，单位px。 |
| dy | number | 垂直方向滑动的偏移量，单位px。 |
| smooth | boolean | 是否平滑处理。 |
| 名称 | 类型 | 描述 |
| ------ | ------- | ---------------- |
| dx | number | 水平方向滑动的偏移量，单位px。 |
| dy | number | 垂直方向滑动的偏移量，单位px。 |
| smooth | boolean | 是否平滑处理。 |
## 示例
1. Flex样式
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="flex-box">
......@@ -96,7 +96,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -131,7 +131,7 @@
![zh-cn_image_0000001127285076](figures/zh-cn_image_0000001127285076.png)
2. Flex Wrap样式
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="flex-box">
......@@ -142,7 +142,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -178,8 +178,8 @@
![zh-cn_image_0000001213396721](figures/zh-cn_image_0000001213396721.png)
3. Grid样式
```
```html
<!-- xxx.hml -->
<div class="common grid-parent">
<div class="grid-child grid-left-top"></div>
......@@ -188,8 +188,8 @@
<div class="grid-child grid-right-bottom"></div>
</div>
```
```
```css
/* xxx.css */
.common {
width: 400px;
......@@ -244,7 +244,7 @@
![zh-cn_image_0000001213276619](figures/zh-cn_image_0000001213276619.png)
4. 拖拽<sup>7+</sup>
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top:{{top}};">
......@@ -252,7 +252,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -264,7 +264,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -291,7 +291,7 @@
![zh-cn_image_0000001213284927](figures/zh-cn_image_0000001213284927.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div>
......@@ -301,7 +301,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -317,7 +317,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -355,7 +355,7 @@
![zh-cn_image_0000001168005276](figures/zh-cn_image_0000001168005276.gif)
5. 手指捏合<sup>7+</sup>
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content "onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
......@@ -364,7 +364,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -380,7 +380,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md
浏览文件 @ 5919c0fe
# circle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
圆形形状。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -30,7 +30,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
浏览文件 @ 5919c0fe
# 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -14,7 +14,7 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length]，短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel：使用斜角连接路径段；<br/>miter：使用尖角连接路径段；<br/>round：使用圆角连接路径段。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线度。<br/>square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt：不在路径两端扩展；<br/>round：在路径的末端延伸半个圆，直径等于线宽；<br/>square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 |
| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md
浏览文件 @ 5919c0fe
# ellipse
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
椭圆形状。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -31,7 +31,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md
浏览文件 @ 5919c0fe
# line
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制线条。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -31,15 +31,18 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round：在路径的末端延伸半个圆，直径等于线宽
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt：不在路径两端扩展
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg>
</div>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md
浏览文件 @ 5919c0fe
# path
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制路径。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性，设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md
浏览文件 @ 5919c0fe
# polygon
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制多边形。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md
浏览文件 @ 5919c0fe
# polyline
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
绘制折线。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -28,7 +28,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" stroke="blue" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md
浏览文件 @ 5919c0fe
# rect
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
用于绘制矩形、圆角矩形。
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform。
支持[animate](js-components-svg-animate.md)、[animateMotion](js-components-svg-animatemotion.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -33,7 +33,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md
浏览文件 @ 5919c0fe
......@@ -19,7 +19,7 @@
## 子组件
支持tspan、textpath、animate、animateTransform。
支持[tspan](js-components-svg-tspan.md)、[textpath](js-components-svg-textpath.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animatetransform.md)。
## 属性
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md
浏览文件 @ 5919c0fe
......@@ -3,12 +3,12 @@
沿路径绘制文本。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 按指定的路径绘制文本，可嵌套子标签tspan分段。
>
> - 只支持被父元素标签text嵌套。
## 权限列表
......@@ -17,7 +17,7 @@
## 子组件
tspan。
[tspan](js-components-svg-tspan.md)。
## 属性
......@@ -26,37 +26,26 @@ tspan。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| path | string | 0 | 是 | 设置路径的形状。<br/>字母指令表示的意义如下：<br/>-&nbsp;M&nbsp;=&nbsp;moveto<br/>-&nbsp;L&nbsp;=&nbsp;lineto<br/>-&nbsp;H&nbsp;=&nbsp;horizontal&nbsp;lineto<br/>-&nbsp;V&nbsp;=&nbsp;vertical&nbsp;lineto<br/>-&nbsp;C&nbsp;=&nbsp;curveto<br/>-&nbsp;S&nbsp;=&nbsp;smooth&nbsp;curveto<br/>-&nbsp;Q&nbsp;=&nbsp;quadratic&nbsp;Belzier&nbsp;curve<br/>-&nbsp;T&nbsp;=&nbsp;smooth&nbsp;quadratic&nbsp;Belzier&nbsp;curveto<br/>-&nbsp;A&nbsp;=&nbsp;elliptical&nbsp;Arc<br/>-&nbsp;Z&nbsp;=&nbsp;closepath |
| startOffset | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本沿path绘制的起始偏移。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色 |
| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色 |
| stroke-width | number | 1px | 否 | 字体边框宽度 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 |
## 示例
textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素&lt;path&gt;曲线仅做参照）
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
}
```
![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png)
textpath与tspan组合示例与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图
![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="50">
......@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图
startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。
```
```css
/* xxx.css */
.container {
flex-direction: row;
......@@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图
textpath与tspan组合属性动画与效果图
```
```html
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00">
......
zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md
浏览文件 @ 5919c0fe
......@@ -3,12 +3,12 @@
添加文本样式。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。
>
> - 文本分段，只支持被父元素标签svg嵌套。
## 权限列表
......@@ -17,43 +17,31 @@
## 子组件
支持tspan。
支持[tspan](js-components-svg-tspan.md)。
支持以下表格中的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 |
| x | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角x轴坐标。 |
| y | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 |
| dx | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本x轴偏移。 |
| dy | &lt;length&gt;\|&lt;percentage&gt; | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 |
| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| fill | &lt;color&gt; | black | 否 | 字体填充颜色。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 |
| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 |
| stroke | &lt;color&gt; | black | 否 | 绘制字体边框并指定颜色。 |
| stroke-width | number | 1px | 否 | 字体边框宽度。 |
| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 |
## 示例
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
```
```
```html
<!-- xxx.hml -->
<div class="container">
<svg >
......@@ -73,22 +61,22 @@
</div>
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```
```css
/* xxx.css */
.container {
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
height: 1000px;
width: 1080px;
}
```
```
![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png)
属性动画示例
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -111,9 +99,20 @@
</div>
```
```css
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 3000px;
width: 1080px;
}
```
![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -130,7 +129,7 @@
![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......@@ -146,7 +145,7 @@
![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif)
```
```html
<!-- xxx.hml -->
<div class="container">
<svg>
......
zh-cn/application-dev/reference/arkui-js/js-components-svg.md
浏览文件 @ 5919c0fe
......@@ -3,7 +3,7 @@
基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。
......@@ -15,7 +15,7 @@
## 子组件
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。
支持[svg](js-components-svg.md)、[rect](js-components-svg-rect.md)、[circle](js-components-svg-circle.md)、[ellipse](../arkui-js/js-components-svg-ellipse.md)、[path](js-components-svg-path.md)、[line](../arkui-js/js-components-svg-line.md)、[polygon](../arkui-js/js-components-svg-polygon.md)、[polyline](js-components-svg-polyline.md)、[text](js-components-svg-text.md)、[animate](js-components-svg-animate.md)、[animateTransform](js-components-svg-animateTransform.md)。
## 属性
......@@ -34,7 +34,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400">
......
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ 5919c0fe
# 基于TS扩展的声明式开发范式
# 基于eTS的声明式开发范式
- 组件通用信息
- 通用事件
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
浏览文件 @ 5919c0fe
......@@ -6,25 +6,21 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
## 接口
CheckboxGroup( option?: {group?: string} )
CheckboxGroup( options?: {group?: string} )
创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----- |
| group | string | 否 | - | 群组名称。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------- |
| group | string | 否 | 群组名称。 |
## 属性
......@@ -50,7 +46,7 @@ CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化
| 名称 | 参数类型 | 描述 |
| ------ | ------------------- | -------------- |
| name | Array&lt;string&gt; | checkBox名称。 |
| status | selectStatus | 选中状态。 |
| status | SelectStatus | 选中状态。 |
## SelectStatus枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 5919c0fe
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -20,21 +16,21 @@ Gauge(options:{value: number, min?: number, max?: number})
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | --------- |
| value | number | 是 | - | 当前数据值。 |
| min | number | 否 | 0 | 当前数据段最小值。 |
| max | number | 否 | 100 | 当前数据段最大值。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 当前数据值。 |
| min | number | 否 | 当前数据段最小值。<br/>默认值：0 |
| max | number | 否 | 当前数据段最大值。<br/>默认值：100 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | --------------------------- |
| value | number | 0 | 设置当前数据图表的值。 |
| startAngle | number | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
| endAngle | number | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
| colors | Array&lt;ColorStop&gt; | - | 设置图表的颜色，支持分段颜色设置。 |
| strokeWidth | [Length](ts-types.md#length) | - | 设置环形图表的环形厚度。 |
| 名称 | 参数类型 | 描述 |
| ----------- | ---------------------------------------- | --------------------------- |
| value | number | 设置当前数据图表的值。<br/>默认值：0 |
| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：-150 |
| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：150 |
| colors | Array&lt;ColorStop&gt; | 设置图表的颜色，支持分段颜色设置。 |
| strokeWidth | [Length](ts-types.md#length) | 设置环形图表的环形厚度。 |
## ColorStop
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 5919c0fe
......@@ -6,21 +6,9 @@
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 需要权限
## 权限说明
使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。
## 子组件
......@@ -33,25 +21,25 @@ Image(src: string | PixelMap | Resource)
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------- | ------------------------------------------------------- | -------- | ------------------------------------------------------------ |
| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置图片的缩放类型。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | ImageRenderMode | Original | 设置图片渲染的模式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 |
| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 |
| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 |
## ImageInterpolation枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@ Navigation组件一般作为Page页面的根容器，通过属性设置来展示
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
可以包含子组件。
......@@ -26,32 +21,32 @@ Navigation()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 页面标题。 |
| subtitle | string | - | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | false | 设置隐藏/显示工具栏：<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | false | 隐藏标题栏。 |
| hideBackButton | boolean | false | 隐藏返回键。 |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面标题。 |
| subtitle | string | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 设置隐藏/显示工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false |
## NavigationMenuItem类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 菜单栏单个选项的显示文本。 |
| icon | string | 否 | 菜单栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## Object类型说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ----------------------- | ---- | ---- | --------------- |
| value | string | 是 | - | 工具栏单个选项的显示文本。 |
| icon | string | 否 | - | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 |
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | ------------------------------ |
| value | string | 是 | 工具栏单个选项的显示文本。 |
| icon | string | 否 | 工具栏单个选项的图标资源路径。 |
| action | ()&nbsp;=&gt;&nbsp;void | 否 | 当前选项被选中的事件回调。 |
## NavigationTitleMode枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -25,12 +20,12 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------------------------- | ------------- | ---- | -------------------- | --------------------------------------------------- |
| value | number | 是 | - | 指定当前进度值。 |
| total | number | 否 | 100 | 指定进度总长。 |
| type<sup>8+</sup> | ProgressType | 否 | ProgressType.Linear | 指定进度条类型。 |
| style<sup>deprecated</sup> | ProgressStyle | 否 | ProgressStyle.Linear | 指定进度条样式。<br/>该参数从API Version8开始废弃。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------------------------- | ------------- | ---- | ------------------------------------------------------------ |
| value | number | 是 | 指定当前进度值。 |
| total | number | 否 | 指定进度总长。<br/>默认值：100 |
| type<sup>8+</sup> | ProgressType | 否 | 指定进度条类型。<br/>默认值：ProgressType.Linear |
| style<sup>deprecated</sup> | ProgressStyle | 否 | 指定进度条类型。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
## ProgressType枚举说明
......@@ -54,11 +49,11 @@ Progress(options: {value: number, total?: number, style?: ProgressStyle, type?:
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| value | number | - | 设置当前进度值。 |
| color | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | - | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
| 名称 | 参数类型 | 描述 |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| value | number | 设置当前进度值。 |
| color | [ResourceColor](ts-types.md#resourcecolor8) | 设置进度条前景色。 |
| style<sup>8+</sup> | {<br/>strokeWidth?:&nbsp;[Length](ts-types.md#length),<br/>scaleCount?:&nbsp;number,<br/>scaleWidth?:&nbsp;[Length](ts-types.md#length)<br/>} | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,23 +18,23 @@ Radio(options: {value: string, group: string})
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------------------------- |
| value | string | 是 | - | 当前单选框的值。 |
| group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| value | string | 是 | 当前单选框的值。 |
| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------- | ----- | ----------- |
| checked | boolean | false | 设置单选框的选中状态。 |
| 名称 | 参数类型 | 描述 |
| ------- | -------- | ---------------------------------------- |
| checked | boolean | 设置单选框的选中状态。<br/>默认值：false |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> -isChecked为true时，代表选中。<br> -isChecked为false时，代表未选中。 |
| 名称 | 功能描述 |
| ------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。<br> - isChecked为true时，代表选中。<br> - isChecked为false时，代表未选中。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 5919c0fe
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -20,21 +16,21 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | 否 | - | 搜索文本值。 |
| placeholder | string | 否 | - | 无输入时的提示文本。 |
| icon | string | 否 | - | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | - | 控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------- | ---------------- | ---- | ------------------------------------------------------------ |
| value | string | 否 | 搜索文本值。 |
| placeholder | string | 否 | 无输入时的提示文本。 |
| icon | string | 否 | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
| controller | SearchController | 否 | 控制器。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | ------------------------------------------- | ------ | ------------------------------------------ |
| searchButton | string | 无 | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md#font) | - | 设置搜索框内文本样式。 |
| 名称 | 参数类型 | 描述 |
| ---------------- | ------------------------------------------- | ------------------------------------------ |
| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 |
| textFont | [Font](ts-types.md#font) | 设置搜索框内文本样式。 |
## 事件
......@@ -62,9 +58,9 @@ caretPosition(value: number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ----------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 从字符串开始到光标所在位置的长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -19,23 +14,23 @@
## 接口
Span(content: string | Resource)
Span(value: string | Resource)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ------ | ---------- |
| content | string\|[Resource](ts-types.md#resource) | 是 | - | 文本内容。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ---------------------------------------------------- | ---- | ---------- |
| value | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 文本内容。 |
## 属性
通用属性方法仅支持通用文本样式，不支持触摸热区设置。
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---------------------------------------- | -------------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| letterSpacing | number \| string | - | 设置文本字符间距。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal | 设置文本大小写。 |
| 名称 | 参数类型 | 描述 |
| ---------- | ---------------------------------------- | -------------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
| letterSpacing | number \| string | 设置文本字符间距。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase枚举说明) | 设置文本大小写。<br/>默认值：Normal |
## 事件
......@@ -43,6 +38,7 @@ Span(content: string | Resource)
通用事件仅支持点击事件。
> **说明：**
>
> 由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
可以包含[Span](ts-basic-components-span.md)子组件。
......@@ -23,24 +18,24 @@ Text(content?: string | Resource)
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| content | string \| [Resource](ts-types.md#resource) | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ------------------------------------------ | ---- | ------------------------------------------------------------ |
| content | string \| [Resource](ts-types.md#resource) | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。<br/>默认值：' ' |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | TextAlign.Start | 设置多行文本的文本对齐方式。 |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | {overflow:&nbsp;TextOverflow.Clip} | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | Infinity | 设置文本的最大行数。 |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | {<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
| baselineOffset | number \| string | - | 设置文本基线的偏移量。 |
| letterSpacing | number \| string | - | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | - | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | 设置文本大小写。 |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值：TextAlign.Start |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
| maxLines | number | 设置文本的最大行数。<br/>默认值：Infinity |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
| baselineOffset | number \| string | 设置文本基线的偏移量。 |
| letterSpacing | number \| string | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本最小显示字号。 |
| maxFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本最大显示字号。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal |
> **说明：**
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,32 +18,32 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | - | 设置TextArea控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | -------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否 | 设置TextArea控制器。 |
## 属性
除支持通用属性外，还支持以下属性：
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效，例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Start | 设置文本水平对齐方式。 |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | - | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
| 名称 | 参数类型 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder文本颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效，例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐方式。<br/>默认值：TextAlign.Start |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。 |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>value：复制的文本内容。 |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>value：剪切的文本内容。 |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>value：粘贴的文本内容。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。 |
| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>- value：复制的文本内容。 |
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>- value：剪切的文本内容。 |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>- value：粘贴的文本内容。 |
## TextAreaController<sup>8+</sup>
......@@ -69,9 +64,9 @@ caretPosition(value: number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ------------------- |
| value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | -------------------------------------- |
| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 5919c0fe
......@@ -27,9 +27,9 @@ TextClock(options?: {timeZoneOffset?: number, controller?: TextClockController})
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ------ | -------- | ---------------------------------------- |
| format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：<ul><li>yyyy（年份）</li><li>mm（英文月份简写）</li><li>mmm（英文月份简写）</li><li>mmmm（英文月份全称）</li><li>dd（英文星期简写）</li><li>ddd（英文星期简写）</li><li>dddd（英文星期全称）</li><li>HH（24小时制）</li><li>hh（12小时制）</li><li>MM/mm（分钟）</li><li>SS/ss（秒）</li></ul> |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | -------- | ------ | ------------------------------------------------------------ |
| format | string | 'hms' | 设置显示时间格式。<br/>日期间隔符固定为"/"，时间间隔符为":"。<br/>如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd，<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可，如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串：<br/>- YYYY/yyyy：完整年份。<br/>- YY/yy：年份后两位。<br/>- M：月份(若想使用01月则使用MM)。<br/>- d：日期(若想使用01日则使用dd)。<br/>- D：年中日(一年中的第几天)。<br/>- H：24小时制。<br/>- h：12小时制。<br/>- m：分钟。<br/>- s：秒。<br/>- SSS：毫秒。 |
## 事件
......@@ -39,7 +39,7 @@ TextClock(options?: {timeZoneOffset?: number, controller?: TextClockController})
## TextClockController
TextClock容器组件的控制器，可以将此对象绑定至TextClock组件，然后通过它控制文本时钟状态的启动与停止。
TextClock容器组件的控制器，可以将此对象绑定到TextClock组件，再通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。
### 导入对象
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -23,25 +18,25 @@ TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?:
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | - | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | - | 设置TextInput控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | --------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 |
## 属性
除支持通用属性外，还支持以下属性：
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------------- | ------------------------------------------------------------ | ----------------- | ------------------------------------------------------------ |
| type | InputType | InputType.Normal | 设置输入框类型。 |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | - | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | EnterKeyType.Done | 设置输入法回车键类型。 |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置输入框光标颜色。 |
| maxLength | number | - | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
| 名称 | 参数类型 | 描述 |
| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| type | InputType | 设置输入框类型。<br/>默认值：InputType.Normal |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：<br/>-&nbsp;size:&nbsp;设置文本尺寸，Length为number类型时，使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值：EnterKeyType.Done |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
## EnterKeyType枚举说明
......@@ -90,9 +85,9 @@ caretPosition(value:&nbsp;number): void
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | number | 是 | - | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| value | number | 是 | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
无
......@@ -25,24 +20,24 @@ TextPicker(options?: {range: string[] | [Resource](ts-types.md#resource), select
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ----- | --------------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 0 | 选中项在数组中的index值。 |
| value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | --------------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | 选择器的数据选择范围。 |
| selected | number | 否 | 选中项在数组中的index值。<br/>默认值：0 |
| value | string | 否 | 选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ---------------- | ------ | -------------------------- |
| defaultPickerItemHeight | number \| string | - | 默认Picker内容项元素高度。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | ---------------- | -------------------------- |
| defaultPickerItemHeight | number \| string | 默认Picker内容项元素高度。 |
## 事件
| 名称 | 描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 |
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的索引值。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
浏览文件 @ 5919c0fe
......@@ -45,7 +45,7 @@ TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTi
## TextTimerController
TextTimer组件的控制器，用于控制文本计时器。
TextTimer组件的控制器，用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。
### 导入对象
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 5919c0fe
......@@ -21,7 +21,7 @@
TimePicker(options?: {selected?: Date})
默认以00：00至23：59的时间区间创建滑动选择器。
默认以00: 00至23: 59的时间区间创建滑动选择器。
**参数：**
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
浏览文件 @ 5919c0fe
......@@ -49,7 +49,7 @@ onDestroy(event: () => void )
## XComponentController
xcomponent 组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器带调用组件方法。
xcomponent 组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。
### 创建对象
......@@ -59,7 +59,7 @@ xcomponentController: XComponentController = new XComponentController()
### getXComponentSurfaceId
getXComponentSurfaceId(): string
getXComponentSurfaceId()
获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
......@@ -71,9 +71,10 @@ getXComponentSurfaceId(): string
| ------ | ----------------------- |
| string | XComponent持有Surface的ID。 |
### setXComponentSurfaceSize
setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void
setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number})
设置XComponent持有Surface的宽度和高度。
......@@ -86,9 +87,10 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
| surfaceWidth | number | 是 | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | XComponent持有Surface的高度。 |
### getXComponentContext
getXComponentContext(): Object
getXComponentContext()
获取XComponent实例对象的context。
......@@ -98,6 +100,7 @@ getXComponentContext(): Object
| ------ | ---------------------------------------- |
| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
## 示例
提供surface类型XComponent，支持相机预览等能力。
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 5919c0fe
# LongPressGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 接口
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number })
**参数：**
......@@ -19,17 +18,12 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------------ |
| onAction((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | --------------------------------------------------- |
| onAction(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功回调。 |
| onActionEnd(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与LongPress手势相关的属性
| 属性名称 | 属性类型 | 描述 |
| ------ | ------- | ------------ |
| repeat | boolean | 事件是否为重复触发事件。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 5919c0fe
# PanGesture
用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------------ | ---- | ------ | ------------------------------------------------------------ |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指，&nbsp;最大取值为10指。 |
| direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。 |
| distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------ | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
| direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All |
| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
## PanDirection枚举说明
| 名称 | 描述 |
| ---------- | ---------- |
| All | 所有方向可滑动。 |
| Horizontal | 水平方向可滑动。 |
| Vertical | 竖直方向可滑动。 |
| Left | 向左滑动。 |
| Right | 向右滑动。 |
| Up | 向上滑动。 |
| Down | 向下滑动。 |
| None | 任何方向都不可滑动。 |
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| Left | 向左拖动。 |
| Right | 向右拖动。 |
| Up | 向上拖动。 |
| Down | 向下拖动。 |
| None | 任何方向都不可触发拖动手势事件。 |
## PanGestureOptions
......@@ -43,31 +40,26 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
**参数：**
同PanGesture参数说明。
同PanGesture参数说明。
**接口：**
| 名称 | 功能描述 |
| -------------------------------------- | -------------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
| 名称 | 功能描述 |
| -------- | -------- |
| setDirection(value:&nbsp;PanDirection) | 设置direction属性。 |
| setDistance(value:&nbsp;number) | 设置distance属性。 |
| setFingers(value:&nbsp;number) | 设置fingers属性。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------------------ |
| onActionStart(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 |
| onActionUpdate(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 |
| onActionEnd(callback:&nbsp;(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 |
| onActionCancel(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
## 事件
## GestureEvent对象中与Pan手势相关的属性
| 名称 | 功能描述 |
| -------- | -------- |
| onActionStart(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势识别成功回调。 |
| onActionUpdate(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势移动过程中回调。 |
| onActionEnd(event:&nbsp;(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ------- | ------ | -------------- |
| offsetX | number | 手势事件偏移量，单位为vp。 |
| offsetY | number | 手势事件偏移量，单位为vp。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 5919c0fe
# PinchGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
PinchGesture(options?: { fingers?: number, distance?: number })
PinchGesture(value?: { fingers?: number, distance?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。 |
| distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发捏合的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| distance | number | 否 | 最小识别距离，单位为vp。<br/>默认值：3.0 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | -------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与Pinch手势相关的属性
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ----------------------------------------------- |
| onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功回调。 |
| onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势移动过程中回调。 |
| onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ------------ | ------ | -------------------------- |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 5919c0fe
# RotationGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
RotationGesture(options?: { fingers?: number, angle?: number })
RotationGesture(value?: { fingers?: number, angle?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ----------------------------- |
| fingers | number | 否 | 2 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。 |
| angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发旋转的最少手指数,&nbsp;最小为2指，最大为5指。<br/>默认值：2 |
| angle | number | 否 | 触发旋转手势的最小改变度数，单位为度数。<br/>默认值：1.0 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------------------------- |
| onActionStart((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 |
| onActionUpdate((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 |
| onActionEnd((event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
## GestureEvent对象中与Rotation手势相关的属性
| 名称 | 功能描述 |
| ------------------------------------------------------------ | -------------------------------------------------- |
| onActionStart(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功回调。 |
| onActionUpdate(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势移动过程中回调。 |
| onActionEnd(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，手指抬起后触发回调。 |
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
| 属性名称 | 属性类型 | 描述 |
| ----- | ------ | ----- |
| angle | number | 旋转角度。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 5919c0fe
# SwipeGesture
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | -------------- | ---- | ------------------ | ----------------------------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 |
## SwipeDirection枚举说明
| 名称 | 描述 |
| ---------- | ----- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| 名称 | 描述 |
| -------- | -------- |
| All | 所有方向。 |
| Horizontal | 水平方向。 |
| Vertical | 竖直方向。 |
| None | 任何方向均不可触发。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------- |
| onAction(callback:(event?:&nbsp;GestureEvent)&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
## 事件
## GestureEvent对象中与Swipe手势相关的属性
| 名称 | 功能描述 |
| -------- | -------- |
| onAction(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | 滑动手势识别成功回调。 |
| 参数名 | 类型 | 说明 |
| ----- | ------ | ---------------------------------------- |
| angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 |
![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
## 示例
......@@ -64,7 +54,7 @@ struct SwipeGestureExample {
.width(260).height(260)
.rotate({x: 0, y: 0, z: 1, angle: this.rotateAngle})
.gesture(
SwipeGesture({fingers: 1, direction:SwipeDirection.Vertical})
SwipeGesture({fingers: 1, direction: SwipeDirection.Vertical})
.onAction((event: GestureEvent) => {
this.speed = event.speed
this.rotateAngle = event.angle
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 5919c0fe
# TapGesture
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 接口
TapGesture(options?: { count?: number, fingers?: number })
TapGesture(value?: { count?: number, fingers?: number })
**参数：**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ------ | ---- | ---- | ---------------------------------------- |
| count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| count | number | 否 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
| fingers | number | 否 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>默认值：1<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ------------ |
| onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | --------------------- |
| onAction(event: (event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 5919c0fe
# CanvasRenderingContext2D对象
> **说明：**
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
......@@ -12,7 +12,7 @@
CanvasRenderingContext2D(setting: RenderingContextSetting)
**参数：**
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
......@@ -21,42 +21,41 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
### RenderingContextSettings
RenderingContextSettings(antialias?: bool)
RenderingContextSettings(antialias?: boolean)
用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---- | ---- | ----- | ---------------- |
| antialias | bool | 否 | false | 表明canvas是否开启抗锯齿。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ----- | ---------------- |
| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 |
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
> **说明：**
>
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
| 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值：'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>默认值：'source-over'。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
### fillStyle
......@@ -427,6 +426,7 @@ struct LineDashOffset {
.onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0;
this.context.stroke();
})
}
......@@ -597,6 +597,7 @@ struct ShadowOffsetX {
struct ShadowOffsetY {
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)
......@@ -660,7 +661,8 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
......@@ -668,8 +670,10 @@ fillRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct FillRect {
......@@ -701,21 +705,25 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct StrokeRect {
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)
......@@ -741,21 +749,25 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ClearRect {
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)
......@@ -779,24 +791,26 @@ clearRect(x: number, y: number, w: number, h: number): void
### fillText
fillText(text: string, x: number, y: number): void
fillText(text: string, x: number, y: number, maxWidth?: number): void
绘制填充类文本。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| text | string | 是 | "" | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
**示例：**
**示例：**
```
```ts
// xxx.ets
@Entry
@Component
struct FillText {
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)
......@@ -819,24 +833,29 @@ fillText(text: string, x: number, y: number): void
### strokeText
strokeText(text: string, x: number, y: number): void
strokeText(text: string, x: number, y: number, maxWidth?:number): void
绘制描边类文本。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct StrokeText {
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)
......@@ -863,28 +882,49 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
**返回值：**
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
**TextMetrics类型描述:**
| 属性 | 类型 | 描述 |
| ------------------------ | ------ | ---------------------------------------- |
| width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。 |
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。 |
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。 |
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。 |
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。 |
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。 |
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。 |
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。 |
- TextMetrics类型描述
| 属性 | 类型 | 描述 |
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct MeasureText {
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)
......@@ -912,19 +952,22 @@ stroke(path?: Path2D): void
进行边框绘制操作。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Stroke {
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)
......@@ -953,14 +996,16 @@ beginPath(): void
创建一个新的绘制路径。
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct BeginPath {
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)
......@@ -991,20 +1036,23 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct MoveTo {
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)
......@@ -1033,20 +1081,23 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct LineTo {
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)
......@@ -1075,14 +1126,16 @@ closePath(): void
结束当前路径形成一个封闭路径。
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ClosePath {
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)
......@@ -1109,25 +1162,34 @@ closePath(): void
### createPattern
createPattern(image: ImageBitmap, repetition: string): void
createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null
通过指定图像和重复方式创建图片填充的模板。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**示例：**
```
**返回值：**：
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -1155,7 +1217,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
......@@ -1165,14 +1228,16 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
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)
......@@ -1201,7 +1266,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
......@@ -1209,13 +1275,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
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)
......@@ -1240,28 +1309,31 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
### arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Arc {
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)
......@@ -1289,7 +1361,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
......@@ -1298,14 +1371,16 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ArcTo {
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)
......@@ -1329,31 +1404,33 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
### ellipse
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
在规定的矩形区域绘制一个椭圆。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**参数：**
**示例：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
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)
......@@ -1377,26 +1454,29 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
### rect
rect(x: number, y: number, width: number, height: number): void
rect(x: number, y: number, w: number, h: number): void
创建矩形路径。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
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)
......@@ -1419,12 +1499,21 @@ rect(x: number, y: number, width: number, height: number): void
### fill
fill(): void
fill(fillRule?: CanvasFillRule): void
对封闭路径进行填充。
**示例：**
```
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。 |
**示例:**
```ts
// xxx.ets
@Entry
@Component
struct Fill {
......@@ -1451,14 +1540,73 @@ fill(): void
![zh-cn_image_0000001238952381](figures/zh-cn_image_0000001238952381.png)
fill(path: Path2D, fillRule?: CanvasFillRule): void
对封闭路径进行填充。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | 是 | | Path2D填充路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为："nonzero", "evenodd"。 |
**示例:**
```ts
// xxx.ets
@Entry
@Component
struct Fill {
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 region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();
// Fill path
this.context.fillStyle = 'green';
this.context.fill(region, "evenodd");
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png)
### clip
clip(): void
clip(fillRule?: CanvasFillRule): void
设置当前路径为剪切路径。
**示例：**
```
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 |
**示例:**
```ts
// xxx.ets
@Entry
@Component
struct Clip {
......@@ -1488,25 +1636,75 @@ clip(): void
![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png)
clip(path: Path2D, fillRule?: CanvasFillRule): void
对封闭路径进行填充。该接口为空接口。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | 是 | - | Path2D剪切路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 |
### filter
filter(filter: string): void
为Canvas图形设置各类滤镜效果。该接口为空接口。
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| filter | string | 是 | - | 接受各类滤镜效果的函数。 |
### getTransform
getTransform(): Matrix2D
获取当前被应用到上下文的转换矩阵。该接口为空接口。
### resetTransform
resetTransform(): void
使用单位矩阵重新设置当前变形。该接口为空接口。
### direction
direction(direction: CanvasDirection): void
绘制文本时，描述当前文本方向的属性。该接口为空接口。
### rotate
rotate(rotate: number): void
rotate(angle: number): void
针对当前坐标轴进行顺时针旋转。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Rotate {
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)
......@@ -1533,20 +1731,23 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Scale {
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)
......@@ -1570,35 +1771,38 @@ scale(x: number, y: number): void
### transform
transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
transform(a: number, b: number, c: number, d: number, e: number, f: number): void
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> - x' = scaleX \* x + skewY \* y + translateX
> - x' = scaleX \* x + skewY \* y + translateX
>
> - y' = skewX \* x + scaleY \* y + translateY
> - y' = skewX \* x + scaleY \* y + translateY
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------------- |
| a | number | 是 | 0 | scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 | skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 | translateX: 指定水平移动值。 |
| f | number | 是 | 0 | translateY: 指定垂直移动值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Transform {
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)
......@@ -1627,28 +1831,31 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
### setTransform
setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
**参数：**
**示例：**
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------------- |
| a | number | 是 | 0 | scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 | skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 | translateX: 指定水平移动值。 |
| f | number | 是 | 0 | translateY: 指定垂直移动值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct SetTransform {
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)
......@@ -1672,26 +1879,34 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png)
setTransform(transform?: Matrix2D): void
以Matrix2D对象为模板重置现有的变换矩阵并创建新的变换矩阵。该接口为空接口。
### translate
translate(x: number, y: number): void
移动当前坐标系的原点。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Translate {
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)
......@@ -1717,34 +1932,38 @@ translate(x: number, y: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void
进行图像绘制。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ImageExample {
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)
......@@ -1766,34 +1985,45 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
### createImageData
createImageData(width: number, height: number): Object
createImageData(sw: number, sh: number): ImageData
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 |
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 |
### createImageData
createImageData(imageData: Object): Object
createImageData(imageData: ImageData): ImageData
创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ------ | ---- | ---- | ----------------- |
| imagedata | Object | 是 | null | 复制现有的ImageData对象。 |
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ----------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 复制现有的ImageData对象。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### getPixelMap
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
......@@ -1801,12 +2031,20 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 |
### getImageData
getImageData(sx: number, sy: number, sw: number, sh: number): Object
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
......@@ -1814,31 +2052,190 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### putImageData
putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
putImageData(imageData: ImageData, dx: number, dy: number): void
putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct PutImageData {
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(() =>{
var imageData = this.context.createImageData(100, 100)
for (var i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] = 255
imageData.data[i + 1] = 0
imageData.data[i + 2] = 255
imageData.data[i + 3] = 255
}
this.context.putImageData(imageData, 10, 10)
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png)
### setLineDash
setLineDash(segments: number[]): void
设置画布的虚线样式。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
| 参数 | 类型 | 描述 |
| -------- | -------- | ------------------- |
| segments | number[] | 描述线段如何交替和线段间距长度的数组。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct SetLineDash {
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(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_000000127777771](figures/zh-cn_image_000000127777771.png)
### getLineDash
getLineDash(): number[]
获得当前画布的虚线样式。
**返回值：**
| 类型 | 说明 |
| -------- | ------------------------ |
| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct GetLineDash {
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(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.stroke();
let res = this.context.getLineDash()
})
}
.width('100%')
.height('100%')
}
}
```
### imageSmoothingQuality
imageSmoothingQuality(quality: imageSmoothingQuality)
用于设置图像平滑度。该接口为空接口。
**参数：**
| 参数 | 类型 | 描述 |
| ------- | --------------------- | ---------------------------------------- |
| quality | imageSmoothingQuality | 支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
### transferFromImageBitmap
transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ---------------------------------------- | ------------------ |
| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1847,14 +2244,16 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var imageData = this.context.createImageData(100, 100)
var imageData = this.offContext.createImageData(100, 100)
for (var i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] = 255
imageData.data[i + 1] = 0
imageData.data[i + 2] = 255
imageData.data[i + 3] = 255
}
this.context.putImageData(imageData, 10, 10)
this.offContext.putImageData(imageData, 10, 10)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
......@@ -1862,8 +2261,52 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
}
}
```
![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png)
![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png)
### toDataURL
toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
**返回值：**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ToDataURL {
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(() =>{
var dataURL = this.context.toDataURL();
})
}
.width('100%')
.height('100%')
}
}
```
### restore
......@@ -1872,14 +2315,17 @@ restore(): void
对保存的绘图上下文进行恢复。
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -1901,16 +2347,18 @@ restore(): void
save(): void
对当前的绘图上下文进行保存。
将当前状态放入栈中，保存canvas的全部状态，通常在需要保存绘制状态时调用。
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
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)
......@@ -1934,7 +2382,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
......@@ -1942,8 +2391,10 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
......@@ -1980,7 +2431,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。
**参数：**
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
......@@ -1990,8 +2442,10 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
**示例：**
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 5919c0fe
# Canvas
> **说明：**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件，用于自定义绘制图形。
......@@ -16,13 +14,13 @@
## 接口
Canvas(context: CanvasRenderingContext2D)
Canvas(context?: CanvasRenderingContext2D)
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是 | - | 见CanvasRenderingContext2D对象。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否 | - | 见CanvasRenderingContext2D对象。 |
## 属性
......@@ -34,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D)
| 名称 | 参数 | 描述 |
| ----------------------------- | ---- | -------------------- |
| onReady(callback: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
| onReady(event: () => void) | 无 | 画布组件的事件回调，可以在此时进行绘制。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
浏览文件 @ 5919c0fe
# ImageBitmap对象
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
CanvasImageData对象可以存储canvas渲染的像素数据。
ImageBitmap对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | ImageBitmap的像素宽度。 |
| height | number | ImageBitmap的像素高度。 |
## 方法
### close
close()
释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 5919c0fe
# ImageData对象
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。
......@@ -10,8 +9,9 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性
| 属性 | 类型 | 描述 |
| ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 |
| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
浏览文件 @ 5919c0fe
# Path2D对象
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
......@@ -10,26 +9,31 @@
## addPath
addPath(path: Object): void
addPath(path: path2D, transform?:Matrix2D): void
将另一个路径添加到当前的路径对象中。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| path | Object | 是 | null | 需要添加到当前路径的路径对象 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| path | path2D | 是 | - | 需要添加到当前路径的路径对象。|
| transform | Matrix2D | 否 | null | 新增路径的变换矩阵对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -56,15 +60,17 @@ closePath(): void
将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -94,21 +100,24 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标。 |
| y | number | 是 | 0 | 目标点Y轴坐标。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -138,21 +147,24 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------- |
| x | number | 是 | 0 | 目标点X轴坐标 |
| y | number | 是 | 0 | 目标点Y轴坐标 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 目标点X轴坐标。 |
| y | number | 是 | 0 | 目标点Y轴坐标。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -183,25 +195,28 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -228,23 +243,26 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
创建二次贝赛尔曲线的路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -268,29 +286,32 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
## arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
```
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -316,24 +337,27 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -356,31 +380,34 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
## ellipse
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: number): void
在规定的矩形区域绘制一个椭圆。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------ | ---- | ---- | ------------------------------------ |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
- 示例
```
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| counterclockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -403,27 +430,30 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
## rect
rect(x: number, y: number, width: number, height: number): void
rect(x: number, y: number, w: number, h: number): void
创建矩形路径。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**参数：**
- 示例
```
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 5919c0fe
......@@ -39,7 +39,7 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| itemSize | string \| number | 设置字母索引条字母区域大小，字母区域为正方形，即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式，支持弹窗显示在索引条右侧和左侧。<br/>默认值：IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
| popupPosition | [Position](ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
## IndexerAlign枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
支持单个子组件。
......@@ -28,7 +23,7 @@ TabContent()
| 名称 | 参数类型 | 默认值 | 描述 |
| ------ | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| tabBar | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>text?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
| tabBar | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>text?:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>**说明：**<br/>如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
> **说明：**
> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
......
zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 5919c0fe
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 子组件
包含子组件[TabContent](ts-container-tabcontent.md)。
......@@ -19,7 +14,7 @@
## 接口说明
Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
**参数：**
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 5919c0fe
......@@ -19,21 +19,32 @@
## 接口
Circle(value?: {width: string&nbsp;|&nbsp;number, height: string&nbsp;|&nbsp;number})
Circle(options?: {width?: string | number, height?: string | number})
**参数：**
## 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | ------ | ---- | ------------------ |
| width | Length | 0 | 否 | 圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 圆所在矩形的高度。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 5919c0fe
......@@ -20,21 +20,32 @@
## 接口
Ellipse(value?: {width: string&nbsp;|&nbsp;number, height: string&nbsp;|&nbsp;number})
ellipse(options?: {width?: string | number, height?: string | number})
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | ------ | ---- | -------------------- |
| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 |
| height | Length | 0 | 否 | 椭圆所在矩形的高度。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 |设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 5919c0fe
......@@ -19,23 +19,34 @@
## 接口
Line(value?: {width: string&nbsp;|&nbsp;number, height: string&nbsp;|&nbsp;number})
Line(options?: {width?: string | number, height?: string | number})
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ---------- | ------------- | ----------- | ---- | ------------------------ |
| width | [Length](ts-types.md#length) | 0 | 否 | 直线所在矩形的宽度。 |
| height | [Length](ts-types.md#length) | 0 | 否 | 直线所在矩形的高度。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| startPoint | Array | [0,&nbsp;0] | 是 | 直线起点坐标点(相对坐标)。 |
| endPoint | Array | [0,&nbsp;0] | 是 | 直线终点坐标点(相对坐标)。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 5919c0fe
......@@ -14,50 +14,54 @@
## 接口
Path(value?: { width?: number | string, height?: number | string, commands?: string })
Path(value?: { width?: number | string; height?: number | string; commands?: string })
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---------------- | ---- | ---- | ----------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度。 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度。 |
| commands | string | 否 | '' | 路径绘制的命令字符串。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | ---- | ------ | -------------------- |
| width | number \| string | 否 | 0 | 路径所在矩形的宽度 |
| height | number \| string | 否 | 0 | 路径所在矩形的高度 |
| commands | string | 否 | '' | 路径绘制的命令字符串 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | --------------------------------------- | ------ | ---- | ------------------------ |
| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 |
| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 |
| commands | string | '' | 否 | 路径绘制的命令字符串。 |
支持的绘制命令如下：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
## 属性
如 commands('M0 20 L50 50 L50 100 Z')定义了一条路径，开始于位置（0，20），到达位置（50，50）后再到（50，100），最后在（0，20）处关闭路径。
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
commands支持的绘制命令如下：
| 命令 | 名称 | 参数 | 说明 |
| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| M | moveto | （x y） | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
| L | lineto | （x y） | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
| H | horizontal lineto | x | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
| V | vertical lineto | y | 从当前点绘制一条垂直线，等效于将x坐标指定为0的L命令。例如，`V 50 ` 表示绘制当前点到（0, 50）点的直线，并将（0, 50）点作为新子路径的起始点。 |
| C | curveto | (x1 y1 x2 y2 x y) | 使用 (x1, y1) 作为曲线起点的控制点， (x2, y2) 作为曲线终点的控制点，从当前点到 (x, y) 绘制三次贝塞尔曲线。例如，`C100 100 250 100 250 200 ` 表示绘制当前点到（250, 200）点的三次贝塞尔曲线，并将（250, 200）点作为新子路径的起始点。 |
| S | smooth curveto | (x2 y2 x y) | (x2, y2) 作为曲线终点的控制点，绘制从当前点到 (x, y) 绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于起点的映射。 例如，`C100 100 250 100 250 200 S400 300 400 200`第二段贝塞尔曲线的起点控制点为（250, 300）。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。 |
| Q | quadratic Belzier curve | (x1 y1 x y) | 使用 (x1, y1) 作为控制点，从当前点到 (x, y) 绘制二次贝塞尔曲线。例如，`Q400 50 600 300 ` 表示绘制当前点到（600, 300）点的二次贝塞尔曲线，并将（600, 300）点作为新子路径的起始点。 |
| T | smooth quadratic Belzier curveto | (x y) | 绘制从当前点到 (x, y) 绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于起点的映射。 例如，`Q400 50 600 300 T1000 300`第二段贝塞尔曲线的控制点为（800, 350）。 如果没有前一个命令或者前一个命令不是 Q或T，则第一个控制点与当前点重合。 |
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | 从当前点到 (x, y) 绘制一条椭圆弧。椭圆的大小和方向由两个半径 (rx, ry) 和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。 |
| Z | closepath | none | 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。 |
例如： commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置（0，20），接着绘制点（0，20）到点（50，50）的直线，再绘制点（50，50）到点（50，100）的直线，最后绘制点（50，100）到（0，20）的直线关闭路径，形成封闭三角形。
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 5919c0fe
......@@ -19,22 +19,41 @@
## 接口
Polygon(value?:{width?: string&nbsp;|&nbsp;number, height?: string&nbsp;|&nbsp;number})
Polygon(options?: {width?: string | number, height?: string | number})
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ---------------- | ------ | ---- | ---------------------- |
| width | Length | 0 | 否 | 多边形所在矩形的宽度。 |
| height | Length | 0 | 否 | 多边形所在矩形的高度。 |
| points | Array&lt;any&gt; | - | 是 | 多边形的顶点坐标列表。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## Point
点坐标类型。
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | ------------------------------------------------------------ |
| Point | [number,&nbsp;number] | 第一个参数为x轴坐标，第二个参数为y轴坐标（相对坐标）。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 5919c0fe
......@@ -20,22 +20,41 @@
## 接口
Polyline(value?: {width?: string&nbsp;|&nbsp;number, height?: string&nbsp;|&nbsp;number})
Polyline(options?: {width?: string | number, height?: string | number})
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ------ | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ---------------- | ------ | ---- | -------------------- |
| width | Length | 0 | 否 | 折线所在矩形的宽度。 |
| height | Length | 0 | 否 | 折线所在矩形的高度。 |
| points | Array&lt;any&gt; | - | 是 | 折线经过坐标点列表。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | 否 | 折线经过坐标点列表。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## Point
点坐标类型。
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | ------------------------------------------------------------ |
| Point | [number,&nbsp;number] | 第一个参数为x轴坐标，第二个参数为y轴坐标（相对坐标）。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 5919c0fe
......@@ -20,27 +20,39 @@
## 接口
Rect(value:{value?: {width?: number&nbsp;|&nbsp;string&nbsp;,height?: number&nbsp;|&nbsp;string&nbsp;,radius?: number&nbsp;|&nbsp;string&nbsp;| Array&lt;Length&gt;} | {width?: number&nbsp;|&nbsp;string&nbsp;,height?: number&nbsp;|&nbsp;string&nbsp;,radiusWidth?: number&nbsp;|&nbsp;string&nbsp;,radiusHeight?: number&nbsp;|&nbsp;string&nbsp;}})
Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
**options参数说明：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
| radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ----------------------------------------------------------- | ---- | ------ | ---------------------------------------- |
| width | number&nbsp;\|&nbsp;string | 是 | - | 宽度。 |
| height | number&nbsp;\|&nbsp;string | 是 | - | 高度。 |
| radius | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Array&lt;any&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
| radiusWidth | number&nbsp;\|&nbsp;string | 否 | 0 | 圆角宽度。 |
| radiusHeight | number&nbsp;\|&nbsp;string | 否 | 0 | 圆角高度。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ------------ | ------------------------------------ | ------ | ---- | -------------------------------- |
| width | Length | 0 | 否 | 宽度。 |
| height | Length | 0 | 否 | 高度。 |
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
| radius | Length&nbsp;\|&nbsp;Array&lt;any&gt; | 0 | 否 | 圆角大小。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 否 | 圆角半径大小。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 5919c0fe
......@@ -23,31 +23,33 @@
## 接口
Shape(value?: {target?: PixelMap})
Shape(value?: PixelMap)
**参数：**
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| value | PixelMap | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------- | ---- | ------ | ------------------------------------------------------------ |
| target | PixelMap | 否 | null | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
## 属性
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| ---------------- | ------------------------------------------------------------ | ------------------- | ---- | -------------------------- |
| viewPort | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;&nbsp;[Length](ts-types.md#length),<br/>width?:&nbsp;&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;&nbsp;[Length](ts-types.md#length)<br/>} | - | 是 | 形状的视口。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Black | 否 | 填充颜色。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 边框颜色。 |
| strokeDashArray | Array&lt;any&gt; | [] | 否 | 设置边框的间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 路径端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框的不透明度。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置边框的宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿。 |
| mesh | Array&lt;any&gt;,<br/>column:number,<br/>row:number | - | 否 | 绘制网格时调用。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置形状填充部分的透明度。 |
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
| fill | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](../../ui/ts-types.md) | Color.Black | 否 | 设置线条颜色。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md
浏览文件 @ 5919c0fe
......@@ -12,22 +12,15 @@
## AnimationOptions对象说明
### 属性
| 属性名称 | 属性类型 | 默认值 | 描述 |
| ---------- | ------------------------- | ------ | ----------------------------------- |
| duration | number | 1000 | 动画持续时间，单位为毫秒。 |
| tempo | number | 1.0 | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 动画曲线。 |
| delay | number | 0 | 单位为ms(毫秒)，默认不延时播放。 |
| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
### 接口
| 名称 | 功能描述 |
| ------------------------------- | --------- |
| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------------------------- | ----- | ------ | ----------------------------------- |
| duration | number | 否 | 1000 | 动画持续时间，单位为毫秒。 |
| tempo | number | 否 | 1.0 | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 |
| curve | Curve&nbsp;\|&nbsp;Curves | 否 | Curve.Linear | 动画曲线。 |
| delay | number | 否 | 0 | 单位为ms(毫秒)，默认不延时播放。 |
| iterations | number | 否 | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode)| 否 | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
| onFinish | ()&nbsp;=&gt;&nbsp;void | 否 | - | 动效播放完成回调。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 5919c0fe
......@@ -43,7 +43,7 @@
## 响应手势事件
组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。如通过TapGesture对象的onAction事件响应点击事件。具体事件定义见各个手势对象章节。
组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势的事件定义见各个手势对象章节。
- TapGesture事件说明
| 名称 | 功能描述 |
......@@ -51,10 +51,36 @@
| onAction((event?:GestureEvent)&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
- GestureEvent对象说明
| 属性名称 | 属性类型 | 描述 |
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| timestamp | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | SourceType | 事件输入设备。 |
| repeat | boolean | 是否为重复触发事件，用于LongPressGesture手势触发场景。 |
| fingerList<sup>8+</sup> | FingerInfo[] | 触发事件的所有手指信息，用于LongPressGesture与TapGesture手势触发场景。 |
| offsetX | number | 手势事件x轴偏移量，单位为vp，用于PanGesture手势触发场景。 |
| offsetY | number | 手势事件y轴偏移量，单位为vp，用于PanGesture手势触发场景。 |
| angle | number | 用于RotationGesture手势触发场景时，表示旋转角度；用于SwipeGesture手势触发场景时，表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
| speed<sup>8+</sup> | number | 滑动手势速度，即所有手指滑动的平均速度，单位为vp/秒，用于SwipeGesture手势触发场景。 |
| scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
| pinchCenterX | number | 捏合手势中心点x轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
| pinchCenterY | number | 捏合手势中心点y轴坐标，单位为vp，用于PinchGesture手势触发场景。 |
- SourceType
| 名称 | 描述 |
| -------- | -------- |
| Unknown | 未知设备。 |
| Mouse | 鼠标。 |
| TouchScreen | 触摸屏。 |
- FingerInfo对象说明
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| id | number | 手指的索引编号。 |
| globalX | number | 相对于设备屏幕左上角的x轴坐标。 |
| globalY | number | 相对于设备屏幕左上角的y轴坐标。 |
| localX | number | 相对于当前组件元素左上角的x轴坐标。 |
| localY | number | 相对于当前组件元素左上角的y轴坐标。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 5919c0fe
# Video
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
视频播放组件。
## 权限列表
使用网络视频时，需要在config或者module.json对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
> **说明：**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
```
"abilities":[
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
## 需要权限
使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。
## 子组件
......@@ -27,16 +17,16 @@
## 接口
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | ------------------------------------------------------------ |
| src | string \| [Resource](ts-types.md#resource) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 |
| currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | - | 预览图片的路径。 |
| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
| src | string \| [Resource](ts-types.md#resource) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 |
| currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | - | 预览图片的路径。 |
| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 |
## PlaybackSpeed<sup>8+</sup>类型接口说明
......@@ -68,10 +58,10 @@
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| onPrepared(callBack:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。<br/>- duration: 视频的时长。 |
| onSeeking(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息，单位为s。 |
| onSeeked(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后，上报播放时间信息，单位为s。 |
| onUpdate(callBack:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 |
| onPrepared(callback:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。<br/>- duration: 视频的时长。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息，单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后，上报播放时间信息，单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 |
## VideoController
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 5919c0fe
......@@ -14,29 +14,29 @@
## ActionSheet.show
show(value?: {&nbsp; title?: string&nbsp;|&nbsp;Resource,message?: string&nbsp;|&nbsp;Resource,confirm?:{value: string&nbsp;|&nbsp;Resource,action:() => void},cancel?:()=>void,sheets?:Array<SheetInfo&gt;,autoCancel?:boolean, alignment?: DialogAlignment , offset?: { dx: number | string | Resource; dy: number | string | Resource } })
show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } })
定义列表弹窗并弹出。
- paramObject1参数
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | 无标题 | 弹窗标题。 |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value：按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
| sheets | Array<SheetInfo&gt; | 是 | - | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 |
| sheets | Array&lt;SheetInfo&gt; | 是 | - | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 |
- SheetInfo接口说明
## SheetInfo接口说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ---------------------------------------------------- | ---- | ------ | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是 | - | sheet文本。 |
| icon | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | 无 | sheet图标。 |
| action | ()=&gt;void | 是 | - | sheet选中的回调。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标，默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
浏览文件 @ 5919c0fe
......@@ -11,9 +11,9 @@
| 名称 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| show | options:&nbsp;{&nbsp;paramObject1&nbsp;\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
| show | value:&nbsp;{&nbsp;AlertDialogParamWithConfirm&nbsp;\|&nbsp;AlertDialogParamWithButtons} | - | 定义并显示AlertDialog组件。 |
- paramObject1参数
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
......@@ -21,12 +21,12 @@
| autoCancel | boolean | 否 | true | 点击遮障层时，是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
- paramObject2参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 否 | - | 弹窗标题。 |
| message | string&nbsp;\|&&nbsp;[Resource](ts-types.md#resource) | 是 | - | 弹窗内容。 |
......@@ -34,7 +34,7 @@
| primaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>fontColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>backgroundColor?:&nbsp;Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void;<br/>} | 否 | - | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment枚举说明) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 5919c0fe
......@@ -23,7 +23,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 |
| gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 |
- DialogAlignment枚举说明
## DialogAlignment枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Top | 垂直顶部对齐。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
浏览文件 @ 5919c0fe
......@@ -21,7 +21,7 @@ show(options: TextPickerDialogOptions)
| range | string[] | 是 | - | 选择器的数据选择范围。 |
| selected | number | 否 | 0 | 选中项在数组中的index值。 |
| value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 |
| defaultPickerItemHeight | number | 否 | - | 默认Picker内容项元素高度。 |
| defaultPickerItemHeight | number \| string | 否 | - | 默认Picker内容项元素高度。 |
| onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
| onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
| onChange | (value: TextPickerResult) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 5919c0fe
......@@ -11,39 +11,40 @@
OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| width | number | 是 | - | 离屏画布的宽度 |
| height | number | 是 | - | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 |
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
| width | number | 是 | - | 离屏画布的宽度 |
| height | number | 是 | - | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 |
## 属性
| 名称 | 类型 | 默认值 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用&nbsp;[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | - | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | - | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | string | 'butt' | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。 |
| [lineJoin](#linejoin) | string | 'miter' | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
| [miterLimit](#miterlimit) | number | 10 | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 |
| [font](#font) | string | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',&nbsp;'italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
| [textAlign](#textalign) | string | 'left' | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
| [textBaseline](#textbaseline) | string | 'alphabetic' | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic&nbsp;基线不需要考虑下行字母。 |
| [globalAlpha](#globalalpha) | number | - | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 0.0 | 设置画布的虚线偏移量，精度为float。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。 |
| [shadowBlur](#shadowblur) | number | 0.0 | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 |
| [shadowColor](#shadowcolor) | &lt;color&gt; | - | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | - | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | - | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 |
| imageSmoothingQuality | string | 'low' | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
## 属性
> **说明：**
> &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
| 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>-&nbsp;默认值：'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>-&nbsp;默认值：'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>-&nbsp;默认值：10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>-&nbsp;默认值：'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>-&nbsp;默认值：'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>-&nbsp;默认值：'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>-&nbsp;默认值：0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>-&nbsp;默认值：'source-over'。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>-&nbsp;默认值：0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>-&nbsp;默认值：true。 |
| imageSmoothingQuality | string | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。<br/>-&nbsp;默认值：'low'。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
>fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
### fillStyle
......@@ -143,7 +144,6 @@ struct StrokeStyleExample {
}
```
![zh-cn_image_0000001238712437](figures/zh-cn_image_0000001238712437.png)
......@@ -445,6 +445,7 @@ struct LineDashOffset {
.onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20])
this.offContext.lineDashOffset = 10.0;
this.offContext.stroke();
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
......@@ -454,8 +455,8 @@ struct LineDashOffset {
.height('100%')
}
}
```
```
![zh-cn_image_0000001238712439](figures/zh-cn_image_0000001238712439.png)
......@@ -700,7 +701,8 @@ fillRect(x: number, y: number, w: number, h: number): void
填充一个矩形。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
......@@ -708,8 +710,10 @@ fillRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct FillRect {
......@@ -744,7 +748,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
绘制具有边框的矩形，矩形内部不填充。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
......@@ -752,8 +757,10 @@ strokeRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct StrokeRect {
......@@ -787,7 +794,8 @@ clearRect(x: number, y: number, w: number, h: number): void
删除指定区域内的绘制内容。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
......@@ -795,8 +803,10 @@ clearRect(x: number, y: number, w: number, h: number): void
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ClearRect {
......@@ -828,19 +838,23 @@ clearRect(x: number, y: number, w: number, h: number): void
### fillText
fillText(text: string, x: number, y: number): void
fillText(text: string, x: number, y: number, maxWidth?: number): void
绘制填充类文本。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct FillText {
......@@ -875,15 +889,19 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct StrokeText {
......@@ -918,23 +936,40 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
- 返回值
**返回值：**
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
- TextMetrics类型描述
| 属性 | 类型 | 描述 |
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
- 示例
```
**TextMetrics类型描述:**
| 属性 | 类型 | 描述 |
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离，当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离，当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离，当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线，从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离，当前值为0。|
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离，当前值为0。|
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离，当前值为0。|
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离，当前值为0。|
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离，当前值为0。|
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离，当前值为0。|
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离，当前值为0。|
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离，当前值为0。|
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct MeasureText {
......@@ -970,13 +1005,16 @@ stroke(path?: Path2D): void
进行边框绘制操作。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Stroke {
......@@ -1013,8 +1051,10 @@ beginPath(): void
创建一个新的绘制路径。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct BeginPath {
......@@ -1053,14 +1093,17 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct MoveTo {
......@@ -1097,14 +1140,17 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct LineTo {
......@@ -1141,8 +1187,10 @@ closePath(): void
结束当前路径形成一个封闭路径。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ClosePath {
......@@ -1177,18 +1225,27 @@ closePath(): void
### createPattern
createPattern(image: ImageBitmap, repetition: string): CanvasPattern
createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null
通过指定图像和重复方式创建图片填充的模板。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
- 示例
```
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreatePattern {
......@@ -1225,7 +1282,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
......@@ -1235,8 +1293,10 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
......@@ -1273,7 +1333,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
......@@ -1281,8 +1342,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
......@@ -1315,11 +1378,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
### arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
绘制弧线路径。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
......@@ -1327,10 +1391,12 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Arc {
......@@ -1366,7 +1432,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
......@@ -1375,8 +1442,10 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ArcTo {
......@@ -1408,11 +1477,12 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
### ellipse
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
在规定的矩形区域绘制一个椭圆。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
......@@ -1422,11 +1492,12 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 |
| anticlockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
- 示例
**示例：**
```
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -1458,20 +1529,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
### rect
rect(x: number, y: number, width: number, height: number): void
rect(x: number, y: number, w: number, h: number): void
创建矩形路径。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -1506,8 +1580,10 @@ fill(): void
对封闭路径进行填充。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Fill {
......@@ -1542,8 +1618,10 @@ clip(): void
设置当前路径为剪切路径。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Clip {
......@@ -1577,17 +1655,20 @@ clip(): void
### rotate
rotate(rotate: number): void
rotate(angle: number): void
针对当前坐标轴进行顺时针旋转。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| rotate | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Rotate {
......@@ -1622,14 +1703,17 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Scale {
......@@ -1661,29 +1745,32 @@ scale(x: number, y: number): void
### transform
transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
transform(a: number, b: number, c: number, d: number, e: number, f: number): void
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
> **说明：**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
>
> - x' = scaleX \* x + skewY \* y + translateX
>
> - y' = skewX \* x + scaleY \* y + translateY
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
```
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Transform {
......@@ -1720,22 +1807,25 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
### setTransform
setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| scaleX | number | 是 | 0 | 指定水平缩放值。 |
| skewX | number | 是 | 0 | 指定水平倾斜值。 |
| skewY | number | 是 | 0 | 指定垂直倾斜值。 |
| scaleY | number | 是 | 0 | 指定垂直缩放值。 |
| translateX | number | 是 | 0 | 指定水平移动值。 |
| translateY | number | 是 | 0 | 指定垂直移动值。 |
- 示例
```
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct SetTransform {
......@@ -1773,14 +1863,17 @@ translate(x: number, y: number): void
移动当前坐标系的原点。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Translate {
......@@ -1814,28 +1907,31 @@ translate(x: number, y: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dw: number, dh: number): void
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number):void
进行图像绘制。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | -------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) 或[PixelMap](../apis/js-apis-image.md#pixelmap7)| 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sWidth | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 |
| dw | number | 否 | 0 | 绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Index {
......@@ -1866,34 +1962,44 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
### createImageData
createImageData(width: number, height: number): Object
createImageData(sw: number, sh: number): ImageData
根据宽高创建ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| width | number | 是 | 0 | ImageData的宽度。 |
| height | number | 是 | 0 | ImageData的高度。 |
| sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 |
### createImageData
createImageData(imageData: ImageData): Object
createImageData(imageData: ImageData): ImageData
根据已创建的ImageData对象创建新的ImageData对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 被复制的ImageData对象。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
### getPixelMap
getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
......@@ -1901,13 +2007,21 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
### getImageData
getImageData(sx: number, sy: number, sw: number, sh: number): Object
getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
......@@ -1915,14 +2029,23 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值：**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象 |
### putImageData
putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void
putImageData(imageData: Object, dx: number, dy: number): void
putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void
使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
......@@ -1933,8 +2056,10 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct PutImageData {
......@@ -1968,6 +2093,225 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
![zh-cn_image_0000001194192464](figures/zh-cn_image_0000001194192464.png)
### setLineDash
setLineDash(segments: number[]): void
设置画布的虚线样式。
**参数：**
| 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- |
| segments | number[] | 描述线段如何交替和线段间距长度的数组。 |
**示例：**
```ts
@Entry
@Component
struct SetLineDash {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20])
this.offContext.stroke();
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png)
### getLineDash
getLineDash(): number[]
获得当前画布的虚线样式。
**返回值：**
| 类型 | 说明 |
| ----- | ------------------------ |
| number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct GetLineDash {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20])
this.offContext.stroke();
let res = this.offContext.getLineDash()
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
### transferFromImageBitmap
transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。
**参数：**
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct GetLineDash {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.offContext.fillRect(0, 0, 200, 200)
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png)
### toDataURL
toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
**参数：**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
**返回值：**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct ToDataURL {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var dataURL = this.offContext.toDataURL();
})
}
.width('100%')
.height('100%')
}
}
```
### transferToImageBitmap
transferToImageBitmap(): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | --------------- |
| [ImageData](ts-components-canvas-imagebitmap.md)| 存储离屏画布上渲染的像素数据。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.offContext.restore()
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
.width('100%')
.height('100%')
}
}
```
### restore
......@@ -1975,8 +2319,10 @@ restore(): void
对保存的绘图上下文进行恢复。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -2008,8 +2354,10 @@ save(): void
对当前的绘图上下文进行保存。
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -2041,7 +2389,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
创建一个线性渐变色。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
......@@ -2049,8 +2398,10 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
......@@ -2090,7 +2441,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
......@@ -2100,8 +2452,10 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
- 示例
```
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
......
zh-cn/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @ 5919c0fe
......@@ -18,14 +18,6 @@
filename：工程中resources/rawfile目录下的文件名称。
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------------------- | ------ | ---- | ---- | ---------- |
| id | number | 是 | 否 | 资源id值。 |
| type | number | 是 | 否 | 资源类型。 |
| params | any[] | 是 | 否 | 资源可选参数 |
| bundleName<sup>9+</sup> | string | 是 | 否 | 资源包名称。 |
| moduleName<sup>9+</sup> | string | 是 | 否 | 资源模块名称。|
## Length
长度类型，用于描述尺寸单位。
......@@ -93,21 +85,21 @@
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
| size | number | 否 | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| weight | number | 否 | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。 |
| family | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 |
| style | string \| Resource | 否 | 设置文本的字体样式。 |
| size | [Length](#length) | 否 | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。 |
| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 |
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 |
## Area<sup>8+</sup>
区域类型，用于存储元素所占区域信息
| 名称 | 类型 | 说明 |
| -------------- | -------- | ------------------------------------------------- |
| width | Length | 目标元素的宽度，作为返回值时，类型为number，单位vp。 |
| height | Length | 目标元素的高度，作为返回值时，类型为number，单位vp。 |
| position | Position | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 |
| 名称 | 类型 | 必填 | 说明 |
| -------------- | -------- | ----- |------------------------------------------------- |
| width | [Length](#length) | 是 |目标元素的宽度，作为返回值时，类型为number，单位vp。 |
| height | [Length](#length) | 是 |目标元素的高度，作为返回值时，类型为number，单位vp。 |
| position | [Position](#position8) | 是 |目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 是 |目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
......@@ -148,7 +140,7 @@
| ------ | ------------- | ---- | ----------- |
| width | Length | 否 | 边框宽度。 |
| color | ResourceColor | 否 | 边框颜色。 |
| radius | Length | 否 | 边框角度。 |
| radius | Length | 否 | 边框圆角半径。 |
| style | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 边框样式。 |
## CustomBuilder<sup>8+</sup>
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ 5919c0fe
# 背景设置
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件的背景色。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| backgroundColor | Color | - | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;string,<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat参数：设置背景图片的重复样式，默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | Auto | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 |
| backgroundImagePosition | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置背景图在组件中显示位置。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat：设置背景图片的重复样式，默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值：ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 5919c0fe
# 边框设置
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件边框样式。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| border | {<br/>width?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>radius?:&nbsp;Length,<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)<br/>} | - | 统一边框样式设置接口。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | &nbsp;BorderStyle.Solid | 设置元素的边框样式。 |
| borderWidth | Length | 0 | 设置元素的边框宽度。 |
| borderColor | Color | - | 设置元素的边框颜色。 |
| borderRadius | Length | 0 | 设置元素的边框圆角半径。 |
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| border | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor),<br/>radius?:&nbsp;[Length](ts-types.md#length),<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)<br/>} | 统一边框样式设置接口。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid |
| borderWidth | [Length](ts-types.md#length) | 设置元素的边框宽度。 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置元素的边框颜色。 |
| borderRadius | [Length](ts-types.md#length) | 设置元素的边框圆角半径。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md
浏览文件 @ 5919c0fe
......@@ -14,7 +14,7 @@
| **名称** | **参数类型** | **默认值** | **描述** |
| --------- | -------- | ------- | -------------- |
| touchable | boolean | true | 设置当前组件是否可以被触摸。 |
| touchable | boolean | true | 设置当前组件是否可以响应点击事件、触摸事件等手指交互事件。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md
浏览文件 @ 5919c0fe
# 禁用控制
> **说明：**
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
组件是否可交互，可交互状态下响应[点击事件](ts-universal-events-click.md)、[触摸事件](ts-universal-events-touch.md)、[拖拽事件](ts-universal-events-drag-drop.md)、[按键事件](ts-universal-events-key.md)、[焦点事件](ts-universal-focus-event.md)和[鼠标事件](ts-universal-mouse-key.md)。
## 权限列表
无
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| enabled | boolean | true | 值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------- | ---- | ---------------------------------------- |
| enabled | boolean | true | 值为true表示组件可交互，响应点击等操作。<br>值为false表示组件不可交互，不响应点击等操作。<br>默认值：true |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 5919c0fe
......@@ -14,9 +14,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;number\|string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;any&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;angle,<br/>end?:&nbsp;angle,<br/>colors:&nbsp;Array&lt;any&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;Length,<br/>colors:&nbsp;Array&lt;any&gt;<br/>repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| linearGradient | {<br/>angle?:&nbsp;number\|string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point, <br/>start?:&nbsp;number\|string,<br/>end?:&nbsp;number\|string,rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ 5919c0fe
......@@ -16,7 +16,7 @@
| ----------------------------- | ---------------------------------------- | ------ | ---------------------------------------- |
| blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color,<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比） |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
浏览文件 @ 5919c0fe
......@@ -5,24 +5,19 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | - | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | - | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindMenu | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
## MenuItem
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ----------- |
| value | string | 菜单项文本。 |
| 名称 | 类型 | 描述 |
| ------ | ----------------------- | ---------------------- |
| value | string | 菜单项文本。 |
| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 5919c0fe
......@@ -7,17 +7,12 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------ | ---- | ---------------------------------- |
| opacity | number | 1 | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| 名称 | 参数类型 | 描述 |
| ------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。<br/>默认值：1 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ 5919c0fe
......@@ -15,7 +15,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| ------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------ |
| overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment-enums),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md
浏览文件 @ 5919c0fe
# 多态样式
> **说明：**
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
设置组件不同状态下的样式。
## 权限列表
无
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------- | ----------- | ---- | ------------ |
| stateStyles | StateStyles | - | 设置组件不同状态的样式。 |
| 名称 | 参数类型 | 描述 |
| ----------- | ----------- | ------------------------ |
| stateStyles | StateStyles | 设置组件不同状态的样式。 |
## StateStyles接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ----------- | ---- | ---- | ---------- |
| normal | ()=&gt;void | 否 | - | 组件无状态时的样式。 |
| pressed | ()=&gt;void | 否 | - | 组件按下状态的样式。 |
| disabled | ()=&gt;void | 否 | - | 组件禁用状态的样式。 |
| 名称 | 类型 | 必填 | 描述 |
| -------- | ---- | ---- | -------------------- |
| normal | any | 否 | 组件无状态时的样式。 |
| pressed | any | 否 | 组件按下状态的样式。 |
| disabled | any | 否 | 组件禁用状态的样式。 |
| focused | any | 否 | 组件获焦状态的样式。 |
| clicked | any | 否 | 组件点击状态的样式。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 5919c0fe
......@@ -5,39 +5,34 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions | - | 给组件绑定Popup，点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示，默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## PopupOptions类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| --------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
| message | string | 是 | - | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | false | 是否在组件上方显示，默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 |
## CustomPopupOptions<sup>8+</sup>类型接口说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ---------------------------------------------- | ---- | ---------------- | ------------------------------------------------------------ |
| builder | ()&nbsp;=&gt;&nbsp;any | 是 | - | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | Placement.Bottom | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。 |
| maskColor | [Color](ts-appendix-enums.md#color) | 否 | - | 提示气泡遮障层的颜色。 |
| popupColor | [Color](ts-appendix-enums.md#color) | 否 | - | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | true | 是否显示箭头，只有上、下方向的气泡会显示箭头。 |
| autoCancel | boolean | 否 | true | 页面有操作时，是否自动关闭气泡 |
| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
## 接口
| 名称 | 参数类型 | 描述 |
| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions<sup>8+</sup> | 给组件绑定Popup，点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示，默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
## PopupOptions类型说明
| 名称 | 类型 | 必填 | 描述 |
| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示，默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 |
## CustomPopupOptions<sup>8+</sup>类型说明
| 名称 | 类型 | 必填 | 描述 |
| ------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom |
| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头，只有上、下方向的气泡会显示箭头。<br/>默认值：true |
| autoCancel | boolean | 否 | 页面有操作时，是否自动关闭气泡<br/>默认值：true |
| onStateChange | (event:{isVisible:&nbsp;boolean })&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
浏览文件 @ 5919c0fe
......@@ -13,11 +13,10 @@
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| clip | Shape&nbsp;\|&nbsp;boolean | false | 参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。 |
| mask | Shape | - | 在当前组件上加上指定形状的遮罩。 |
| clip | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;\|&nbsp;boolean | false | 参数为相应类型的组件，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。 |
| mask | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;| - | 在当前组件上加上指定形状的遮罩。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
浏览文件 @ 5919c0fe
......@@ -5,23 +5,18 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| width | Length | - | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 |
| height | Length | - | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 |
| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | 设置高宽尺寸。 |
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。 |
| layoutWeight | number | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
| 名称 | 参数说明 | 描述 |
| -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| width | [Length](ts-types.md#length) | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。 |
| height | [Length](ts-types.md#length) | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。 |
| size | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置高宽尺寸。 |
| padding | [Padding](ts-types.md#padding)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。<br/>默认值：0 |
| margin | [Margin](ts-types.md#margin)&nbsp;\|&nbsp;[Length](ts-types.md#length) | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。<br/>默认值：0 |
| constraintSize | {<br/>minWidth?:&nbsp;[Length](ts-types.md#length),<br/>maxWidth?:&nbsp;[Length](ts-types.md#length),<br/>minHeight?:&nbsp;[Length](ts-types.md#length),<br/>maxHeight?:&nbsp;[Length](ts-types.md#length)<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。<br/>默认值：<br/>{<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} |
| layoutWeight | number&nbsp;\|&nbsp;string | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置，表示自适应占满剩余空间。<br/>默认值：0<br/>**说明：**<br/>仅在Row/Column/Flex布局中生效。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
浏览文件 @ 5919c0fe
# 触摸热区设置
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
> **说明：**
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 设置一个或多个触摸热区，包括位置和大小。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 |
| 名称 | 参数类型 | 描述 |
| -------------- | --------------------------------------------- | ------------------------------------------------------------ |
| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | 设置一个或多个触摸热区，包括位置和大小。<br/>默认值：<br/>{<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} |
### Rectangle对象说明
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------------ |
| x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 |
| y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 |
| width | Length | 否 | 100% | 触摸热区范围的宽度。 |
| height | Length | 否 | 100% | 触摸热区范围的高度。 |
| 名称 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ---------------------------- | ---- | ------ | --------------------------------------------------- |
| x | [Length](ts-types.md#length) | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。<br/>默认值：0vp |
| y | [Length](ts-types.md#length) | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。<br/>默认值：0vp |
| width | [Length](ts-types.md#length) | 否 | 100% | 触摸热区范围的宽度。<br/>默认值：100% |
| height | [Length](ts-types.md#length) | 否 | 100% | 触摸热区范围的高度。<br/>默认值：100% |
> **说明：**
>
> 当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。
> x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。
>
> width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。
>
> 百分比是相对于组件本身来度量的。
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ 5919c0fe
......@@ -14,7 +14,7 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md
浏览文件 @ 5919c0fe
......@@ -5,26 +5,22 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | --------------------------------- |
| onClick(callback:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 |
| 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | --------------------------------------------------- |
| onClick(event:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用，event参数见ClickEvent介绍。 |
## ClickEvent对象说明
| 属性名称 | 类型 | 描述 |
| ------------------- | -------------------------------- | ------------------- |
| screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 |
| screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 |
| x | number | 点击点相对于被点击元素左边沿的X坐标。 |
| y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 |
| timestamp | number | 事件时间戳。 |
| 属性名称 | 类型 | 描述 |
| ---------------------- | ------------------------------------ | ------------------------------------- |
| screenX | number | 点击点相对于设备屏幕左边沿的X坐标。 |
| screenY | number | 点击点相对于设备屏幕上边沿的Y坐标。 |
| x | number | 点击点相对于被点击元素左边沿的X坐标。 |
| y | number | 点击点相对于被点击元素上边沿的Y坐标。 |
| target<sup>8+</sup> | [EventTarget](#eventtarget8对象说明) | 被点击元素对象。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
## EventTarget<sup>8+</sup>对象说明
| 名称 | 参数类型 | 描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 5919c0fe
......@@ -8,13 +8,20 @@
| 名称 | 支持冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onDragStart(callback:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8)) | 否 | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 |
| onDragEnter(callback:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragMove(callback:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragLeave(callback:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDrop(callback:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。 |
| onDragStart(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>返回值：当前跟手效果所拖拽的对象，用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级：长按手势配置时间小于等于150毫秒(ms)时，长按手势优先触发，否则拖拽事件优先触发。 |
| onDragEnter(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragMove(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDragLeave(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。<br/>当监听了onDrop事件时，此事件才有效。 |
| onDrop(event:&nbsp;(event:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。<br/>- event：拖拽事件信息，包括拖拽点坐标。<br/>- extraParams：拖拽事件额外信息，详见extraParam类型描述。 |
- extraParam说明<br>
## DragItemInfo说明
| 属性名称 | 属性类型 | 必填 | 描述 |
| ------------- | ------ | ------- |--------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
| builder | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图，如果设置了pixelMap，则忽略此值。 |
| extraInfo | string | 否 | 拖拽项的描述。 |
## extraParam说明<br>
用于返回组件在拖拽中需要用到的额外信息。
extraParam是Json对象转换的string字符串，可以通过Json.parse转换的Json对象获取如下属性。
| 属性名称 | 属性类型 | 描述 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ 5919c0fe
......@@ -21,23 +21,16 @@
## KeyEvent对象说明
### 属性
| 属性名称 | 类型 | 描述 |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 |
| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 |
| keyText | string | 按键的键值。 |
| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 |
| deviceId | number | 触发当前按键的输入设备ID。 |
| metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
| timestamp | number | 按键发生时的时间戳。 |
### 接口
| 接口名称 | 功能描述 |
| ---------------------------- | --------- |
| stopPropagation():&nbsp;void | 阻塞事件冒泡传递。 |
| 名称 | 类型 | 描述 |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](ts-appendix-enums.md#keytype) | 按键的类型。 |
| [keyCode](../apis/js-apis-keycode.md) | number | 按键的键码。 |
| keyText | string | 按键的键值。 |
| keySource | [KeySource](ts-appendix-enums.md#keysource) | 触发当前按键的输入设备类型。 |
| deviceId | number | 触发当前按键的输入设备ID。 |
| metaKey | number | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
| timestamp | number | 按键发生时的时间戳。 |
| stopPropagation | () => void | 阻塞事件冒泡传递。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
浏览文件 @ 5919c0fe
......@@ -5,38 +5,29 @@
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 事件
| 名称 | 是否冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
| 名称 | 是否冒泡 | 功能描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
## TouchEvent对象说明
### 属性
| 名称 | 类型 | 描述 |
| ------------------- | ---------------------------------------- | ------------ |
| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 |
| touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 |
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
| 属性名称 | 类型 | 描述 |
| ------------------- | ------------------------------------------------------------ | ---------------------------------- |
| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 |
| touches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。 |
| changedTouches | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
| timestamp | number | 距离开机时间的时间戳，单位为毫秒。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。 |
### 接口
| 接口名称 | 功能描述 |
| ---------------------- | ------- |
| stopPropagation()：void | 阻塞事件冒泡。 |
## TouchObject对象说明
| 属性名称 | 类型 | 描述 |
| 名称 | 类型 | 描述 |
| ------- | --------------------------- | ------------------- |
| type | [TouchType](ts-appendix-enums.md#touchtype) | 触摸事件的类型。 |
| id | number | 手指唯一标识符。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md
浏览文件 @ 5919c0fe
......@@ -5,29 +5,28 @@
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 事件
| 名称 | 支持冒泡 | 描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onHover(callback:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 |
| onMouse(callback:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 |
| 名称 | 支持冒泡 | 描述 |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event:&nbsp;(isHover:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true,&nbsp;退出时为false。 |
| onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时，触发该回调，event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 |
## MouseEvent对象说明
| 属性名称 | 属性类型 | 描述 |
| 名称 | 属性类型 | 描述 |
| --------- | ------------------------------- | -------------------- |
| timestamp | number | 触发事件时的时间戳。 |
| screenX | number | 点击触点相对于屏幕左上角的x轴坐标。 |
| screenY | number | 点击触点相对于屏幕左上角的y轴坐标。 |
| x | number | 点击触点相对于当前组件左上角的x轴坐标。 |
| y | number | 点击触点相对于当前组件左上角的y轴坐标。 |
| button | [MouseButton](ts-appendix-enums.md#mousebutton) | 鼠标按键。 |
| action | [MouseAction](ts-appendix-enums.md#mouseaction) | 事件动作。 |
| stopPropagation | () => void | 阻塞事件冒泡。 |
| timestamp<sup>8+</sup> | number | 事件时间戳。 |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 |
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md) | 事件输入设备。 |
## 示例
......
zh-cn/application-dev/reference/js-service-widget-ui/Readme-CN.md
浏览文件 @ 5919c0fe
......@@ -2,7 +2,6 @@
- JS服务卡片UI框架说明
- [文件组织](js-service-widget-file.md)
- [配置文件](js-service-widget-config-file.md)
- 语法
- [HML语法参考](js-service-widget-syntax-hml.md)
- [CSS语法参考](js-service-widget-syntax-css.md)
......
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# 配置文件
js标签中包含了实例名称、窗口样式和卡片页面信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ------- | ---- | --------------------------- |
| name | String | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 |
| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 |
> **说明：**
> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。
## pages
定义卡片页面信息，由卡片页面路径和卡片页面名组成，卡片仅包含一个页面。比如：
```
{
...
"src": "./js/widget/pages/index/index" //卡片仅包含一个页面
...
}
```
> **说明：**
> - pages列表中仅包含一个页面。
>
> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
## window
window用于定义与显示窗口相关的配置。对于卡片尺寸适配问题，有2种配置方法，建议使用autoDesignWidth：
- 指定卡片designWidth 150px（2×2），所有与大小相关的样式（例如width、font-size）均以designWidth和实际卡片宽度的比例进行缩放，例如在designWidth为150时，如果设置width为100px时，在卡片实际宽度为300物理像素时，width实际渲染像素为200物理像素。
- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。
> **说明：**
> - 组件样式中&lt;length&gt;类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认&lt;length&gt;为1px时，设备上实际渲染出2物理像素。
>
> - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --------------- | ------- | ---- | ----- | ---------------------------------------- |
| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下：
{
...
"window": {
"autoDesignWidth": true
}
...
}
## 示例
```json
{
"forms": [
{
"name": "widget",
"description": "This is a service widget.",
"src": "./js/widget/pages/index/index",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDefault": true,
"updateEnabled": true,
"scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*2",
"supportDimensions": [
"1*2","2*2","2*4","4*4"
],
"formConfigAbility": "ability://xxxxx"
}
]
}
```
zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md
浏览文件 @ 5919c0fe
......@@ -49,9 +49,15 @@ JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下：
> **说明：**
> 当代码文件A需要引用代码文件B时：
>
>
> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
>
>
> - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。
>
>
> - 在json文件中定义的数据为资源文件路径时，需使用绝对路径。
## 配置文件
FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../ability/fa-formability.md#配置卡片配置文件)。
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下，配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../ability/stage-formextension.md#配置卡片配置文件)。
\ No newline at end of file
zh-cn/application-dev/security/accesstoken-guidelines.md
浏览文件 @ 5919c0fe
# 访问控制开发指导
# 访问控制（权限）开发指导
## 场景介绍
......
zh-cn/application-dev/task-management/background-task-dev-guide.md
浏览文件 @ 5919c0fe
......@@ -195,7 +195,7 @@ import featureAbility from '@ohos.ability.featureAbility';
import wantAgent from '@ohos.wantAgent';
import rpc from "@ohos.rpc";
function startBackgroundRunning() {
function startContinuousTask() {
let wantAgentInfo = {
// 点击通知后，将要执行的动作列表
wants: [
......@@ -223,7 +223,7 @@ function startBackgroundRunning() {
});
}
function stopBackgroundRunning() {
function stopContinuousTask() {
backgroundTaskManager.stopBackgroundRunning(featureAbility.getContext()).then(() => {
console.info("Operation stopBackgroundRunning succeeded");
}).catch((err) => {
......@@ -231,6 +231,13 @@ function stopBackgroundRunning() {
});
}
async function processAsyncJobs() {
// 此处执行具体的长时任务。
// 长时任务执行完，调用取消接口，释放资源。
stopContinuousTask();
}
let mMyStub;
class MyStub extends rpc.RemoteObject {
......@@ -262,9 +269,9 @@ export default {
onStart(want) {
console.info('ServiceAbility onStart');
mMyStub = new MyStub("ServiceAbility-test");
startBackgroundRunning();
// 此处执行后台具体的长时任务。
stopBackgroundRunning();
// 在执行后台长时任前，调用申请接口。
startContinuousTask();
processAsyncJobs();
},
onStop() {
console.info('ServiceAbility onStop');
......
zh-cn/application-dev/task-management/work-scheduler-dev-guide.md
浏览文件 @ 5919c0fe
......@@ -34,20 +34,22 @@ isLastWorkTimeOut(workId: number): Promise\<boolean>| 获取上次任务是否
**表2** WorkInfo包含参数
接口名|描述|类型
> **说明：** WorkInfo设置参数约束见[延迟任务调度概述](./work-scheduler-overview.md)
参数名| 类型 |描述
---------------------------------------------------------|-----------------------------------------|---------------------------------------------------------
workId | 延迟任务Id（必填）|number
bundleName | 延迟任务包名（必填）|string
abilityName | 延迟任务回调通知的组件名（必填）|string
networkType | 网络类型 | NetworkType
isCharging | 是否充电 | boolean
chargerType | 充电类型 | ChargingType
batteryLevel | 电量| number
batteryStatus| 电池状态| BatteryStatus
storageRequest|存储状态| StorageRequest
isRepeat|是否循环任务| boolean
repeatCycleTime |循环间隔| number
repeatCount |循环次数| number
workId| number | 延迟任务Id（必填）
bundleName| string | 延迟任务包名（必填）
abilityName| string | 延迟任务回调通知的组件名（必填）
networkType | [NetworkType](../reference/apis/js-apis-workScheduler.md/#networktype) | 网络类型
isCharging| boolean | 是否充电
chargerType| [ChargingType](../reference/apis/js-apis-workScheduler.md/#chargingtype) | 充电类型
batteryLevel| number | 电量
batteryStatus| [BatteryStatus](../reference/apis/js-apis-workScheduler.md/#batterystatus) | 电池状态
storageRequest| [StorageRequest](../reference/apis/js-apis-workScheduler.md/#storagerequest) |存储状态
isRepeat| boolean |是否循环任务
repeatCycleTime| number |循环间隔
repeatCount | number|循环次数
**表3** 延迟任务回调接口
......
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @ 5919c0fe
# UI开发
- [方舟开发框架（ArkUI）概述](arkui-overview.md)
- 基于TS扩展的声明式开发范式
- UI开发（基于eTS的声明式开发范式）
- [概述](ui-ts-overview.md)
- 框架说明
- 文件组织
......@@ -71,7 +71,7 @@
- [构建食物分类Grid布局](ui-ts-building-category-grid-layout.md)
- [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md)
- [性能提升的推荐方案](ts-performance-improvement-recommendation.md)
- 基于JS扩展的类Web开发范式
- UI开发（兼容JS的类Web开发范式）
- [概述](ui-js-overview.md)
- 框架说明
- [文件组织](js-framework-file.md)
......
zh-cn/application-dev/ui/arkui-overview.md
浏览文件 @ 5919c0fe
......@@ -26,12 +26,12 @@
- 平台API通道：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。
- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。
- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于eTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。
| 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
| 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 |
......
zh-cn/application-dev/ui/ts-framework-file-access-rules.md
浏览文件 @ 5919c0fe
......@@ -3,9 +3,9 @@
应用代码文件可通过如下方式访问：
- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。
- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。
- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。
- 使用当前模块根路径引用代码文件，比如：common/utils/utils。
- 公共代码文件推荐放在**common**目录下。
......@@ -13,7 +13,7 @@
## 示例
```
import { FoodData, FoodList } from "../common/utils/utils.ets";
import { FoodData, FoodList } from "../common/utils/utils";
@Entry
@Component
......
zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md
浏览文件 @ 5919c0fe
......@@ -257,4 +257,45 @@ struct MyComponent {
}.backgroundColor(Color.Pink)
}
}
```
\ No newline at end of file
```
## 减少应用滑动白块
应用通过增大List/Grid控件的cachedCount参数，调整UI的加载范围。cachedCount表示屏幕外List/Grid预加载item的个数。
如果需要请求网络图片，可以在item滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。
如下是使用cachedCount参数的例子：
```ts
@Entry
@Component
struct MyComponent {
private source: MyDataSource = new MyDataSource();
build() {
List() {
LazyForEach (this.source, item => {
ListItem() {
Text("Hello" + item)
.fontSize(100)
.onAppear(()=>{
console.log("appear:" + item)
})
}
})
}.cachedCount(3) // 扩大数值appear日志范围会变大
}
}
class MyDataSource implements IDataSource {
data: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
public totalCount(): number {
return this.data.length
}
public getData(index: number): any {
return this.data[index]
}
registerDataChangeListener(listener: DataChangeListener): void {
}
unregisterDataChangeListener(listener: DataChangeListener): void {
}
}
```
**使用说明：**
cachedCount的增加会增大UI的cpu、内存开销。使用时需要根据实际情况，综合性能和用户体验进行调整。
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 5919c0fe
......@@ -8,21 +8,22 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
在pages/index目录下的hml文件中创建一个Tabs组件。
```
<!-- index.hml -->
<div class="container" >
<tabs> <tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
<!-- xxx.hml -->
<div class="container">
<tabs>
<tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
</div>
```
......
zh-cn/application-dev/ui/ui-js-overview.md
浏览文件 @ 5919c0fe
# 概述
基于JS扩展的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
请参考[基于JS扩展的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。
请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。
## 整体架构
使用基于JS扩展的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。
使用兼容JS的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。
......@@ -32,7 +32,7 @@
## 相关实例
基于JS扩展的类Web开发范式的方舟开发框架，有以下相关实例可供参考：
兼容JS的类Web开发范式的方舟开发框架，有以下相关实例可供参考：
- [`AtomicLayout`：原子布局（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout)
......
zh-cn/application-dev/ui/ui-ts-building-data-model.md
浏览文件 @ 5919c0fe
......@@ -50,7 +50,15 @@
3. 存入食物图片资源。在resources &gt;base&gt; media目录下存入食物图片资源，图片名称为食物名称。
4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。
4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。以下示例创建了两个食物数据。
```
const FoodComposition: any[] = [
{ 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
{ 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }
]
```
实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用数据懒加载LazyForEach。
5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category，所以要将FoodData.ets的FoodData类export，在FoodDataModels.ets内import FoodData和Category。
......
zh-cn/application-dev/website.md
浏览文件 @ 5919c0fe
......@@ -185,15 +185,8 @@
- [后台提醒开发指导](notification/background-agent-scheduled-reminder-guide.md)
- [调试助手使用指导](notification/assistant-guidelines.md)
- 窗口管理
- 窗口
- [窗口开发概述](windowmanager/window-overview.md)
- [窗口开发指导](windowmanager/window-guidelines.md)
- 屏幕属性
- [屏幕属性开发概述](windowmanager/display-overview.md)
- [屏幕属性开发指导](windowmanager/display-guidelines.md)
- 屏幕截图
- [屏幕截图开发概述](windowmanager/screenshot-overview.md)
- [屏幕截图开发指导](windowmanager/screenshot-guidelines.md)
- [窗口开发概述](windowmanager/window-overview.md)
- [窗口开发指导](windowmanager/window-guidelines.md)
- WebGL
- [WebGL开发概述](webgl/webgl-overview.md)
- [WebGL开发指导](webgl/webgl-guidelines.md)
......
zh-cn/application-dev/windowmanager/Readme-CN.md
浏览文件 @ 5919c0fe
# 窗口管理
* 窗口
* [窗口开发概述](window-overview.md)
* [窗口开发指导](window-guidelines.md)
* 屏幕属性
* [屏幕属性开发概述](display-overview.md)
* [屏幕属性开发指导](display-guidelines.md)
* 屏幕截图
* [屏幕截图开发概述](screenshot-overview.md)
* [屏幕截图开发指导](screenshot-guidelines.md)
- [窗口开发概述](window-overview.md)
- [窗口开发指导](window-guidelines.md)
zh-cn/application-dev/windowmanager/display-guidelines.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# 屏幕属性开发指导
## 场景介绍
应用通过调用屏幕接口获取默认Display或者所有Display的属性。
## 接口说明
完整版的接口定义请参考API接口说明文件：[屏幕属性](../reference/apis/js-apis-display.md)。
## 开发步骤
通过`getDefaultDisplay(): Promise<Display>`来获取当前默认的`Display`对象，具体代码示例可参考：
```js
import display from '@ohos.display' // 导入模块
let disp; // disp用来保存默认Display
display.getDefaultDisplay().then((disp) => {
console.log('display.getDefaultDisplay success, display :' + JSON.stringify(disp));
}, (err) => {
console.log('display.getDefaultDisplay failed, error : ' + JSON.stringify(err));
})
```
\ No newline at end of file
zh-cn/application-dev/windowmanager/display-overview.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# 屏幕属性开发概述
屏幕具有显示应用窗口布局的能力，屏幕属性包括：屏幕id号、屏幕名称、屏幕启用标识、屏幕状态、屏幕刷新率、屏幕旋转角度、屏幕宽度、屏幕高度、屏幕像素密度、屏幕字体缩放因子和每英寸屏幕的确切物理像素值。
## 基本概念
`Display`：Display指的是对应用可见的屏幕，这是一种抽象的屏幕概念，与真实的物理屏幕不同，可作为窗口容器。
zh-cn/application-dev/windowmanager/screenshot-guidelines.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# 屏幕截图开发指导
## 场景介绍
指定显示设备进行特定参数的屏幕截图。
## 接口说明
完整版的接口定义请参考API接口说明文件：[屏幕截图](../reference/apis/js-apis-screenshot.md)。
## 开发步骤
通过接口`save(options?: ScreenshotOptions): Promise<image.PixelMap>`进行屏幕截图。其中`options`为预定义的截屏参数，如果没有输入`options`，则使用默认截取整屏，具体代码示例可参考：
```js
import screenshot from '@ohos.screenshot' // 导入模块
// 设置屏幕截图参数
var ScreenshotOptions = {
"screenRect": {
"left": 200,
"top": 100,
"width": 200,
"height": 200},
"imageSize": {
"width": 300,
"height": 300},
"rotation": 0
};
let image; // image用来保存屏幕截图
screenshot.save(ScreenshotOptions).then((image) => {
console.log('screenshot.save success, screenshot image :' + JSON.stringify(image));
}, (err) => {
console.log('screenshot.save failed, error : ' + JSON.stringify(err));
})
```
zh-cn/application-dev/windowmanager/screenshot-overview.md 已删除 100644 → 0
浏览文件 @ 78c7b070
# 屏幕截图开发概述
提供指定显示设备下特定参数的屏幕截图能力。
## 基本概念
`screenshot`：提供屏幕截图能力。
zh-cn/readme/Misc软件服务子系统.md
浏览文件 @ 5919c0fe
......@@ -22,5 +22,5 @@
**Misc软件服务子系统**
miscservices\_time
[time_time_service](https://gitee.com/openharmony/time_time_service)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或