提交 06820492 编写于 作者: S sienna1128 提交者: Gitee

Merge branch 'master' of gitee.com:openharmony/docs into master

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
...@@ -8,14 +8,14 @@ ...@@ -8,14 +8,14 @@
- Quick Start - Quick Start
- Getting Started - Getting Started
- [Preparations](quick-start/start-overview.md) - [Preparations](quick-start/start-overview.md)
- [Getting Started with eTS in the Traditional Coding Approach](quick-start/start-with-ets.md) - [Getting Started with eTS in Stage Model](quick-start/start-with-ets-stage.md)
- [Getting Started with eTS in the Low-Code Approach](quick-start/start-with-ets-low-code.md) - [Getting Started with eTS in FA Model](quick-start/start-with-ets-fa.md)
- [Getting Started with JavaScript in the Traditional Coding Approach](quick-start/start-with-js.md) - [Getting Started with JavaScript in FA Model](quick-start/start-with-js-fa.md)
- [Getting Started with JavaScript in the Low-Code Approach](quick-start/start-with-js-low-code.md)
- Development Fundamentals - Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md) - [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md) - [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [SysCap](quick-start/syscap.md) - [SysCap](quick-start/syscap.md)
- [HarmonyAppProvision Configuration File](quick-start/app-provision-structure.md)
- Development - Development
- [Ability Development](ability/Readme-EN.md) - [Ability Development](ability/Readme-EN.md)
- [UI Development](ui/Readme-EN.md) - [UI Development](ui/Readme-EN.md)
...@@ -44,5 +44,8 @@ ...@@ -44,5 +44,8 @@
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md) - [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- APIs - 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 - Contribution
- [How to Contribute](../contribute/documentation-contribution.md) - [How to Contribute](../contribute/documentation-contribution.md)
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
- [Using Native APIs in Application Projects](napi-guidelines.md) - [Using Native APIs in Application Projects](napi-guidelines.md)
- [Drawing Development](drawing-guidelines.md) - [Drawing Development](drawing-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
- [Raw File Development](rawfile-guidelines.md) - [Raw File Development](rawfile-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
...@@ -190,17 +190,10 @@ ...@@ -190,17 +190,10 @@
- [Agent-Powered Scheduled Reminder Development](notification/background-agent-scheduled-reminder-guide.md) - [Agent-Powered Scheduled Reminder Development](notification/background-agent-scheduled-reminder-guide.md)
- [Debugging Assistant Usage](notification/assistant-guidelines.md) - [Debugging Assistant Usage](notification/assistant-guidelines.md)
- Window Manager - Window Manager
- Window
- [Window Overview](windowmanager/window-overview.md) - [Window Overview](windowmanager/window-overview.md)
- [Application Window Development (Stage Mode)](windowmanager/application-window-stage.md) - [Application Window Development (Stage Mode)](windowmanager/application-window-stage.md)
- [Application Window Development (FA Model)](windowmanager/application-window-fa.md) - [Application Window Development (FA Model)](windowmanager/application-window-fa.md)
- [System Window Development (Stage Model Only)](windowmanager/system-window-stage.md) - [System Window Development (Stage Model Only)](windowmanager/system-window-stage.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)
- WebGL - WebGL
- [WebGL Overview](webgl/webgl-overview.md) - [WebGL Overview](webgl/webgl-overview.md)
- [WebGL Development](webgl/webgl-guidelines.md) - [WebGL Development](webgl/webgl-guidelines.md)
......
# Window Manager # Window Manager
* Window - [Window Overview](window-overview.md)
* [Window Overview](window-overview.md) - [System Window Development (Stage Model Only)](application-window-stage.md)
* [System Window Development (Stage Model Only)](application-window-stage.md) - [Application Window Development (FA Model)](application-window-fa.md)
* [Application Window Development (FA Model)](application-window-fa.md) - [Application Window Development (Stage Mode)](system-window-stage.md)
* [Application Window Development (Stage Mode)](system-window-stage.md)
* Display
* [Display Overview](display-overview.md)
* [Display Development](display-guidelines.md)
* Screenshot
* [Screenshot Overview](screenshot-overview.md)
* [Screenshot Development](screenshot-guidelines.md)
# 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.
display.getDefaultDisplay().then((disp) => {
console.log('display.getDefaultDisplay success, display :' + JSON.stringify(disp));
}, (err) => {
console.log('display.getDefaultDisplay failed, error : ' + JSON.stringify(err));
})
```
# 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.
# 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));
})
```
# Screenshot Overview
The screenshot APIs, with parameters, enable you to take screenshots on display devices.
## Basic Concepts
Screenshot: provides the screenshot capability.
...@@ -6,52 +6,56 @@ ...@@ -6,52 +6,56 @@
- [Glossary](../glossary.md) - [Glossary](../glossary.md)
- [Release Notes](../release-notes/Readme.md) - [Release Notes](../release-notes/Readme.md)
- Quick Start - Quick Start
- [Mini and Small Systems](quick-start/quickstart-lite.md) - [Mini and Small Systems](quick-start/quickstart-ide-lite-overview.md)
- [Standard System](quick-start/quickstart-standard.md) - [Standard System](quick-start/quickstart-ide-standard-overview.md)
- Compatibility and Security - Compatibility and Security
- [Privacy and Security](security/Readme-EN.md) - [Privacy and Security](security/Readme-EN.md)
- Porting - Porting
- [Third-Party Library Porting Guide for Mini and Small Systems](porting/porting-thirdparty.md) - Porting Guide
- [Third-Party Library Porting Guide for Mini and Small Systems](porting/porting-thirdparty-overview.md)
- [Mini System SoC Porting Guide](porting/porting-minichip.md) - [Mini System SoC Porting Guide](porting/porting-minichip.md)
- [Mini System SoC Porting Cases](porting/porting-minichip-cases.md) - [Small System SoC Porting Guide](porting/porting-smallchip-prepare-needs.md)
- [Small System SoC Porting Guide](porting/porting-smallchip.md)
- [Standard System SoC Porting Guide](porting/standard-system-porting-guide.md) - [Standard System SoC Porting Guide](porting/standard-system-porting-guide.md)
- Porting Cases
- Mini System SoC Porting Cases
- [Mini-System Devices with Screens — Bestechnic SoC Porting Case](porting/porting-bes2600w-on-minisystem-display-demo.md)
- [Combo Solution — ASR Chip Porting Case](porting/porting-asr582x-combo-demo.md)
- Subsystem Development - Subsystem Development
- Kernel - Kernel
- [Kernel for the Mini System](kernel/kernel-mini.md) - [Kernel for the Mini System](kernel/kernel-mini-overview.md)
- [Kernel for the Small System](kernel/kernel-small.md) - [Kernel for the Small System](kernel/kernel-small-overview.md)
- [Kernel for the Standard System](kernel/kernel-standard.md) - [Kernel for the Standard System](kernel/kernel-standard-overview.md)
- [Driver](driver/Readme-EN.md) - [Driver](driver/Readme-EN.md)
- [Compilation and Building](subsystems/subsys-build.md) - [Compilation and Building](subsystems/subsys-build-all.md)
- [Distributed Remote Startup](subsystems/subsys-remote-start.md) - [Distributed Remote Startup](subsystems/subsys-remote-start.md)
- [Graphics](subsystems/subsys-graphics.md) - [Graphics](subsystems/subsys-graphics-overview.md)
- [Multimedia](subsystems/subsys-multimedia.md) - [Multimedia](subsystems/subsys-multimedia-camera-overview.md)
- [Utils](subsystems/subsys-utils.md) - [Utils](subsystems/subsys-utils-overview.md)
- [AI Framework](subsystems/subsys-aiframework.md) - [AI Framework](subsystems/subsys-aiframework-guide.md)
- [Data Management](subsystems/subsys-data.md) - [Data Management](subsystems/subsys-data-relational-database-overview.md)
- [Sensor](subsystems/subsys-sensor.md) - [Sensor](subsystems/subsys-sensor-overview.md)
- [USB](subsystems/subsys-usbservice.md) - [USB](subsystems/subsys-usbservice-overview.md)
- [Application Framework](subsystems/subsys-application-framework.md) - [Application Framework](subsystems/subsys-application-framework-overview.md)
- [OTA Update](subsystems/subsys-ota-guide.md) - [OTA Update](subsystems/subsys-ota-guide.md)
- [Telephony](subsystems/subsys-tel.md) - [Telephony](subsystems/subsys-tel-overview.md)
- [Security](subsystems/subsys-security.md) - [Security](subsystems/subsys-security-overview.md)
- [Startup](subsystems/subsys-boot.md) - [Startup](subsystems/subsys-boot-overview.md)
- [DFX](subsystems/subsys-dfx.md) - [DFX](subsystems/subsys-dfx-overview.md)
- Featured Topics - Featured Topics
- [HPM Part](hpm-part/Readme-EN.md) - [HPM Part](hpm-part/Readme-EN.md)
- Device Development Examples - Device Development Examples
- [Mini- and Small-System Devices](guide/device-lite.md) - [Mini- and Small-System Devices](guide/device-wlan-led-control.md)
- [Standard-System Devices](guide/device-standard.md) - [Standard-System Devices](guide/device-clock-guide.md)
- Debugging - Debugging
- [Test Case Development](subsystems/subsys-testguide-test.md) - [Test Case Development](subsystems/subsys-testguide-test.md)
- [R&D Tools](subsystems/subsys-toolchain.md) - [R&D Tools](subsystems/subsys-toolchain-hdc-guide.md)
- XTS Certification - XTS Certification
- [XTS Test Case Development](subsystems/subsys-xts-guide.md) - [XTS Test Case Development](subsystems/subsys-xts-guide.md)
- Tools - Tools
- [Docker Environment](get-code/gettools-acquire.md) - [Docker Environment](get-code/gettools-acquire.md)
- [IDE](get-code/gettools-ide.md) - [IDE](get-code/gettools-ide.md)
- Hands-On Tutorials - Hands-On Tutorials
- [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
- [Codelabs](https://gitee.com/openharmony/codelabs) - [Codelabs](https://gitee.com/openharmony/codelabs)
- References - References
- [FAQs](faqs/Readme-EN.md) - [FAQs](faqs/Readme-EN.md)
......
# Tool Acquisition<a name="EN-US_TOPIC_0000001111199422"></a>
- **[Docker Environment](gettools-acquire.md)**
- **[IDE](gettools-ide.md)**
# Source Code Acquisition<a name="EN-US_TOPIC_0000001157319407"></a>
- **[Source Code Acquisition](sourcecode-acquire.md)**
# Development Examples # Development Examples
- [Mini- and Small-System Devices](device-lite.md) - Mini- and Small-System Devices
- [WLAN-connected Products](device-wlan.md) - WLAN-connected Products
- [LED Peripheral Control](device-wlan-led-control.md) - [LED Peripheral Control](device-wlan-led-control.md)
- [Third-Party SDK Integration](device-wlan-sdk.md) - [Third-Party SDK Integration](device-wlan-sdk.md)
- [Cameras Without a Screen](device-iotcamera.md) - Cameras Without a Screen
- [Camera Control](device-iotcamera-control.md) - Camera Control
- [Overview](device-iotcamera-control-overview.md) - [Overview](device-iotcamera-control-overview.md)
- [Development Guidelines](device-iotcamera-control-demo.md) - Development Guidelines
- [Photographing](device-iotcamera-control-demo-photodevguide.md) - [Photographing](device-iotcamera-control-demo-photodevguide.md)
- [Video Recording](device-iotcamera-control-demo-videodevguide.md) - [Video Recording](device-iotcamera-control-demo-videodevguide.md)
- [Use Case](device-iotcamera-control-example.md) - [Use Case](device-iotcamera-control-example.md)
- [Cameras with a Screen](device-camera.md) - Cameras with a Screen
- [Screen and Camera Control](device-camera-control.md) - Screen and Camera Control
- [Overview](device-camera-control-overview.md) - [Overview](device-camera-control-overview.md)
- [Development Guidelines](device-camera-control-demo.md) - Development Guidelines
- [Photographing](device-camera-control-demo-photoguide.md) - [Photographing](device-camera-control-demo-photoguide.md)
- [Video Recording](device-camera-control-demo-videoguide.md) - [Video Recording](device-camera-control-demo-videoguide.md)
- [Previewing](device-camera-control-demo-previewguide.md) - [Previewing](device-camera-control-demo-previewguide.md)
- [Use Case](device-camera-control-example.md) - [Use Case](device-camera-control-example.md)
- [Visual Application Development](device-camera-visual.md) - Visual Application Development
- [Overview](device-camera-visual-overview.md) - [Overview](device-camera-visual-overview.md)
- [Preparations](device-camera-visual-prepare.md) - [Preparations](device-camera-visual-prepare.md)
- [Adding Pages](device-camera-visual-addpage.md) - [Adding Pages](device-camera-visual-addpage.md)
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
- [Debugging and Packaging](device-camera-visual-debug.md) - [Debugging and Packaging](device-camera-visual-debug.md)
- [Running on the Device](device-camera-visual-run.md) - [Running on the Device](device-camera-visual-run.md)
- [FAQs](device-camera-visual-faqs.md) - [FAQs](device-camera-visual-faqs.md)
- [Standard-System Devices](device-standard.md) - Standard-System Devices
- [Development Guidelines on Clock Apps](device-clock-guide.md) - [Development Guidelines on Clock Apps](device-clock-guide.md)
- [Development Example for Platform Drivers](device-driver-demo.md) - [Development Example for Platform Drivers](device-driver-demo.md)
- [Development Example for Peripheral Drivers](device-outerdriver-demo.md) - [Development Example for Peripheral Drivers](device-outerdriver-demo.md)
\ No newline at end of file
# Screen and Camera Control Development<a name="EN-US_TOPIC_0000001054903130"></a>
- **[Photographing](device-camera-control-demo-photoguide.md)**
- **[Video Recording](device-camera-control-demo-videoguide.md)**
- **[Previewing](device-camera-control-demo-previewguide.md)**
# Screen and Camera Control<a name="EN-US_TOPIC_0000001111199426"></a>
- **[Screen and Camera Control Overview](device-camera-control-overview.md)**
- **[Screen and Camera Control Development](device-camera-control-demo.md)**
- **[Use Case](device-camera-control-example.md)**
# Visual Application Development<a name="EN-US_TOPIC_0000001111199420"></a>
- **[Overview](device-camera-visual-overview.md)**
- **[Preparations](device-camera-visual-prepare.md)**
- **[Adding Pages](device-camera-visual-addpage.md)**
- **[Building the Home Page](device-camera-visual-firstpage.md)**
- **[Building the Details Page](device-camera-visual-details.md)**
- **[Debugging and Packaging](device-camera-visual-debug.md)**
- **[Running on the Device](device-camera-visual-run.md)**
- **[FAQs](device-camera-visual-faqs.md)**
# Cameras with a Screen<a name="EN-US_TOPIC_0000001111199430"></a>
- **[Screen and Camera Control](device-camera-control.md)**
- **[Visual Application Development](device-camera-visual.md)**
# Camera Control Development<a name="EN-US_TOPIC_0000001055086133"></a>
- **[Photographing](device-iotcamera-control-demo-photodevguide.md)**
- **[Video Recording](device-iotcamera-control-demo-videodevguide.md)**
# Camera Control<a name="EN-US_TOPIC_0000001157319429"></a>
- **[Camera Control Overview](device-iotcamera-control-overview.md)**
- **[Camera Control Development](device-iotcamera-control-demo.md)**
- **[Use Case](device-iotcamera-control-example.md)**
# Cameras Without a Screen<a name="EN-US_TOPIC_0000001157319403"></a>
- **[Camera Control](device-iotcamera-control.md)**
# Mini- and Small-System Devices<a name="EN-US_TOPIC_0000001135844126"></a>
- **[WLAN-connected Products](device-wlan.md)**
- **[Cameras Without a Screen](device-iotcamera.md)**
- **[Cameras with a Screen](device-camera.md)**
# Standard-System Devices<a name="EN-US_TOPIC_0000001135684346"></a>
- **[Development Guidelines on Clock Apps](device-clock-guide.md)**
- **[Development Example for Platform Drivers](device-driver-demo.md)**
- **[Development Example for Peripheral Drivers](device-outerdriver-demo.md)**
# LED Peripheral Control<a name="EN-US_TOPIC_0000001157319393"></a>
- **[LED Peripheral Control](device-wlan-led-control.md)**
# WLAN-connected Products<a name="EN-US_TOPIC_0000001157479363"></a>
- **[LED Peripheral Control](device-wlan-led.md)**
- **[Third-Party SDK Integration](device-wlan-sdk.md)**
# Devices<a name="EN-US_TOPIC_0000001182003649"></a>
- **[Mini- and Small-System Devices](device-lite.md)**
- **[Standard-System Devices](device-standard.md)**
# Getting Started with Mini and Small Systems
- **[Getting Started with Mini and Small Systems (IDE Mode)](quickstart-lite-ide-directory.md)**
- **[Getting Started with Mini and Small Systems (Installation Package Mode)](quickstart-lite-package-directory.md)**
# Getting Started with Standard System
- **[Getting Started with Standard System (IDE Mode)](quickstart-standard-ide-directory.md)**
- **[Getting Started with Standard System (Installation Package Mode)](quickstart-standard-package-directory.md)**
# Application Framework<a name="EN-US_TOPIC_0000001111199418"></a>
- **[Application Framework Overview](subsys-application-framework-overview.md)**
- **[Setting Up a Development Environment](subsys-application-framework-envbuild.md)**
- **[Development Guidelines](subsys-application-framework-guide.md)**
- **[Development Example](subsys-application-framework-demo.md)**
# init Module
- **[init Configuration File](subsys-boot-init-cfg.md)**
- **[Job Management](subsys-boot-init-jobs.md)**
- **[Service Management](subsys-boot-init-service.md)**
- **[Parameter Management](subsys-boot-init-sysparam.md)**
- **[Sandbox Management](subsys-boot-init-sandbox.md)**
- **[Plug-in Management](subsys-boot-init-plugin.md)**
# Startup<a name="EN-US_TOPIC_0000001157319415"></a>
- **[Startup](subsys-boot-overview.md)**
- **[init Module](subsys-boot-init.md)**
- **[appspawn Module](subsys-boot-appspawn.md)**
- **[bootstrap Module](subsys-boot-bootstrap.md)**
- **[FAQs](subsys-boot-faqs.md)**
- **[Reference](subsys-boot-ref.md)**
# Compilation and Building
- **[Compilation and Building Guide](subsys-build-all.md)**
- **[Build System Coding Specifications and Best Practices](subsys-build-gn-coding-style-and-best-practice.md)**
- **[Building the Kconfig Visual Configuration](subsys-build-gn-kconfig-visual-config-guide.md)**
# RDB
- **[RDB Overview](subsys-data-relational-database-overview.md)**
- **[RDB Development](subsys-data-relational-database-guide.md)**
# Lightweight Data Store
- **[Lightweight Data Store Overview](subsys-data-storage-overview.md)**
- **[Lightweight Data Store Development](subsys-data-storage-guide.md)**
# Data Management
- **[RDB](subsys-data-relational-database.md)**
- **[Lightweight Data Store](subsys-data-storage.md)**
# HiSysEvent Development<a name="EN-US_TOPIC_0000001195021448"></a>
- **[HiSysEvent Overview](subsys-dfx-hisysevent-overview.md)**
- **[HiSysEvent Logging Configuration](subsys-dfx-hisysevent-logging-config.md)**
- **[HiSysEvent Logging](subsys-dfx-hisysevent-logging.md)**
- **[HiSysEvent Listening](subsys-dfx-hisysevent-listening.md)**
- **[HiSysEvent Query](subsys-dfx-hisysevent-query.md)**
- **[HiSysEvent Tool Usage](subsys-dfx-hisysevent-tool.md)**
# DFX Development Guide
- **[DFX Overview](subsys-dfx-overview.md)**
- **[HiLog Development](subsys-dfx-hilog-rich.md)**
- **[HiLog_Lite Development](subsys-dfx-hilog-lite.md)**
- **[HiTrace Development](subsys-dfx-hitrace.md)**
- **[HiCollie Development](subsys-dfx-hicollie.md)**
- **[HiSysEvent Development](subsys-dfx-hisysevent.md)**
- **[HiDumper Development](subsys-dfx-hidumper.md)**
- **[HiChecker Development](subsys-dfx-hichecker.md)**
- **[Hiview Development](subsys-dfx-hiview.md)**
# Graphics<a name="EN-US_TOPIC_0000001157479391"></a>
- **[Graphics Overview](subsys-graphics-overview.md)**
- **[Container Component Development](subsys-graphics-container-guide.md)**
- **[Development of Layout Container Components](subsys-graphics-layout-guide.md)**
- **[Common Component Development](subsys-graphics-common-guide.md)**
- **[Animator Development](subsys-graphics-animation-guide.md)**
# Camera<a name="EN-US_TOPIC_0000001111199462"></a>
- **[Camera Overview](subsys-multimedia-camera-overview.md)**
- **[Photographing Development](subsys-multimedia-camera-photo-guide.md)**
- **[Video Recording Development](subsys-multimedia-camera-record-guide.md)**
- **[Previewing Development](subsys-multimedia-camera-preview-guide.md)**
# Audio/Video<a name="EN-US_TOPIC_0000001157479403"></a>
- **[Audio/Video Overview](subsys-multimedia-video-overview.md)**
- **[Audio/Video Playback Development](subsys-multimedia-video-play-guide.md)**
- **[Audio/Video Recording Development](subsys-multimedia-video-record-guide.md)**
# Multimedia<a name="EN-US_TOPIC_0000001111039522"></a>
- **[Camera](subsys-multimedia-camera.md)**
- **[Audio/Video](subsys-multimedia-video.md)**
# Update
- **[OTA Update](subsys-ota-guide.md)**
\ No newline at end of file
# Security<a name="EN-US_TOPIC_0000001157319395"></a>
- **[Security Overview](subsys-security-overview.md)**
- **[Development on Application Signature Verification](subsys-security-sigverify.md)**
- **[Development on Application Permission Management](subsys-security-rightmanagement.md)**
- **[Development on IPC Authentication](subsys-security-communicationverify.md)**
- **[Development on Device Security Level Management](subsys-security-devicesecuritylevel.md)**
# Sensor<a name="EN-US_TOPIC_0000001111039534"></a>
- **[Sensor Overview](subsys-sensor-overview.md)**
- **[Sensor Usage Guidelines](subsys-sensor-guide.md)**
- **[Sensor Usage Example](subsys-sensor-demo.md)**
# Setting Up the Environment
## Basic Test Framework Environment
| Environment | Operating System | Linux Extended Component | Python | Python Plug-ins | NFS Server | HDC |
| ------------ | ------------ | ------------ | ------------ | ------------ | ------------ | ------------ |
| Version | Ubuntu 18.04 or later | libreadline-dev | 3.7.5 or later | - pySerial 3.3 or later<br>- Paramiko 2.7.1 or later<br>- Setuptools 40.8.0 or later<br>- rsa4.0 or later | haneWIN NFS Server 1.2.50 or later, or NFS v4 or later | 1.1.0 or later |
| Description | Provides code build environment. | Plug-in used to read commands. | Language used by the test framework. | - pySerial: supports Python serial port communication. <br>- Paramiko: allows Python to use SSH. <br>- Setuptools: allows Python packages to be created and distributed easily. <br>- rsa: implements RSA encryption in Python. | Enables devices to be connected through the serial port. | A tool that enables devices to be connected through the HarmonyOS Device Connector (HDC). |
## Installation Process
1. Run the following command to install the Linux extended component libreadline:
```
sudo apt-get install libreadline-dev
```
The installation is successful if the following information is displayed:
```
Reading package lists... Done
Building dependency tree
Reading state information... Done
libreadline-dev is already the newest version (7.0-3).
0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded.
```
2. Run the following command to install the Setuptools plug-in:
```
pip3 install setuptools
```
The installation is successful if the following information is displayed:
```
Requirement already satisfied: setuptools in d:\programs\python37\lib\site-packages (41.2.0)
```
3. Run the following command to install the Paramiko plug-in:
```
pip3 install paramiko
```
The installation is successful if the following information is displayed:
```
Installing collected packages: pycparser, cffi, pynacl, bcrypt, cryptography, paramiko
Successfully installed bcrypt-3.2.0 cffi-1.14.4 cryptography-3.3.1 paramiko-2.7.2 pycparser-2.20 pynacl-1.4.0
```
4. Run the following command to install the ras plug-in:
```
pip3 install rsa
```
The installation is successful if the following information is displayed:
```
Installing collected packages: pyasn1, rsa
Successfully installed pyasn1-0.4.8 rsa-4.7
```
5. Run the following command to install the pySerial plug-in:
```
pip3 install pyserial
```
The installation is successful if the following information is displayed:
```
Requirement already satisfied: pyserial in d:\programs\python37\lib\site-packages\pyserial-3.4-py3.7.egg (3.4)
```
6. Install the NFS server if the device outputs results only through the serial port.
- In Windows, install, for example, haneWIN NFS Server 1.2.50.
- In Linux, run the following command to install the NFS server:
```
sudo apt install nfs-kernel-server
```
The installation is successful if the following information is displayed:
```
Reading package lists... Done
Building dependency tree
Reading state information... Done
nfs-kernel-server is already the newest version (1:1.3.4-2.1ubuntu5.3).
0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded.
```
7. Install the HDC tool if the device supports HDC connections. For details about the installation process, see [Readme](https://gitee.com/openharmony/developtools_hdc_standard/blob/master/README.md).
## Checking the Environment
| Check Item | Operation | Expected Result |
| --- | --- | --- |
| Whether Python is successfully installed | Run the **python --version** command. | The Python version is 3.7.5 or later. |
| Whether Python plug-ins are successfully installed | Go to the **test/developertest** directory and run **start.bat** or **start.sh**. | The **>>>** prompt is displayed. |
| NFS server status (for the devices that support only serial port output) | Log in to the development board through the serial port and run the **mount** command to mount the NFS. | The file directory can be mounted. |
| Whether HDC tool is successfully installed | Run the **hdc_std -v** command. | The HDC version is 1.1.0 or later. |
# R&D Tools<a name="EN-US_TOPIC_0000001157319389"></a>
- **[bytrace](subsys-toolchain-bytrace-guide.md)**
- **[hdc\_std](subsys-toolchain-hdc-guide.md)**
- **[hiperf](subsys-toolchain-hiperf.md)**
# USB<a name="EN-US_TOPIC_0000001052857351"></a>
- **[USB Overview](subsys-usbservice-overview.md)**
- **[USB Usage Guidelines](subsys-usbservice-guide.md)**
- **[USB Usage Example](subsys-usbservice-demo.md)**
# Utils<a name="EN-US_TOPIC_0000001157319385"></a>
- **[Utils Overview](subsys-utils-overview.md)**
- **[Utils Development](subsys-utils-guide.md)**
- **[Utils FAQ](subsys-utils-faqs.md)**
# Subsystem Development Guidelines<a name="EN-US_TOPIC_0000001111199452"></a>
- **[Compilation and Building](subsys-build.md)**
- **[Distributed Remote Startup](subsys-remote-start.md)**
- **[Graphics](subsys-graphics.md)**
- **[Multimedia](subsys-multimedia.md)**
- **[Utils](subsys-utils.md)**
- **[AI Framework](subsys-aiframework.md)**
- **[Data Management](subsys-data.md)**
- **[Sensor](subsys-sensor.md)**
- **[USB](subsys-usbservice.md)**
- **[Application Framework](subsys-application-framework.md)**
- **[OTA Updade](subsys-ota-guide.md)**
- **[Telephony](subsys-tel.md)**
- **[Security](subsys-security.md)**
- **[Startup](subsys-boot.md)**
- **[Test Case Development](subsys-testguide-test.md)**
- **[DFX](subsys-dfx.md)**
- **[R&D Tools](subsys-toolchain.md)**
- **[XTS Test Case Development](subsys-xts-guide.md)**
# Vibrator开发概述 # Vibrator开发概述
马达振动服务最大化开放硬工最新马达器件能力,通过拓展原生马达服务实现振动与交互融合设计,打造细腻精致的一体化振动体验和差异化体验,提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。 振动器模块服务最大化开放硬工最新马达器件能力,通过拓展原生马达服务实现振动与交互融合设计,打造细腻精致的一体化振动体验和差异化体验,提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。
## 运作机制 ## 运作机制
...@@ -23,7 +23,7 @@ Vibrator属于控制类小器件,主要包含以下四个模块:Vibrator API ...@@ -23,7 +23,7 @@ Vibrator属于控制类小器件,主要包含以下四个模块:Vibrator API
## 约束与限制 ## 约束与限制
在使用振动器时,开发者需要配置请求振动器的权限ohos.permission.VIBRATE,才能控制振动器振动,敏感级别是system_grant。 在使用振动器时,开发者需要配置请求振动器的权限ohos.permission.VIBRATE,才能控制振动器振动,权限类型是system_grant。
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
适用于:OpenHarmony SDK 3.2.2.5版本 适用于:OpenHarmony SDK 3.2.2.5版本
日志打印的长度限制为1024,该长度不能配置。 日志打印的长度限制为1024个字符,该长度不能配置。
## 为什么有时候直接用IDE安装HAP包到开发板上无法打开? ## 为什么有时候直接用IDE安装HAP包到开发板上无法打开?
......
# 开发参考 # 开发参考
- [组件参考(基于TS扩展的声明式开发范式)](arkui-ts/Readme-CN.md) - [组件参考(基于eTS的声明式开发范式)](arkui-ts/Readme-CN.md)
- [组件参考(基于JS扩展的类Web开发范式)](arkui-js/Readme-CN.md) - [组件参考(兼容JS的类Web开发范式)](arkui-js/Readme-CN.md)
- [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
- [接口参考(JS及TS API)](apis/Readme-CN.md) - [接口参考(JS及TS API)](apis/Readme-CN.md)
- 接口参考(Native API) - 接口参考(Native API)
......
...@@ -381,6 +381,53 @@ context.getDisplayOrientation().then((data) => { ...@@ -381,6 +381,53 @@ context.getDisplayOrientation().then((data) => {
}); });
``` ```
## Context.getExternalCacheDir
getExternalCacheDir(callback: AsyncCallback\<string>): void
获取应用程序的外部缓存目录(callback形式)。
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| -------- | ---------------------- | ---- | ------------------ |
| callback | AsyncCallback\<string> | 是 | 返回应用程序的缓存目录的绝对路径。 |
**示例:**
```js
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext();
context.getExternalCacheDir()
```
## Context.getExternalCacheDir
getExternalCacheDir(): Promise\<string>;
获取应用程序的外部缓存目录(Promise形式)。
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core
**返回值:**
| 类型 | 说明 |
| ---------------- | ---------------- |
| Promise\<string> | 返回应用程序的缓存目录的绝对路径。 |
**示例:**
```js
import featureAbility from '@ohos.ability.featureAbility'
var context = featureAbility.getContext();
context.getExternalCacheDir().then((data) => {
console.info("=======================>getExternalCacheDirCallback====================>");
console.info("====>data====>" + JSON.stringify(data));
});
```
## Context.setDisplayOrientation<sup>7+</sup> ## Context.setDisplayOrientation<sup>7+</sup>
setDisplayOrientation(orientation: bundle.DisplayOrientation, callback: AsyncCallback\<void>): void setDisplayOrientation(orientation: bundle.DisplayOrientation, callback: AsyncCallback\<void>): void
......
...@@ -892,8 +892,6 @@ startAbilityByCall(want: Want): Promise&lt;Caller&gt;; ...@@ -892,8 +892,6 @@ startAbilityByCall(want: Want): Promise&lt;Caller&gt;;
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core **系统能力**:SystemCapability.Ability.AbilityRuntime.Core
**系统API**: 此接口为系统接口,三方应用不支持调用。
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
......
...@@ -94,7 +94,7 @@ verifyAccessTokenSync(tokenID: number, permissionName: string): GrantStatus ...@@ -94,7 +94,7 @@ verifyAccessTokenSync(tokenID: number, permissionName: string): GrantStatus
```js ```js
var AtManager = abilityAccessCtrl.createAtManager(); var AtManager = abilityAccessCtrl.createAtManager();
let tokenID = 0; let tokenID = 0;
let data = verifyAccessTokenSync(tokenID, "ohos.permission.GRANT_SENSITIVE_PERMISSIONS"); let data = AtManager.verifyAccessTokenSync(tokenID, "ohos.permission.GRANT_SENSITIVE_PERMISSIONS");
console.log(`data->${JSON.stringify(data)}`); console.log(`data->${JSON.stringify(data)}`);
``` ```
......
...@@ -49,6 +49,7 @@ import Want from '@ohos.application.Want'; ...@@ -49,6 +49,7 @@ import Want from '@ohos.application.Want';
- 传递FD数据,FD表示文件描述符(FileDescriptor) - 传递FD数据,FD表示文件描述符(FileDescriptor)
``` js ``` js
import fileio from '@ohos.fileio';
var fd; var fd;
try { try {
fd = fileio.openSync("/data/storage/el2/base/haps/pic.png"); fd = fileio.openSync("/data/storage/el2/base/haps/pic.png");
...@@ -59,7 +60,7 @@ import Want from '@ohos.application.Want'; ...@@ -59,7 +60,7 @@ import Want from '@ohos.application.Want';
"deviceId": "", // deviceId为空表示本设备 "deviceId": "", // deviceId为空表示本设备
"bundleName": "com.extreme.test", "bundleName": "com.extreme.test",
"abilityName": "MainAbility", "abilityName": "MainAbility",
"moduleName": "entry" // moduleName非必选 "moduleName": "entry", // moduleName非必选
"parameters": { "parameters": {
"keyFd":{"type":"FD", "value":fd} "keyFd":{"type":"FD", "value":fd}
} }
......
...@@ -644,8 +644,7 @@ off(method: string): void; ...@@ -644,8 +644,7 @@ off(method: string): void;
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| (msg: string) | function | 是 | 否 | 调用者注册的侦听器函数接口的原型。 | | (msg: string) | function | 是 | 否 | 调用者注册的侦听器函数接口的原型。 |
## CalleeCallBack
## CalleeCallBack
(indata: rpc.MessageParcel): rpc.Sequenceable; (indata: rpc.MessageParcel): rpc.Sequenceable;
......
...@@ -96,7 +96,7 @@ onMemoryLevel(level: AbilityConstant.MemoryLevel): void; ...@@ -96,7 +96,7 @@ onMemoryLevel(level: AbilityConstant.MemoryLevel): void;
当系统已决定调整内存时调用。例如,当该功能在后台运行时,没有足够的内存来运行尽可能多的后台进程时可以使用。 当系统已决定调整内存时调用。例如,当该功能在后台运行时,没有足够的内存来运行尽可能多的后台进程时可以使用。
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core **系统能力**:SystemCapability.Ability.AbilityRuntime.AbilityCore
**参数:** **参数:**
......
...@@ -185,14 +185,12 @@ getProcessRunningInfos(): Promise\<Array\<ProcessRunningInfo>>; ...@@ -185,14 +185,12 @@ getProcessRunningInfos(): Promise\<Array\<ProcessRunningInfo>>;
## appManager.getProcessRunningInfos<sup>(deprecated)</sup> ## appManager.getProcessRunningInfos<sup>(deprecated)</sup>
> **说明:**
>
> 从 API Version 9 开始废弃,建议使用[appManager.getProcessRunningInformation<sup>9+</sup>](#appmanagergetprocessrunninginformation9-1)替代。
getProcessRunningInfos(callback: AsyncCallback\<Array\<ProcessRunningInfo>>): void; getProcessRunningInfos(callback: AsyncCallback\<Array\<ProcessRunningInfo>>): void;
获取有关运行进程的信息。 获取有关运行进程的信息。
> 从 API Version 9 开始废弃,建议使用[appManager.getProcessRunningInformation<sup>9+</sup>](#appmanagergetprocessrunninginformation9-1)替代。
**需要权限**:ohos.permission.GET_RUNNING_INFO **需要权限**:ohos.permission.GET_RUNNING_INFO
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core **系统能力**:SystemCapability.Ability.AbilityRuntime.Core
...@@ -706,9 +704,14 @@ onForegroundApplicationChanged(appStateData: AppStateData): void; ...@@ -706,9 +704,14 @@ onForegroundApplicationChanged(appStateData: AppStateData): void;
**示例:** **示例:**
```js ```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver' var applicationStateObserver = {
const foregroundApplicationInfo = ApplicationStateObserver.onForegroundApplicationChanged(); onForegroundApplicationChanged(appStateData) {
console.log('-------- foregroundApplicationInfo: ---------', foregroundApplicationInfo); console.log('------------ onForegroundApplicationChanged -----------', appStateData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
``` ```
## ApplicationStateObserver.onAbilityStateChanged<sup>8+</sup> ## ApplicationStateObserver.onAbilityStateChanged<sup>8+</sup>
...@@ -730,9 +733,13 @@ onAbilityStateChanged(abilityStateData: AbilityStateData): void; ...@@ -730,9 +733,13 @@ onAbilityStateChanged(abilityStateData: AbilityStateData): void;
**示例:** **示例:**
```js ```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver' var applicationStateObserver = {
const abilityStateChangedInfo = ApplicationStateObserver.onAbilityStateChanged(); onAbilityStateChanged(abilityStateData) {
console.log('-------- abilityStateChangedInfo: ---------', abilityStateChangedInfo); console.log('------------ onAbilityStateChanged -----------', abilityStateData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
``` ```
## ApplicationStateObserver.onProcessCreated<sup>8+</sup> ## ApplicationStateObserver.onProcessCreated<sup>8+</sup>
...@@ -754,9 +761,13 @@ onProcessCreated(processData: ProcessData): void; ...@@ -754,9 +761,13 @@ onProcessCreated(processData: ProcessData): void;
**示例:** **示例:**
```js ```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver' var applicationStateObserver = {
const processCreatedInfo = ApplicationStateObserver.onProcessCreated(); onProcessCreated(processData) {
console.log('-------- processCreatedInfo: ---------', processCreatedInfo); console.log('------------ onProcessCreated -----------', processData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
``` ```
## ApplicationStateObserver.onProcessDied<sup>8+</sup> ## ApplicationStateObserver.onProcessDied<sup>8+</sup>
...@@ -778,9 +789,13 @@ onProcessDied(processData: ProcessData): void; ...@@ -778,9 +789,13 @@ onProcessDied(processData: ProcessData): void;
**示例:** **示例:**
```js ```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver' var applicationStateObserver = {
const processDiedInfo = ApplicationStateObserver.onProcessDied(); onProcessDied(processData) {
console.log('-------- processDiedInfo: ---------', processDiedInfo); console.log('------------ onProcessDied -----------', processData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
``` ```
## AppStateData ## AppStateData
......
...@@ -2375,7 +2375,7 @@ try { ...@@ -2375,7 +2375,7 @@ try {
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| name | string | 是 | 数据库文件名。 | | name | string | 是 | 数据库文件名。 |
| encrypt | boolean | 否 | 指定数据库是否加密。<br>true:加密。<br>false:非加密。 | | encrypt<sup>9+</sup> | boolean | 否 | 指定数据库是否加密。<br>true:加密。<br>false:非加密。 |
## ValueType ## ValueType
......
...@@ -560,7 +560,7 @@ try { ...@@ -560,7 +560,7 @@ try {
on(event: 'distributedDataServiceDie', deathCallback: Callback&lt;void&gt;): void on(event: 'distributedDataServiceDie', deathCallback: Callback&lt;void&gt;): void
订阅服务状态变更通知。 订阅服务状态变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。 **系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。
...@@ -592,7 +592,7 @@ try { ...@@ -592,7 +592,7 @@ try {
off(event: 'distributedDataServiceDie', deathCallback?: Callback&lt;void&gt;): void off(event: 'distributedDataServiceDie', deathCallback?: Callback&lt;void&gt;): void
取消订阅服务状态变更通知。 取消订阅服务状态变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。 **系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。
...@@ -2584,7 +2584,7 @@ try { ...@@ -2584,7 +2584,7 @@ try {
on(event: 'dataChange', type: SubscribeType, listener: Callback&lt;ChangeNotification&gt;): void on(event: 'dataChange', type: SubscribeType, listener: Callback&lt;ChangeNotification&gt;): void
订阅指定类型的数据变更通知。 订阅指定类型的数据变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -2610,7 +2610,7 @@ kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_LOCAL, fun ...@@ -2610,7 +2610,7 @@ kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_LOCAL, fun
on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
订阅同步完成事件回调通知。 订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -2634,7 +2634,7 @@ kvStore.on('syncComplete', function (data) { ...@@ -2634,7 +2634,7 @@ kvStore.on('syncComplete', function (data) {
off(event:'dataChange', listener?: Callback&lt;ChangeNotification&gt;): void off(event:'dataChange', listener?: Callback&lt;ChangeNotification&gt;): void
取消订阅数据变更通知。 取消订阅数据变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -2670,7 +2670,7 @@ class KvstoreModel { ...@@ -2670,7 +2670,7 @@ class KvstoreModel {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅数据变更通知,此方法为同步方法。 取消订阅同步完成事件回调通知,此方法为同步方法。
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -4271,7 +4271,7 @@ try { ...@@ -4271,7 +4271,7 @@ try {
on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
订阅同步完成事件回调通知。 订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -4307,7 +4307,7 @@ try { ...@@ -4307,7 +4307,7 @@ try {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅同步完成事件回调通知。 取消订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -5781,7 +5781,7 @@ try { ...@@ -5781,7 +5781,7 @@ try {
on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
订阅同步完成事件回调通知。 订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
...@@ -5817,7 +5817,7 @@ try { ...@@ -5817,7 +5817,7 @@ try {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅同步完成事件回调通知,方法为同步方法。 取消订阅同步完成事件回调通知,方法为同步方法。
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core **系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......
...@@ -33,8 +33,7 @@ var observer = { ...@@ -33,8 +33,7 @@ var observer = {
console.log('onUnhandledException, errorMsg: ', errorMsg) console.log('onUnhandledException, errorMsg: ', errorMsg)
} }
} }
const registerErrorObserverNumber=errorManager.registerErrorObserver(observer) errorManager.registerErrorObserver(observer)
console.info(registerErrorObserverNumber)
``` ```
## ErrorManager.unregisterErrorObserver ## ErrorManager.unregisterErrorObserver
...@@ -123,11 +122,4 @@ var observer = { ...@@ -123,11 +122,4 @@ var observer = {
} }
} }
errorManager.registerErrorObserver(observer) errorManager.registerErrorObserver(observer)
.then((data) => {
console.log('----------- registerErrorObserver success ----------', data);
})
.catch((err) => {
console.log('----------- registerErrorObserver fail ----------', err);
})
``` ```
\ No newline at end of file
...@@ -105,7 +105,7 @@ import formInfo from '@ohos.application.formInfo'; ...@@ -105,7 +105,7 @@ import formInfo from '@ohos.application.formInfo';
| TEMPORARY_KEY | "ohos.extra.param.key.form_temporary" | 临时卡片。 | | TEMPORARY_KEY | "ohos.extra.param.key.form_temporary" | 临时卡片。 |
| ABILITY_NAME_KEY<sup>9+</sup> | "ohos.extra.param.key.ability_name" | ability名称 | | ABILITY_NAME_KEY<sup>9+</sup> | "ohos.extra.param.key.ability_name" | ability名称 |
| DEVICE_ID_KEY<sup>9+</sup> | "ohos.extra.param.key.device_id" | 设备标识。<br/>此接口为系统接口。 | | DEVICE_ID_KEY<sup>9+</sup> | "ohos.extra.param.key.device_id" | 设备标识。<br/>此接口为系统接口。 |
| BUNDLE_NAME_KEY<sup>9+</sup> | "ohos.extra.param.key.bundle_name" | 指示指定要获取的捆绑包名称的键。<br/>此接口为系统接口。 | | BUNDLE_NAME_KEY<sup>9+</sup> | "ohos.extra.param.key.bundle_name" | 指示指定要获取的捆绑包名称的键。|
## FormDimension ## FormDimension
......
...@@ -42,6 +42,12 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n ...@@ -42,6 +42,12 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n
**示例:** **示例:**
```js ```js
import bundle from '@ohos.bundle';
import privacyManager from '@ohos.privacyManager';
let bundleName = "com.ohos.permissionmanager"; // change to your bundle name
let appInfo = await bundle.getApplicationInfo(bundleName, 16); // need async type function
var tokenID = appInfo.accessTokenId; // 可以通过getApplicationInfo获取accessTokenId var tokenID = appInfo.accessTokenId; // 可以通过getApplicationInfo获取accessTokenId
privacyManager.addPermissionUsedRecord(tokenID, "ohos.permission.PERMISSION_USED_STATS", 1, 0).then(data => { privacyManager.addPermissionUsedRecord(tokenID, "ohos.permission.PERMISSION_USED_STATS", 1, 0).then(data => {
console.log(`promise: data->${JSON.stringify(data)}`); console.log(`promise: data->${JSON.stringify(data)}`);
...@@ -72,8 +78,14 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n ...@@ -72,8 +78,14 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n
**示例:** **示例:**
```js ```js
import bundle from '@ohos.bundle';
import privacyManager from '@ohos.privacyManager';
let bundleName = "com.ohos.permissionmanager"; // change to your bundle name
let appInfo = await bundle.getApplicationInfo(bundleName, 16); // need async type function
var tokenID = appInfo.accessTokenId; // 可以通过getApplicationInfo获取accessTokenId var tokenID = appInfo.accessTokenId; // 可以通过getApplicationInfo获取accessTokenId
privacyManager.privacyManager.addPermissionUsedRecord(tokenID, "ohos.permission.PERMISSION_USED_STATS", 1, 0, (err, data) => { privacyManager.addPermissionUsedRecord(tokenID, "ohos.permission.PERMISSION_USED_STATS", 1, 0, (err, data) => {
console.log(`callback: data->${JSON.stringify(data)}`); console.log(`callback: data->${JSON.stringify(data)}`);
}); });
``` ```
...@@ -105,10 +117,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest): Promise&lt;PermissionU ...@@ -105,10 +117,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest): Promise&lt;PermissionU
```js ```js
let request = { let request = {
"tokenId": 1, "tokenId": 1,
"isRemote": 1, "isRemote": false,
"deviceId": "device", "deviceId": "device",
"bundleName": "bundle", "bundleName": "bundle",
"permissionNames": 1, "permissionNames": [],
"beginTime": 0, "beginTime": 0,
"endTime": 1, "endTime": 1,
"flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL, "flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL,
...@@ -140,10 +152,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest, callback: AsyncCallback ...@@ -140,10 +152,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest, callback: AsyncCallback
```js ```js
let request = { let request = {
"tokenId": 1, "tokenId": 1,
"isRemote": 1, "isRemote": false,
"deviceId": "device", "deviceId": "device",
"bundleName": "bundle", "bundleName": "bundle",
"permissionNames": 1, "permissionNames": [],
"beginTime": 0, "beginTime": 0,
"endTime": 1, "endTime": 1,
"flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL, "flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL,
......
...@@ -21,25 +21,28 @@ showToast(options: ShowToastOptions): void ...@@ -21,25 +21,28 @@ showToast(options: ShowToastOptions): void
**系统能力:** SystemCapability.ArkUI.ArkUI.Full **系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------------- | ---- | ------- | | ------- | ------------------------------------- | ---- | ------- |
| options | [ShowToastOptions](#showtoastoptions) | 是 | 文本弹窗选项。 | | options | [ShowToastOptions](#showtoastoptions) | 是 | 文本弹窗选项。 |
**示例:** **示例:**
```js
```js
prompt.showToast({ prompt.showToast({
message: 'Message Info', message: 'Message Info',
duration: 2000, duration: 2000,
}); });
``` ```
## ShowToastOptions ## ShowToastOptions
文本提示框的选项。 文本提示框的选项。
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ------ | ---------------------------------------- | | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是 | 显示的文本信息。 | | message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是 | 显示的文本信息。 |
| duration | number | 否 | 默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。 | | duration | number | 否 | 默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。 |
| bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 | | bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 |
...@@ -53,6 +56,7 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt; ...@@ -53,6 +56,7 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
**系统能力:** SystemCapability.ArkUI.ArkUI.Full **系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------ | | ------- | --------------------------------------- | ---- | ------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 对话框选项。 | | options | [ShowDialogOptions](#showdialogoptions) | 是 | 对话框选项。 |
...@@ -65,7 +69,7 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt; ...@@ -65,7 +69,7 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
**示例:** **示例:**
```js ```js
prompt.showDialog({ prompt.showDialog({
title: 'Title Info', title: 'Title Info',
message: 'Message Info', message: 'Message Info',
...@@ -86,7 +90,7 @@ prompt.showDialog({ ...@@ -86,7 +90,7 @@ prompt.showDialog({
.catch(err => { .catch(err => {
console.info('showDialog error: ' + err); console.info('showDialog error: ' + err);
}) })
``` ```
## prompt.showDialog ## prompt.showDialog
...@@ -96,15 +100,16 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSucc ...@@ -96,15 +100,16 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSucc
**系统能力:** SystemCapability.ArkUI.ArkUI.Full **系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------ | | -------- | ---------------------------------------- | ---- | ------------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 页面显示对话框信息描述。 | | options | [ShowDialogOptions](#showdialogoptions) | 是 | 页面显示对话框信息描述。 |
| callback | AsyncCallback&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 是 | 对话框响应结果回调。 | | callback | AsyncCallback&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 是 | 对话框响应结果回调。 |
**示例:** **示例:**
```js
```js
prompt.showDialog({ prompt.showDialog({
title: 'showDialog Title Info', title: 'showDialog Title Info',
message: 'Message Info', message: 'Message Info',
...@@ -125,13 +130,13 @@ prompt.showDialog({ ...@@ -125,13 +130,13 @@ prompt.showDialog({
} }
console.info('showDialog success callback, click button: ' + data.index); console.info('showDialog success callback, click button: ' + data.index);
}); });
``` ```
## ShowDialogOptions ## ShowDialogOptions
对话框的选项。 对话框的选项。
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 必填 | 说明 | | 名称 | 类型 | 必填 | 说明 |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- | | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
...@@ -143,7 +148,7 @@ prompt.showDialog({ ...@@ -143,7 +148,7 @@ prompt.showDialog({
对话框的响应结果。 对话框的响应结果。
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **系统能力:** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 说明 | | 名称 | 类型 | 说明 |
| ----- | ------ | ------------------- | | ----- | ------ | ------------------- |
...@@ -159,6 +164,7 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu ...@@ -159,6 +164,7 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。 **系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | --------- | | -------- | ---------------------------------------- | ---- | --------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 | | options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
...@@ -166,7 +172,8 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu ...@@ -166,7 +172,8 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
**示例:** **示例:**
```js
```js
prompt.showActionMenu({ prompt.showActionMenu({
title: 'Title Info', title: 'Title Info',
buttons: [ buttons: [
...@@ -186,7 +193,7 @@ prompt.showActionMenu({ ...@@ -186,7 +193,7 @@ prompt.showActionMenu({
} }
console.info('showActionMenu success callback, click button: ' + data.index); console.info('showActionMenu success callback, click button: ' + data.index);
}) })
``` ```
## prompt.showActionMenu ## prompt.showActionMenu
...@@ -197,17 +204,20 @@ showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse ...@@ -197,17 +204,20 @@ showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse
**系统能力:** SystemCapability.ArkUI.ArkUI.Full **系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------- | | ------- | --------------------------------------- | ---- | ------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 | | options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | ------- | | ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 | | Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 |
**示例:** **示例:**
```js
```js
prompt.showActionMenu({ prompt.showActionMenu({
title: 'showActionMenu Title Info', title: 'showActionMenu Title Info',
buttons: [ buttons: [
...@@ -227,7 +237,7 @@ prompt.showActionMenu({ ...@@ -227,7 +237,7 @@ prompt.showActionMenu({
.catch(err => { .catch(err => {
console.info('showActionMenu error: ' + err); console.info('showActionMenu error: ' + err);
}) })
``` ```
## ActionMenuOptions ## ActionMenuOptions
操作菜单的选项。 操作菜单的选项。
......
...@@ -66,6 +66,7 @@ writeRemoteObject(object: [IRemoteObject](#iremoteobject)): boolean ...@@ -66,6 +66,7 @@ writeRemoteObject(object: [IRemoteObject](#iremoteobject)): boolean
**系统能力**:SystemCapability.Communication.IPC.Core **系统能力**:SystemCapability.Communication.IPC.Core
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| object | [IRemoteObject](#iremoteobject) | 是 | 要序列化并写入MessageParcel的远程对象。 | | object | [IRemoteObject](#iremoteobject) | 是 | 要序列化并写入MessageParcel的远程对象。 |
...@@ -156,6 +157,7 @@ writeInterfaceToken(token: string): boolean ...@@ -156,6 +157,7 @@ writeInterfaceToken(token: string): boolean
**系统能力**:SystemCapability.Communication.IPC.Core **系统能力**:SystemCapability.Communication.IPC.Core
**参数:** **参数:**
| 参数名 | 类型 | 必填 | 说明 | | 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| token | string | 是 | 字符串类型描述符。 | | token | string | 是 | 字符串类型描述符。 |
......
# 基于JS扩展的类Web开发范式 # 兼容JS的类Web开发范式
- 组件通用信息 - 组件通用信息
- [通用属性](js-components-common-attributes.md) - [通用属性](js-components-common-attributes.md)
......
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件: 除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件:
- 当input类型为text、email、date、time、number、password时,支持如下事件: - 当input类型为text、email、date、time、number、password时,支持如下事件:
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;value: inputValue<br>&nbsp;} | 输入框输入内容发生变化时触发该事件,返回用户当前输入值。<br/>改变value属性值不会触发该回调。 | | change | {<br>&nbsp;value: inputValue<br>&nbsp;} | 输入框输入内容发生变化时触发该事件,返回用户当前输入值。<br/>改变value属性值不会触发该回调。 |
...@@ -75,6 +76,7 @@ ...@@ -75,6 +76,7 @@
| selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | 文本选择变化时触发事件。 | | selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | 文本选择变化时触发事件。 |
- 当input类型为checkbox、radio时,支持如下事件: - 当input类型为checkbox、radio时,支持如下事件:
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | | change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 |
......
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <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" <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> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
......
...@@ -25,6 +25,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。 ...@@ -25,6 +25,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
## 事件 ## 事件
仅支持如下事件: 仅支持如下事件:
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| pagestart | {url: string} | 加载网页时触发。 | | pagestart | {url: string} | 加载网页时触发。 |
...@@ -33,6 +34,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。 ...@@ -33,6 +34,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
## 方法 ## 方法
仅支持如下方法: 仅支持如下方法:
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| reload | - | 重新加载页面。 | | reload | - | 重新加载页面。 |
......
...@@ -42,6 +42,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext ...@@ -42,6 +42,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| -------------------- | ------------------ | ---- | ---------------------------------------- | | -------------------- | ------------------ | ---- | ---------------------------------------- |
| type | string | 是 | 设置为'2d',返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。 | | type | string | 是 | 设置为'2d',返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。 |
...@@ -54,6 +55,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext ...@@ -54,6 +55,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
| antialias | boolean | 是否开启抗锯齿功能,默认为false。 | | antialias | boolean | 是否开启抗锯齿功能,默认为false。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | -------------------- | | ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 | | [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
...@@ -65,12 +67,14 @@ toDataURL(type?: string, quality?: number): string ...@@ -65,12 +67,14 @@ toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。 生成一个包含图片展示的URL。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- | | ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 | | type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 | | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | --------- | | ------ | --------- |
| string | 图像的URL地址。 | | string | 图像的URL地址。 |
......
...@@ -13,12 +13,14 @@ addColorStop(offset: number, color: string): void ...@@ -13,12 +13,14 @@ addColorStop(offset: number, color: string): void
设置渐变断点值,包括偏移和颜色。 设置渐变断点值,包括偏移和颜色。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------- | | ------ | ------ | ---------------------------- |
| offset | number | 设置渐变点距离起点的位置占总体长度的比例,范围为0到1。 | | offset | number | 设置渐变点距离起点的位置占总体长度的比例,范围为0到1。 |
| color | string | 设置渐变的颜色。 | | color | string | 设置渐变的颜色。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
......
...@@ -380,6 +380,7 @@ export default { ...@@ -380,6 +380,7 @@ export default {
### globalCompositeOperation ### globalCompositeOperation
类型字段说明 类型字段说明
| 值 | 描述 | | 值 | 描述 |
| ---------------- | ------------------------ | | ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 | | source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 |
...@@ -570,6 +571,7 @@ fillRect(x: number, y: number, width:number, height: number): void ...@@ -570,6 +571,7 @@ fillRect(x: number, y: number, width:number, height: number): void
填充一个矩形。 填充一个矩形。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ------------- | | ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 | | x | number | 指定矩形左上角点的x坐标。 |
...@@ -606,6 +608,7 @@ clearRect(x: number, y: number, width:number, height: number): void ...@@ -606,6 +608,7 @@ clearRect(x: number, y: number, width:number, height: number): void
删除指定区域内的绘制内容。 删除指定区域内的绘制内容。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ------------- | | ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 | | x | number | 指定矩形上的左上角x坐标。 |
...@@ -644,6 +647,7 @@ strokeRect(x: number, y: number, width:number, height: number): void ...@@ -644,6 +647,7 @@ strokeRect(x: number, y: number, width:number, height: number): void
绘制具有边框的矩形,矩形内部不填充。 绘制具有边框的矩形,矩形内部不填充。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ------------ | | ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 | | x | number | 指定矩形的左上角x坐标。 |
...@@ -680,6 +684,7 @@ fillText(text: string, x: number, y: number): void ...@@ -680,6 +684,7 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。 绘制填充类文本。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------------- | | ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 | | text | string | 需要绘制的文本内容。 |
...@@ -715,6 +720,7 @@ strokeText(text: string, x: number, y: number): void ...@@ -715,6 +720,7 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。 绘制描边类文本。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------------- | | ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 | | text | string | 需要绘制的文本内容。 |
...@@ -750,11 +756,13 @@ measureText(text: string): TextMetrics ...@@ -750,11 +756,13 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象,通过该对象可以获取指定文本的宽度值。 该方法返回一个文本测算的对象,通过该对象可以获取指定文本的宽度值。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ---------- | | ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 | | text | string | 需要进行测量的文本。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ----------- | -------------------------------------- | | ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度,该宽度可以通过TextMetrics.width来获取。 | | TextMetrics | 包含指定字体的宽度,该宽度可以通过TextMetrics.width来获取。 |
...@@ -853,6 +861,7 @@ moveTo(x: number, y: number): void ...@@ -853,6 +861,7 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。 路径从当前点移动到指定点。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。 |
...@@ -889,6 +898,7 @@ lineTo(x: number, y: number): void ...@@ -889,6 +898,7 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。 从当前点到指定点进行路径连接。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------- | | ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 | | x | number | 指定位置的x坐标。 |
...@@ -957,12 +967,14 @@ createPattern(image: Image, repetition: string): Object ...@@ -957,12 +967,14 @@ createPattern(image: Image, repetition: string): Object
通过指定图像和重复方式创建图片填充的模板。 通过指定图像和重复方式创建图片填充的模板。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---------- | ------ | ---------------------------------------- | | ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象,具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 | | image | Image | 图源对象,具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 | | repetition | string | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ----------------- | | ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 | | Object | 指定图像填充的Pattern对象。 |
...@@ -999,6 +1011,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -999,6 +1011,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------------- | | ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 第一个贝塞尔参数的x坐标值。 |
...@@ -1039,6 +1052,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1039,6 +1052,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ----------- | | ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 | | cpx | number | 贝塞尔参数的x坐标值。 |
...@@ -1077,6 +1091,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1077,6 +1091,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。 绘制弧线路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- | | ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 | | x | number | 弧线圆心的x坐标值。 |
...@@ -1116,6 +1131,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1116,6 +1131,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | --------------- | | ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 圆弧经过的第一个点的x坐标值。 |
...@@ -1154,6 +1170,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1154,6 +1170,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。 在规定的矩形区域绘制一个椭圆。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ | | ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 | | x | number | 椭圆圆心的x轴坐标。 |
...@@ -1195,6 +1212,7 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -1195,6 +1212,7 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。 创建矩形路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ------------- | | ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 | | x | number | 指定矩形的左上角x坐标值。 |
...@@ -1291,6 +1309,7 @@ rotate(rotate: number): void ...@@ -1291,6 +1309,7 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。 针对当前坐标轴进行顺时针旋转。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------------------- | | ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 | | rotate | number | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
...@@ -1324,6 +1343,7 @@ scale(x: number, y: number): void ...@@ -1324,6 +1343,7 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放。 设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ----------- | | ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 | | x | number | 设置水平方向的缩放值。 |
...@@ -1366,6 +1386,7 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时 ...@@ -1366,6 +1386,7 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时
> - y' = skewX \* x + scaleY \* y + translateY > - y' = skewX \* x + scaleY \* y + translateY
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---------- | ------ | -------- | | ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 | | scaleX | number | 指定水平缩放值。 |
...@@ -1410,6 +1431,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl ...@@ -1410,6 +1431,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。 setTransfrom方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---------- | ------ | -------- | | ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 | | scaleX | number | 指定水平缩放值。 |
...@@ -1451,6 +1473,7 @@ translate(x: number, y: number): void ...@@ -1451,6 +1473,7 @@ translate(x: number, y: number): void
移动当前坐标系的原点。 移动当前坐标系的原点。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------- | | ---- | ------ | -------- |
| x | number | 设置水平平移量。 | | x | number | 设置水平平移量。 |
...@@ -1486,12 +1509,14 @@ createPath2D(path: Path2D, cmds: string): Path2D ...@@ -1486,12 +1509,14 @@ createPath2D(path: Path2D, cmds: string): Path2D
创建一个Path2D对象。 创建一个Path2D对象。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------------- | | ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 | | path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 | | cmds | string | SVG的Path描述字符串。 |
**返回值:** **返回值:**
[Path2D对象](../arkui-js/js-components-canvas-path2d.md) [Path2D对象](../arkui-js/js-components-canvas-path2d.md)
**示例:** **示例:**
...@@ -1531,6 +1556,7 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig ...@@ -1531,6 +1556,7 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
进行图像绘制。 进行图像绘制。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------- | ------------------------------ | ---------------------------------------- | | ------- | ------------------------------ | ---------------------------------------- |
| image | Image \| PixelMap<sup>9+</sup> | 图片资源,请参考[Image对象](../arkui-js/js-components-canvas-image.md)[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 | | image | Image \| PixelMap<sup>9+</sup> | 图片资源,请参考[Image对象](../arkui-js/js-components-canvas-image.md)[PixelMap对象](../apis/js-apis-image.md#pixelmap7)。 |
...@@ -1623,6 +1649,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object ...@@ -1623,6 +1649,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
创建一个线性渐变色,返回CanvasGradient对象,请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md) 创建一个线性渐变色,返回CanvasGradient对象,请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------- | | ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 | | x0 | number | 起点的x轴坐标。 |
...@@ -1631,6 +1658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object ...@@ -1631,6 +1658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
| y1 | number | 终点的y轴坐标。 | | y1 | number | 终点的y轴坐标。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ---------------------- | | ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 | | Object | 返回创建的CanvasGradient对象。 |
...@@ -1672,6 +1700,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1672,6 +1700,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色,返回CanvasGradient对象,请参考CanvasGradient 创建一个径向渐变色,返回CanvasGradient对象,请参考CanvasGradient
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ----------------- | | ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 | | x0 | number | 起始圆的x轴坐标。 |
...@@ -1682,6 +1711,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -1682,6 +1711,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| r1 | number | 终点圆的半径。必须为非负且有限的。 | | r1 | number | 终点圆的半径。必须为非负且有限的。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ---------------------- | | ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 | | Object | 返回创建的CanvasGradient对象。 |
...@@ -1723,6 +1753,7 @@ createImageData(width: number, height: number, imageData: Object): Object ...@@ -1723,6 +1753,7 @@ createImageData(width: number, height: number, imageData: Object): Object
创建新的ImageData 对象,请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md) 创建新的ImageData 对象,请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| --------- | ------ | ----------------- | | --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 | | width | number | ImageData的宽度。 |
...@@ -1730,6 +1761,7 @@ createImageData(width: number, height: number, imageData: Object): Object ...@@ -1730,6 +1761,7 @@ createImageData(width: number, height: number, imageData: Object): Object
| imagedata | Object | 复制现有的ImageData对象。 | | imagedata | Object | 复制现有的ImageData对象。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ----------------- | | ------ | ----------------- |
| Object | 返回创建的ImageData对象。 | | Object | 返回创建的ImageData对象。 |
...@@ -1761,6 +1793,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1761,6 +1793,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建ImageData对象。 以当前canvas指定区域内的像素创建ImageData对象。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | --------------- | | ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 | | sx | number | 需要输出的区域的左上角x坐标。 |
...@@ -1769,6 +1802,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object ...@@ -1769,6 +1802,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
| sh | number | 需要输出的区域的高度。 | | sh | number | 需要输出的区域的高度。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ----------------------- | | ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 | | Object | 返回包含指定区域像素的ImageData对象。 |
...@@ -1799,6 +1833,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: ...@@ -1799,6 +1833,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
使用ImageData数据填充新的矩形区域。 使用ImageData数据填充新的矩形区域。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ----------- | ------ | ----------------------------- | | ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 | | imagedata | Object | 包含像素值的ImageData对象。 |
...@@ -1885,6 +1920,7 @@ setLineDash(segments: Array): void ...@@ -1885,6 +1920,7 @@ setLineDash(segments: Array): void
设置画布的虚线样式。 设置画布的虚线样式。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- | | -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 | | segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
...@@ -1919,6 +1955,7 @@ getLineDash(): Array ...@@ -1919,6 +1955,7 @@ getLineDash(): Array
获得当前画布的虚线样式。 获得当前画布的虚线样式。
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ----- | ------------------------ | | ----- | ------------------------ |
| Array | 返回数组,该数组用来描述线段如何交替和间距长度。 | | Array | 返回数组,该数组用来描述线段如何交替和间距长度。 |
...@@ -1949,6 +1986,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void ...@@ -1949,6 +1986,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。 显示给定的ImageBitmap对象。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ | | ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 | | bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
......
...@@ -25,12 +25,14 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC ...@@ -25,12 +25,14 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC
获取offscreen canvas绘图上下文,返回值为2D绘制对象。 获取offscreen canvas绘图上下文,返回值为2D绘制对象。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------- | | --------- | ---------------------------------------- | ---- | ---------------------- |
| contextId | string | 是 | 仅支持&nbsp;'2d'。 | | contextId | string | 是 | 仅支持&nbsp;'2d'。 |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 | | options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | --------------------------- | | ---------------------------------------- | --------------------------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象,用于在画布组件上绘制矩形、文本、图片等。 | | [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象,用于在画布组件上绘制矩形、文本、图片等。 |
...@@ -43,12 +45,14 @@ toDataURL(type?: string, quality?:number): ...@@ -43,12 +45,14 @@ toDataURL(type?: string, quality?:number):
生成一个包含图片展示的URL。 生成一个包含图片展示的URL。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- | | ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 | | type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 | | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | --------- | | ------ | --------- |
| string | 图像的URL地址。 | | string | 图像的URL地址。 |
...@@ -61,6 +65,7 @@ transferToImageBitmap(): ImageBitmap ...@@ -61,6 +65,7 @@ transferToImageBitmap(): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ---------------------------------------- | --------------- | | ---------------------------------------- | --------------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | | [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
......
...@@ -13,11 +13,13 @@ addPath(path: Object): void ...@@ -13,11 +13,13 @@ addPath(path: Object): void
将另一个路径添加到当前的路径对象中。 将另一个路径添加到当前的路径对象中。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------------- | | ---- | ------ | -------------- |
| path | Object | 需要添加到当前路径的路径对象 | | path | Object | 需要添加到当前路径的路径对象 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -48,6 +50,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans ...@@ -48,6 +50,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
设置路径变换矩阵。 设置路径变换矩阵。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---------- | ------ | ------- | | ---------- | ------ | ------- |
| scaleX | number | x轴的缩放比例 | | scaleX | number | x轴的缩放比例 |
...@@ -58,6 +61,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans ...@@ -58,6 +61,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
| translateY | number | y轴的平移距离 | | translateY | number | y轴的平移距离 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -88,6 +92,7 @@ closePath(): void ...@@ -88,6 +92,7 @@ closePath(): void
将路径的当前点移回到路径的起点,当前点到起点间画一条直线。如果形状已经闭合或只有一个点,则此功能不执行任何操作。 将路径的当前点移回到路径的起点,当前点到起点间画一条直线。如果形状已经闭合或只有一个点,则此功能不执行任何操作。
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -121,12 +126,14 @@ moveTo(x: number, y: number): void ...@@ -121,12 +126,14 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点,移动过程中不绘制线条。 将路径的当前坐标点移动到目标点,移动过程中不绘制线条。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ------- | | ---- | ------ | ------- |
| x | number | 目标点X轴坐标 | | x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 | | y | number | 目标点Y轴坐标 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -160,12 +167,14 @@ lineTo(x: number, y: number): void ...@@ -160,12 +167,14 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。 从当前点绘制一条直线到目标点。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ------- | | ---- | ------ | ------- |
| x | number | 目标点X轴坐标 | | x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 | | y | number | 目标点Y轴坐标 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -200,6 +209,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -200,6 +209,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。 创建三次贝赛尔曲线的路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | -------------- | | ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 | | cp1x | number | 第一个贝塞尔参数的x坐标值。 |
...@@ -210,6 +220,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -210,6 +220,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 路径结束时的y坐标值。 | | y | number | 路径结束时的y坐标值。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -241,6 +252,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -241,6 +252,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。 创建二次贝赛尔曲线的路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ---- | ------ | ----------- | | ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 | | cpx | number | 贝塞尔参数的x坐标值。 |
...@@ -249,6 +261,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -249,6 +261,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| y | number | 路径结束时的y坐标值。 | | y | number | 路径结束时的y坐标值。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -280,6 +293,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -280,6 +293,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。 绘制弧线路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- | | ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 | | x | number | 弧线圆心的x坐标值。 |
...@@ -290,6 +304,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -290,6 +304,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 是否逆时针绘制圆弧。 | | anticlockwise | boolean | 是否逆时针绘制圆弧。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -320,6 +335,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -320,6 +335,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。 依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | --------------- | | ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 | | x1 | number | 圆弧经过的第一个点的x坐标值。 |
...@@ -329,6 +345,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -329,6 +345,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 圆弧的圆半径值。 | | radius | number | 圆弧的圆半径值。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -359,6 +376,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -359,6 +376,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。 在规定的矩形区域绘制一个椭圆。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ | | ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 | | x | number | 椭圆圆心的x轴坐标。 |
...@@ -371,6 +389,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -371,6 +389,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| anticlockwise | number | 是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0) | | anticlockwise | number | 是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0) |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
...@@ -401,6 +420,7 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -401,6 +420,7 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。 创建矩形路径。
**参数:** **参数:**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| ------ | ------ | ------------- | | ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 | | x | number | 指定矩形的左上角x坐标值。 |
...@@ -409,6 +429,7 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -409,6 +429,7 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 指定矩形的高度。 | | height | number | 指定矩形的高度。 |
**示例:** **示例:**
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
......
...@@ -141,6 +141,7 @@ setData(key: string, value: object): boolean ...@@ -141,6 +141,7 @@ setData(key: string, value: object): boolean
| value | object | 是 | 要存储的数据。 | | value | object | 是 | 要存储的数据。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | ------------------------ | | ------- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 | | boolean | 执行结果,true表示成功,false表示失败。 |
...@@ -173,6 +174,7 @@ getData(key: string): object ...@@ -173,6 +174,7 @@ getData(key: string): object
| key | string | 是 | 数据键值。 | | key | string | 是 | 数据键值。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------ | ------ | | ------ | ------ |
| object | 获取的数据。 | | object | 获取的数据。 |
...@@ -204,6 +206,7 @@ clearData(key?: string): boolean ...@@ -204,6 +206,7 @@ clearData(key?: string): boolean
| key | string | 否 | 数据键值。 | | key | string | 否 | 数据键值。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ------- | ------------------------ | | ------- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 | | boolean | 执行结果,true表示成功,false表示失败。 |
...@@ -230,6 +233,7 @@ setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean ...@@ -230,6 +233,7 @@ setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean
| offsetY | number | 是 | 相对于图片的纵向偏移量。 | | offsetY | number | 是 | 相对于图片的纵向偏移量。 |
**返回值:** **返回值:**
| 类型 | 说明 | | 类型 | 说明 |
| ---- | ------------------------ | | ---- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 | | boolean | 执行结果,true表示成功,false表示失败。 |
......
...@@ -32,6 +32,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...); ...@@ -32,6 +32,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
支持以下四种方式:\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1),需要指定至少两种颜色。 支持以下四种方式:\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1),需要指定至少两种颜色。
**参数:** **参数:**
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
| direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向,如:to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;;或者<br/>to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 | | direction | to&nbsp;&lt;side-or-corner&gt;&nbsp;&nbsp;&lt;side-or-corner&gt;&nbsp;=&nbsp;[left&nbsp;\|&nbsp;right]&nbsp;\|&nbsp;[top&nbsp;\|&nbsp;bottom] | to&nbsp;bottom&nbsp;(由上到下渐变) | 否 | 指定过渡方向,如:to&nbsp;left&nbsp;(从右向左渐变)&nbsp;&nbsp;;或者<br/>to&nbsp;bottom&nbsp;right&nbsp;(从左上角到右下角)。 |
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
animate( keyframes: Keyframes, options: Options):void animate( keyframes: Keyframes, options: Options):void
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| --------- | --------- | ---- | ------------------------------------ | | --------- | --------- | ---- | ------------------------------------ |
| keyframes | keyframes | 是 | 设置动画样式 | | keyframes | keyframes | 是 | 设置动画样式 |
...@@ -218,6 +219,7 @@ createIntersectionObserver(param?: ObserverParam): Observer ...@@ -218,6 +219,7 @@ createIntersectionObserver(param?: ObserverParam): Observer
监听元素在当前页面的可见范围。 监听元素在当前页面的可见范围。
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------------- | ---- | -------------- | | ----- | ------------- | ---- | -------------- |
| param | ObserverParam | - | 获取observer的回调。 | | param | ObserverParam | - | 获取observer的回调。 |
......
...@@ -25,11 +25,11 @@ ...@@ -25,11 +25,11 @@
除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式: 除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式:
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ---------------------------------------- | | ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 | | flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:<br/>-&nbsp;nowrap:不换行,单行显示。<br/>-&nbsp;wrap:换行,多行显示。 | | 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;均匀排列每个元素,每个元素之间的间隔相等。 | | 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-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:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | | 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的效果 | | 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-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:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<!-- comp.hml --> <!-- comp.hml -->
<div class="item"> <div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{showObj}}">hello world</text> <text class="text-style" if="{{ showObj }}">hello world</text>
</div> </div>
``` ```
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length],短划线和缺口的长度中间空格隔开成对出现。 | | stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length],短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 | | stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel:使用斜角连接路径段;<br/>miter:使用尖角连接路径段;<br/>round:使用圆角连接路径段。 | | 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-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画 | | stroke-opacity | number | 1 | 否 | 轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 | | stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
...@@ -38,8 +38,11 @@ ...@@ -38,8 +38,11 @@
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line> <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="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> <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> <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> <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> <line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg> </svg>
</div> </div>
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性,设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -13,12 +13,12 @@ ...@@ -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)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
......
...@@ -19,7 +19,7 @@ ...@@ -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)
## 属性 ## 属性
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
## 子组件 ## 子组件
tspan [tspan](js-components-svg-tspan.md)
## 属性 ## 属性
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
## 子组件 ## 子组件
支持tspan 支持[tspan](js-components-svg-tspan.md)
支持以下表格中的属性。 支持以下表格中的属性。
......
...@@ -15,7 +15,7 @@ ...@@ -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)
## 属性 ## 属性
......
# 基于TS扩展的声明式开发范式 # 基于eTS的声明式开发范式
- 组件通用信息 - 组件通用信息
- 通用事件 - 通用事件
......
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
## 接口 ## 接口
Blank(min?: Length) Blank(min?: number \| string)
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| min | [Length](../../ui/ts-types.md) | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 | | min | number \| string | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
## 属性 ## 属性
......
...@@ -6,19 +6,9 @@ ...@@ -6,19 +6,9 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限说明 ## 需要权限
使用网络图片时,需要在config.json(FA模型)或者module.json5(Stage模型)对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。 使用网络图片时,需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
## 子组件 ## 子组件
...@@ -43,7 +33,7 @@ Image(src: string | PixelMap | Resource) ...@@ -43,7 +33,7 @@ Image(src: string | PixelMap | Resource)
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | | ------------------------ | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图,支持本地图片和网络图片。 | | alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 | | objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。<br/>> **说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 | | objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。<br/>> **说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
...@@ -84,7 +74,7 @@ Image(src: string | PixelMap | Resource) ...@@ -84,7 +74,7 @@ Image(src: string | PixelMap | Resource)
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/> | | onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/> |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/> | | onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/> |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 | | onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例 ## 示例
......
...@@ -20,30 +20,30 @@ ...@@ -20,30 +20,30 @@
TimePicker(options?: TimePickerOptions) TimePicker(options?: TimePickerOptions)
默认以00:00至23:59的时间区间创建滑动选择器。 默认以00:00至23:59的时间区间创建滑动选择器。
- options参数 - options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ---- | ---- | ------ | --------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 | | selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | --------------- | ------- | ----- | --------------------- |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 | | useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 | | onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 |
### TimePickerResult对象说明 ### TimePickerResult对象说明
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ------- |
| hour | number | 选中时间的时。 | | hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 | | minute | number | 选中时间的分。 |
......
...@@ -30,17 +30,19 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number}) ...@@ -30,17 +30,19 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ----------------------- | --------------- | ----------------------------------------------------------- | | ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置文字颜色。 | | color | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项文字颜色。 | | selectedColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗文字颜色。 | | popupColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项背景颜色。 | | selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗背景色。 | | popupBackground | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗背景色。 |
| usingPopup | boolean | 设置是否使用提示弹窗。 | | usingPopup | boolean | 设置是否使用提示弹窗。 |
| selectedFont | [Font](../../ui/ts-types.md) | 设置选中项文字样式。 | | selectedFont | [Font](../../ui/ts-types.md#font) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md) | 设置提示弹窗字体样式。 | | popupFont | [Font](../../ui/ts-types.md#font) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md) | 设置字母索引条默认字体样式。 | | font | [Font](../../ui/ts-types.md#font) | 设置字母索引条默认字体样式。 |
| itemSize | Length | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 | | itemSize | string \| number | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right | | alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
- IndexerAlign枚举说明 - IndexerAlign枚举说明
| 名称 | 描述 | | 名称 | 描述 |
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
可以包含单个子组件。 可以包含单个子组件。
## 接口 ## 接口
GridCol(span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption) GridCol(option?: {span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
**参数** **参数**
| 参数名 |类型|必填|说明 | 参数名 |类型|必填|说明
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
## 接口 ## 接口
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length}) GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
- 参数 - 参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 | | 参数名 | 类型 | 必填 | 默认值 | 说明 |
......
...@@ -38,7 +38,7 @@ GridItem() ...@@ -38,7 +38,7 @@ GridItem()
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 | | onSelect(event:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
## 示例 ## 示例
......
...@@ -20,25 +20,27 @@ ...@@ -20,25 +20,27 @@
## 接口 ## 接口
GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | GetterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection})
**参数:** **参数:**
| 参数名 |类型|必填|说明| | 参数名 |类型|必填|说明|
|-----|-----|----|----| |-----|-----|----|----|
|gutter|Length \| GetterOption| 否 |栅格布局间距,x代表水平方向。| |gutter|Length \| GutterOption| 否 |栅格布局间距,x代表水平方向。|
|columns| number \| GridRowColumnOption | 否 |设置布局列数。| |columns| number \| GridRowColumnOption | 否 |设置布局列数。|
|breakpoints|BreakPoints| 否 |用于设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。| |breakpoints|BreakPoints| 否 |用于设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。|
|direction|GridRowDirection| 否 |栅格布局排列方向。| |direction|GridRowDirection| 否 |栅格布局排列方向。|
## GetterOption ## GutterOption
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| x | Length \| GridRowSizeOption | 否 | 水平getter option。 | | x | Length \| GridRowSizeOption | 否 | 水平gutter option。 |
| y | Length \| GridRowSizeOption | 否 | 竖直getter option。 | | y | Length \| GridRowSizeOption | 否 | 竖直gutter option。 |
## GridRowColumnOption ## GridRowColumnOption
栅格在不同宽度设备类型下,栅格列数。
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| xs | number | 否 | 最小宽度类型设备。 | | xs | number | 否 | 最小宽度类型设备。 |
...@@ -48,12 +50,25 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get ...@@ -48,12 +50,25 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
| xl | number | 否 | 特大宽度类型设备。 | | xl | number | 否 | 特大宽度类型设备。 |
| xxl | number | 否 | 超大宽度类型设备。 | | xxl | number | 否 | 超大宽度类型设备。 |
## GridRowSizeOption
栅格在不同宽度设备类型下,gutter的大小。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | Length | 否 | 最小宽度类型设备。 |
| sm | Length | 否 | 小宽度类型设备。 |
| md | Length | 否 | 中等宽度类型设备。 |
| lg | Length | 否 | 大宽度类型设备。 |
| xl | Length | 否 | 特大宽度类型设备。 |
| xxl | Length | 否 | 超大宽度类型设备。 |
## BreakPoints ## BreakPoints
| 参数名 | 参数类型 | 必填 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| value | Array<string> | 否 | 用于设置断点位置的单调递增数组。<br>默认值:["320vp", "520vp", "840vp"] | | value | Array<string> | 否 | 用于设置断点位置的单调递增数组。<br>默认值:["320vp", "520vp", "840vp"] |
| reference | BreakpointsReference | 否 | - | 竖直getter option。 | | reference | BreakpointsReference | 否 | - | 竖直gutter option。 |
```ts ```ts
// 启用xs、sm、md共3个断点 // 启用xs、sm、md共3个断点
breakpoints: {value: ["100vp", "200vp"]} breakpoints: {value: ["100vp", "200vp"]}
...@@ -108,7 +123,7 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get ...@@ -108,7 +123,7 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
### onBreakpointChange ### onBreakpointChange
onBreakpointChange(callback: (breakpoints: string) => void onBreakpointChange(callback: (breakpoints: string) => void)
**参数:** **参数:**
......
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册