提交 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 @@
- Quick Start
- Getting Started
- [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 the Low-Code Approach](quick-start/start-with-ets-low-code.md)
- [Getting Started with JavaScript in the Traditional Coding Approach](quick-start/start-with-js.md)
- [Getting Started with JavaScript in the Low-Code Approach](quick-start/start-with-js-low-code.md)
- [Getting Started with eTS in Stage Model](quick-start/start-with-ets-stage.md)
- [Getting Started with eTS in FA Model](quick-start/start-with-ets-fa.md)
- [Getting Started with JavaScript in FA Model](quick-start/start-with-js-fa.md)
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [SysCap](quick-start/syscap.md)
- [HarmonyAppProvision Configuration File](quick-start/app-provision-structure.md)
- Development
- [Ability Development](ability/Readme-EN.md)
- [UI Development](ui/Readme-EN.md)
......@@ -44,5 +44,8 @@
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- APIs
- [JS and TS APIs](reference/apis/Readme-EN.md)
- Native APIs
- [Standard Libraries](reference/native-lib/third_party_libc/musl.md)
- [Node_API](reference/native-lib/third_party_napi/napi.md)
- Contribution
- [How to Contribute](../contribute/documentation-contribution.md)
......@@ -2,6 +2,7 @@
- [Using Native APIs in Application Projects](napi-guidelines.md)
- [Drawing Development](drawing-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
- [Raw File Development](rawfile-guidelines.md)
- [Native Window Development](native-window-guidelines.md)
......@@ -190,17 +190,10 @@
- [Agent-Powered Scheduled Reminder Development](notification/background-agent-scheduled-reminder-guide.md)
- [Debugging Assistant Usage](notification/assistant-guidelines.md)
- Window Manager
- Window
- [Window Overview](windowmanager/window-overview.md)
- [Application Window Development (Stage Mode)](windowmanager/application-window-stage.md)
- [Application Window Development (FA Model)](windowmanager/application-window-fa.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)
- [Window Overview](windowmanager/window-overview.md)
- [Application Window Development (Stage Mode)](windowmanager/application-window-stage.md)
- [Application Window Development (FA Model)](windowmanager/application-window-fa.md)
- [System Window Development (Stage Model Only)](windowmanager/system-window-stage.md)
- WebGL
- [WebGL Overview](webgl/webgl-overview.md)
- [WebGL Development](webgl/webgl-guidelines.md)
......
# Window Manager
* Window
* [Window Overview](window-overview.md)
* [System Window Development (Stage Model Only)](application-window-stage.md)
* [Application Window Development (FA Model)](application-window-fa.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)
- [Window Overview](window-overview.md)
- [System Window Development (Stage Model Only)](application-window-stage.md)
- [Application Window Development (FA Model)](application-window-fa.md)
- [Application Window Development (Stage Mode)](system-window-stage.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,53 +6,57 @@
- [Glossary](../glossary.md)
- [Release Notes](../release-notes/Readme.md)
- Quick Start
- [Mini and Small Systems](quick-start/quickstart-lite.md)
- [Standard System](quick-start/quickstart-standard.md)
- [Mini and Small Systems](quick-start/quickstart-ide-lite-overview.md)
- [Standard System](quick-start/quickstart-ide-standard-overview.md)
- Compatibility and Security
- [Privacy and Security](security/Readme-EN.md)
- Porting
- [Third-Party Library Porting Guide for Mini and Small Systems](porting/porting-thirdparty.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.md)
- [Standard System SoC Porting Guide](porting/standard-system-porting-guide.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)
- [Small System SoC Porting Guide](porting/porting-smallchip-prepare-needs.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
- Kernel
- [Kernel for the Mini System](kernel/kernel-mini.md)
- [Kernel for the Small System](kernel/kernel-small.md)
- [Kernel for the Standard System](kernel/kernel-standard.md)
- [Kernel for the Mini System](kernel/kernel-mini-overview.md)
- [Kernel for the Small System](kernel/kernel-small-overview.md)
- [Kernel for the Standard System](kernel/kernel-standard-overview.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)
- [Graphics](subsystems/subsys-graphics.md)
- [Multimedia](subsystems/subsys-multimedia.md)
- [Utils](subsystems/subsys-utils.md)
- [AI Framework](subsystems/subsys-aiframework.md)
- [Data Management](subsystems/subsys-data.md)
- [Sensor](subsystems/subsys-sensor.md)
- [USB](subsystems/subsys-usbservice.md)
- [Application Framework](subsystems/subsys-application-framework.md)
- [Graphics](subsystems/subsys-graphics-overview.md)
- [Multimedia](subsystems/subsys-multimedia-camera-overview.md)
- [Utils](subsystems/subsys-utils-overview.md)
- [AI Framework](subsystems/subsys-aiframework-guide.md)
- [Data Management](subsystems/subsys-data-relational-database-overview.md)
- [Sensor](subsystems/subsys-sensor-overview.md)
- [USB](subsystems/subsys-usbservice-overview.md)
- [Application Framework](subsystems/subsys-application-framework-overview.md)
- [OTA Update](subsystems/subsys-ota-guide.md)
- [Telephony](subsystems/subsys-tel.md)
- [Security](subsystems/subsys-security.md)
- [Startup](subsystems/subsys-boot.md)
- [DFX](subsystems/subsys-dfx.md)
- [Telephony](subsystems/subsys-tel-overview.md)
- [Security](subsystems/subsys-security-overview.md)
- [Startup](subsystems/subsys-boot-overview.md)
- [DFX](subsystems/subsys-dfx-overview.md)
- Featured Topics
- [HPM Part](hpm-part/Readme-EN.md)
- Device Development Examples
- [Mini- and Small-System Devices](guide/device-lite.md)
- [Standard-System Devices](guide/device-standard.md)
- [Mini- and Small-System Devices](guide/device-wlan-led-control.md)
- [Standard-System Devices](guide/device-clock-guide.md)
- Debugging
- [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 Test Case Development](subsystems/subsys-xts-guide.md)
- Tools
- [Docker Environment](get-code/gettools-acquire.md)
- [IDE](get-code/gettools-ide.md)
- 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
- [FAQs](faqs/Readme-EN.md)
- Contribution
......
# 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
- [Mini- and Small-System Devices](device-lite.md)
- [WLAN-connected Products](device-wlan.md)
- Mini- and Small-System Devices
- WLAN-connected Products
- [LED Peripheral Control](device-wlan-led-control.md)
- [Third-Party SDK Integration](device-wlan-sdk.md)
- [Cameras Without a Screen](device-iotcamera.md)
- [Camera Control](device-iotcamera-control.md)
- Cameras Without a Screen
- Camera Control
- [Overview](device-iotcamera-control-overview.md)
- [Development Guidelines](device-iotcamera-control-demo.md)
- Development Guidelines
- [Photographing](device-iotcamera-control-demo-photodevguide.md)
- [Video Recording](device-iotcamera-control-demo-videodevguide.md)
- [Use Case](device-iotcamera-control-example.md)
- [Cameras with a Screen](device-camera.md)
- [Screen and Camera Control](device-camera-control.md)
- Cameras with a Screen
- Screen and Camera Control
- [Overview](device-camera-control-overview.md)
- [Development Guidelines](device-camera-control-demo.md)
- Development Guidelines
- [Photographing](device-camera-control-demo-photoguide.md)
- [Video Recording](device-camera-control-demo-videoguide.md)
- [Previewing](device-camera-control-demo-previewguide.md)
- [Use Case](device-camera-control-example.md)
- [Visual Application Development](device-camera-visual.md)
- Visual Application Development
- [Overview](device-camera-visual-overview.md)
- [Preparations](device-camera-visual-prepare.md)
- [Adding Pages](device-camera-visual-addpage.md)
......@@ -28,7 +28,7 @@
- [Debugging and Packaging](device-camera-visual-debug.md)
- [Running on the Device](device-camera-visual-run.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 Example for Platform Drivers](device-driver-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开发概述
马达振动服务最大化开放硬工最新马达器件能力,通过拓展原生马达服务实现振动与交互融合设计,打造细腻精致的一体化振动体验和差异化体验,提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。
振动器模块服务最大化开放硬工最新马达器件能力,通过拓展原生马达服务实现振动与交互融合设计,打造细腻精致的一体化振动体验和差异化体验,提升用户交互效率和易用性、提升用户体验、增强品牌竞争力。
## 运作机制
......@@ -23,7 +23,7 @@ Vibrator属于控制类小器件,主要包含以下四个模块:Vibrator API
## 约束与限制
在使用振动器时,开发者需要配置请求振动器的权限ohos.permission.VIBRATE,才能控制振动器振动,敏感级别是system_grant。
在使用振动器时,开发者需要配置请求振动器的权限ohos.permission.VIBRATE,才能控制振动器振动,权限类型是system_grant。
......@@ -36,7 +36,7 @@
适用于:OpenHarmony SDK 3.2.2.5版本
日志打印的长度限制为1024,该长度不能配置。
日志打印的长度限制为1024个字符,该长度不能配置。
## 为什么有时候直接用IDE安装HAP包到开发板上无法打开?
......
# 开发参考
- [组件参考(基于TS扩展的声明式开发范式)](arkui-ts/Readme-CN.md)
- [组件参考(基于JS扩展的类Web开发范式)](arkui-js/Readme-CN.md)
- [组件参考(基于eTS的声明式开发范式)](arkui-ts/Readme-CN.md)
- [组件参考(兼容JS的类Web开发范式)](arkui-js/Readme-CN.md)
- [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md)
- [接口参考(JS及TS API)](apis/Readme-CN.md)
- 接口参考(Native API)
......
......@@ -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>
setDisplayOrientation(orientation: bundle.DisplayOrientation, callback: AsyncCallback\<void>): void
......
......@@ -892,8 +892,6 @@ startAbilityByCall(want: Want): Promise&lt;Caller&gt;;
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core
**系统API**: 此接口为系统接口,三方应用不支持调用。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
......
......@@ -94,7 +94,7 @@ verifyAccessTokenSync(tokenID: number, permissionName: string): GrantStatus
```js
var AtManager = abilityAccessCtrl.createAtManager();
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)}`);
```
......
......@@ -49,6 +49,7 @@ import Want from '@ohos.application.Want';
- 传递FD数据,FD表示文件描述符(FileDescriptor)
``` js
import fileio from '@ohos.fileio';
var fd;
try {
fd = fileio.openSync("/data/storage/el2/base/haps/pic.png");
......@@ -59,9 +60,9 @@ import Want from '@ohos.application.Want';
"deviceId": "", // deviceId为空表示本设备
"bundleName": "com.extreme.test",
"abilityName": "MainAbility",
"moduleName": "entry" // moduleName非必选
"moduleName": "entry", // moduleName非必选
"parameters": {
"keyFd":{"type":"FD", "value":fd}
"keyFd":{"type":"FD", "value":fd}
}
};
this.context.startAbility(want, (error) => {
......
......@@ -643,9 +643,8 @@ off(method: string): void;
| 名称 | 参数类型 | 可读 | 可写 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| (msg: string) | function | 是 | 否 | 调用者注册的侦听器函数接口的原型。 |
## CalleeCallBack
## CalleeCallBack
(indata: rpc.MessageParcel): rpc.Sequenceable;
......
......@@ -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>>;
## appManager.getProcessRunningInfos<sup>(deprecated)</sup>
> **说明:**
>
> 从 API Version 9 开始废弃,建议使用[appManager.getProcessRunningInformation<sup>9+</sup>](#appmanagergetprocessrunninginformation9-1)替代。
getProcessRunningInfos(callback: AsyncCallback\<Array\<ProcessRunningInfo>>): void;
获取有关运行进程的信息。
> 从 API Version 9 开始废弃,建议使用[appManager.getProcessRunningInformation<sup>9+</sup>](#appmanagergetprocessrunninginformation9-1)替代。
**需要权限**:ohos.permission.GET_RUNNING_INFO
**系统能力**:SystemCapability.Ability.AbilityRuntime.Core
......@@ -706,9 +704,14 @@ onForegroundApplicationChanged(appStateData: AppStateData): void;
**示例:**
```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver'
const foregroundApplicationInfo = ApplicationStateObserver.onForegroundApplicationChanged();
console.log('-------- foregroundApplicationInfo: ---------', foregroundApplicationInfo);
var applicationStateObserver = {
onForegroundApplicationChanged(appStateData) {
console.log('------------ onForegroundApplicationChanged -----------', appStateData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
```
## ApplicationStateObserver.onAbilityStateChanged<sup>8+</sup>
......@@ -730,9 +733,13 @@ onAbilityStateChanged(abilityStateData: AbilityStateData): void;
**示例:**
```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver'
const abilityStateChangedInfo = ApplicationStateObserver.onAbilityStateChanged();
console.log('-------- abilityStateChangedInfo: ---------', abilityStateChangedInfo);
var applicationStateObserver = {
onAbilityStateChanged(abilityStateData) {
console.log('------------ onAbilityStateChanged -----------', abilityStateData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
```
## ApplicationStateObserver.onProcessCreated<sup>8+</sup>
......@@ -754,9 +761,13 @@ onProcessCreated(processData: ProcessData): void;
**示例:**
```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver'
const processCreatedInfo = ApplicationStateObserver.onProcessCreated();
console.log('-------- processCreatedInfo: ---------', processCreatedInfo);
var applicationStateObserver = {
onProcessCreated(processData) {
console.log('------------ onProcessCreated -----------', processData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
```
## ApplicationStateObserver.onProcessDied<sup>8+</sup>
......@@ -778,9 +789,13 @@ onProcessDied(processData: ProcessData): void;
**示例:**
```js
import ApplicationStateObserver from '@ohos.application.ApplicationStateObserver'
const processDiedInfo = ApplicationStateObserver.onProcessDied();
console.log('-------- processDiedInfo: ---------', processDiedInfo);
var applicationStateObserver = {
onProcessDied(processData) {
console.log('------------ onProcessDied -----------', processData);
}
}
const observerCode = app.registerApplicationStateObserver(applicationStateObserver);
console.log('-------- observerCode: ---------', observerCode);
```
## AppStateData
......
......@@ -2375,7 +2375,7 @@ try {
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| name | string | 是 | 数据库文件名。 |
| encrypt | boolean | 否 | 指定数据库是否加密。<br>true:加密。<br>false:非加密。 |
| encrypt<sup>9+</sup> | boolean | 否 | 指定数据库是否加密。<br>true:加密。<br>false:非加密。 |
## ValueType
......
......@@ -560,7 +560,7 @@ try {
on(event: 'distributedDataServiceDie', deathCallback: Callback&lt;void&gt;): void
订阅服务状态变更通知。
订阅服务状态变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。
......@@ -592,7 +592,7 @@ try {
off(event: 'distributedDataServiceDie', deathCallback?: Callback&lt;void&gt;): void
取消订阅服务状态变更通知。
取消订阅服务状态变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.DistributedKVStore。
......@@ -2584,7 +2584,7 @@ try {
on(event: 'dataChange', type: SubscribeType, listener: Callback&lt;ChangeNotification&gt;): void
订阅指定类型的数据变更通知。
订阅指定类型的数据变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -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
订阅同步完成事件回调通知。
订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -2634,7 +2634,7 @@ kvStore.on('syncComplete', function (data) {
off(event:'dataChange', listener?: Callback&lt;ChangeNotification&gt;): void
取消订阅数据变更通知。
取消订阅数据变更通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -2670,7 +2670,7 @@ class KvstoreModel {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅数据变更通知,此方法为同步方法。
取消订阅同步完成事件回调通知,此方法为同步方法。
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -4271,7 +4271,7 @@ try {
on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
订阅同步完成事件回调通知。
订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -4307,7 +4307,7 @@ try {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅同步完成事件回调通知。
取消订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -5781,7 +5781,7 @@ try {
on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
订阅同步完成事件回调通知。
订阅同步完成事件回调通知,此方法为同步方法
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......@@ -5817,7 +5817,7 @@ try {
off(event: 'syncComplete', syncCallback?: Callback&lt;Array&lt;[string, number]&gt;&gt;): void
取消订阅同步完成事件回调通知,方法为同步方法。
取消订阅同步完成事件回调通知,方法为同步方法。
**系统能力:** SystemCapability.DistributedDataManager.KVStore.Core
......
......@@ -33,8 +33,7 @@ var observer = {
console.log('onUnhandledException, errorMsg: ', errorMsg)
}
}
const registerErrorObserverNumber=errorManager.registerErrorObserver(observer)
console.info(registerErrorObserverNumber)
errorManager.registerErrorObserver(observer)
```
## ErrorManager.unregisterErrorObserver
......@@ -123,11 +122,4 @@ var 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';
| TEMPORARY_KEY | "ohos.extra.param.key.form_temporary" | 临时卡片。 |
| 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/>此接口为系统接口。 |
| 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
......
......@@ -42,6 +42,12 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n
**示例:**
```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
privacyManager.addPermissionUsedRecord(tokenID, "ohos.permission.PERMISSION_USED_STATS", 1, 0).then(data => {
console.log(`promise: data->${JSON.stringify(data)}`);
......@@ -72,8 +78,14 @@ addPermissionUsedRecord(tokenID: number, permissionName: string, successCount: n
**示例:**
```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
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)}`);
});
```
......@@ -105,10 +117,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest): Promise&lt;PermissionU
```js
let request = {
"tokenId": 1,
"isRemote": 1,
"isRemote": false,
"deviceId": "device",
"bundleName": "bundle",
"permissionNames": 1,
"permissionNames": [],
"beginTime": 0,
"endTime": 1,
"flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL,
......@@ -140,10 +152,10 @@ getPermissionUsedRecords(request: PermissionUsedRequest, callback: AsyncCallback
```js
let request = {
"tokenId": 1,
"isRemote": 1,
"isRemote": false,
"deviceId": "device",
"bundleName": "bundle",
"permissionNames": 1,
"permissionNames": [],
"beginTime": 0,
"endTime": 1,
"flag":privacyManager.PermissionUsageFlag.FLAG_PERMISSION_USAGE_DETAIL,
......
......@@ -21,28 +21,31 @@ showToast(options: ShowToastOptions): void
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------------- | ---- | ------- |
| options | [ShowToastOptions](#showtoastoptions) | 是 | 文本弹窗选项。 |
**示例:**
```js
```js
prompt.showToast({
message: 'Message Info',
duration: 2000,
});
```
```
## ShowToastOptions
文本提示框的选项。
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力:** SystemCapability.ArkUI.ArkUI.Full。
| 名称 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ------ | ---------------------------------------- |
| message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是 | 显示的文本信息。 |
| duration | number | 否 | 默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。 |
| bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 |
| 名称 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string\| [Resource](../../ui/ts-types.md#resource类型)<sup>9+</sup> | 是 | 显示的文本信息。 |
| duration | number | 否 | 默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。 |
| bottom | string\| number | 否 | 设置弹窗边框距离屏幕底部的位置。 |
## prompt.showDialog
......@@ -50,9 +53,10 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
创建并显示对话框,对话框响应后同步返回结果。
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 对话框选项。 |
......@@ -65,7 +69,7 @@ showDialog(options: ShowDialogOptions): Promise&lt;ShowDialogSuccessResponse&gt;
**示例:**
```js
```js
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
......@@ -86,7 +90,7 @@ prompt.showDialog({
.catch(err => {
console.info('showDialog error: ' + err);
})
```
```
## prompt.showDialog
......@@ -94,17 +98,18 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback&lt;ShowDialogSucc
创建并显示对话框,对话框响应结果异步返回。
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | ------------ |
| options | [ShowDialogOptions](#showdialogoptions) | 是 | 页面显示对话框信息描述。 |
| callback | AsyncCallback&lt;[ShowDialogSuccessResponse](#showdialogsuccessresponse)&gt; | 是 | 对话框响应结果回调。 |
**示例:**
```js
```js
prompt.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
......@@ -125,13 +130,13 @@ prompt.showDialog({
}
console.info('showDialog success callback, click button: ' + data.index);
});
```
```
## ShowDialogOptions
对话框的选项。
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
| 名称 | 类型 | 必填 | 说明 |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
......@@ -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
**系统能力:** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ---------------------------------------- | ---- | --------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
......@@ -166,7 +172,8 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback&lt;ActionMenu
**示例:**
```js
```js
prompt.showActionMenu({
title: 'Title Info',
buttons: [
......@@ -186,7 +193,7 @@ prompt.showActionMenu({
}
console.info('showActionMenu success callback, click button: ' + data.index);
})
```
```
## prompt.showActionMenu
......@@ -197,17 +204,20 @@ showActionMenu(options: ActionMenuOptions): Promise&lt;ActionMenuSuccessResponse
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| ------- | --------------------------------------- | ---- | ------- |
| options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 |
**返回值:**
| 类型 | 说明 |
| ---------------------------------------- | ------- |
| Promise&lt;[ActionMenuSuccessResponse](#actionmenusuccessresponse)&gt; | 菜单响应结果。 |
**示例:**
```js
```js
prompt.showActionMenu({
title: 'showActionMenu Title Info',
buttons: [
......@@ -227,7 +237,7 @@ prompt.showActionMenu({
.catch(err => {
console.info('showActionMenu error: ' + err);
})
```
```
## ActionMenuOptions
操作菜单的选项。
......
......@@ -66,7 +66,8 @@ writeRemoteObject(object: [IRemoteObject](#iremoteobject)): boolean
**系统能力**:SystemCapability.Communication.IPC.Core
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| object | [IRemoteObject](#iremoteobject) | 是 | 要序列化并写入MessageParcel的远程对象。 |
......@@ -156,7 +157,8 @@ writeInterfaceToken(token: string): boolean
**系统能力**:SystemCapability.Communication.IPC.Core
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| token | string | 是 | 字符串类型描述符。 |
......
# 基于JS扩展的类Web开发范式
# 兼容JS的类Web开发范式
- 组件通用信息
- [通用属性](js-components-common-attributes.md)
......
......@@ -64,7 +64,8 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外,还支持如下事件:
- 当input类型为text、email、date、time、number、password时,支持如下事件:
| 名称 | 参数 | 描述 |
| 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;value: inputValue<br>&nbsp;} | 输入框输入内容发生变化时触发该事件,返回用户当前输入值。<br/>改变value属性值不会触发该回调。 |
| enterkeyclick | {<br>&nbsp;value: enterKey<br>&nbsp;} | 软键盘enter键点击后触发该事件,返回enter按钮的类型,enterKey类型为number,可选值为:<br/>-&nbsp;2:设置enterkeytype属性为go时生效。<br/>-&nbsp;3:设置enterkeytype属性为search时生效。<br/>-&nbsp;4:设置enterkeytype属性为send时生效。<br/>-&nbsp;5:设置enterkeytype属性为next时生效。<br/>-&nbsp;6:不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 |
......@@ -75,6 +76,7 @@
| selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | 文本选择变化时触发事件。 |
- 当input类型为checkbox、radio时,支持如下事件:
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 |
......
......@@ -171,7 +171,7 @@
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext" "></picker>
oncancel="textoncancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
......
......@@ -25,6 +25,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
## 事件
仅支持如下事件:
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| pagestart | {url: string} | 加载网页时触发。 |
......@@ -33,6 +34,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
## 方法
仅支持如下方法:
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| reload | - | 重新加载页面。 |
......
......@@ -42,6 +42,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| -------------------- | ------------------ | ---- | ---------------------------------------- |
| type | string | 是 | 设置为'2d',返回值为2D绘制对象,该对象可用于在画布组件上绘制矩形、文本、图片等。 |
......@@ -54,6 +55,7 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
| antialias | boolean | 是否开启抗锯齿功能,默认为false。 |
**返回值:**
| 类型 | 说明 |
| ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
......@@ -65,12 +67,14 @@ toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 |
**返回值:**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
......
......@@ -13,12 +13,14 @@ addColorStop(offset: number, color: string): void
设置渐变断点值,包括偏移和颜色。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------- |
| offset | number | 设置渐变点距离起点的位置占总体长度的比例,范围为0到1。 |
| color | string | 设置渐变的颜色。 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......
......@@ -380,6 +380,7 @@ export default {
### globalCompositeOperation
类型字段说明
| 值 | 描述 |
| ---------------- | ------------------------ |
| source-over | 在现有绘制内容上显示新绘制内容,属于默认值。 |
......@@ -570,6 +571,7 @@ fillRect(x: number, y: number, width:number, height: number): void
填充一个矩形。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形左上角点的x坐标。 |
......@@ -606,6 +608,7 @@ clearRect(x: number, y: number, width:number, height: number): void
删除指定区域内的绘制内容。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形上的左上角x坐标。 |
......@@ -644,6 +647,7 @@ strokeRect(x: number, y: number, width:number, height: number): void
绘制具有边框的矩形,矩形内部不填充。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------ |
| x | number | 指定矩形的左上角x坐标。 |
......@@ -680,6 +684,7 @@ fillText(text: string, x: number, y: number): void
绘制填充类文本。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
......@@ -715,6 +720,7 @@ strokeText(text: string, x: number, y: number): void
绘制描边类文本。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| text | string | 需要绘制的文本内容。 |
......@@ -750,11 +756,13 @@ measureText(text: string): TextMetrics
该方法返回一个文本测算的对象,通过该对象可以获取指定文本的宽度值。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ---------- |
| text | string | 需要进行测量的文本。 |
**返回值:**
| 类型 | 说明 |
| ----------- | -------------------------------------- |
| TextMetrics | 包含指定字体的宽度,该宽度可以通过TextMetrics.width来获取。 |
......@@ -853,6 +861,7 @@ moveTo(x: number, y: number): void
路径从当前点移动到指定点。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
......@@ -889,6 +898,7 @@ lineTo(x: number, y: number): void
从当前点到指定点进行路径连接。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------- |
| x | number | 指定位置的x坐标。 |
......@@ -957,12 +967,14 @@ createPattern(image: Image, repetition: string): Object
通过指定图像和重复方式创建图片填充的模板。
**参数:**
| 参数 | 类型 | 描述 |
| ---------- | ------ | ---------------------------------------- |
| image | Image | 图源对象,具体参考[Image对象](../arkui-js/js-components-canvas-image.md)。 |
| repetition | string | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**返回值:**
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 指定图像填充的Pattern对象。 |
......@@ -999,6 +1011,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
......@@ -1039,6 +1052,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
......@@ -1077,6 +1091,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
**参数:**
| 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
......@@ -1116,6 +1131,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
......@@ -1154,6 +1170,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
**参数:**
| 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
......@@ -1195,6 +1212,7 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
......@@ -1291,6 +1309,7 @@ rotate(rotate: number): void
针对当前坐标轴进行顺时针旋转。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ---------------------------------------- |
| rotate | number | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
......@@ -1324,6 +1343,7 @@ scale(x: number, y: number): void
设置canvas画布的缩放变换属性,后续的绘制操作将按照缩放比例进行缩放。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| x | number | 设置水平方向的缩放值。 |
......@@ -1366,6 +1386,7 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时
> - y' = skewX \* x + scaleY \* y + translateY
**参数:**
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
......@@ -1410,6 +1431,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
setTransfrom方法使用的参数和transform()方法相同,但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
**参数:**
| 参数 | 类型 | 描述 |
| ---------- | ------ | -------- |
| scaleX | number | 指定水平缩放值。 |
......@@ -1451,6 +1473,7 @@ translate(x: number, y: number): void
移动当前坐标系的原点。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x | number | 设置水平平移量。 |
......@@ -1486,12 +1509,14 @@ createPath2D(path: Path2D, cmds: string): Path2D
创建一个Path2D对象。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| path | Path2D | Path2D对象。 |
| cmds | string | SVG的Path描述字符串。 |
**返回值:**
**返回值:**
[Path2D对象](../arkui-js/js-components-canvas-path2d.md)
**示例:**
......@@ -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)。 |
......@@ -1623,6 +1649,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
创建一个线性渐变色,返回CanvasGradient对象,请参考[CanvasGradient对象](../arkui-js/js-components-canvas-canvasgradient.md)
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------- |
| x0 | number | 起点的x轴坐标。 |
......@@ -1631,6 +1658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): Object
| y1 | number | 终点的y轴坐标。 |
**返回值:**
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
......@@ -1672,6 +1700,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
创建一个径向渐变色,返回CanvasGradient对象,请参考CanvasGradient
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------------- |
| x0 | number | 起始圆的x轴坐标。 |
......@@ -1682,6 +1711,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
| r1 | number | 终点圆的半径。必须为非负且有限的。 |
**返回值:**
| 类型 | 说明 |
| ------ | ---------------------- |
| Object | 返回创建的CanvasGradient对象。 |
......@@ -1723,6 +1753,7 @@ createImageData(width: number, height: number, imageData: Object): Object
创建新的ImageData 对象,请参考[ImageData对象](../arkui-js/js-components-canvas-imagedata.md)
**参数:**
| 参数 | 类型 | 描述 |
| --------- | ------ | ----------------- |
| width | number | ImageData的宽度。 |
......@@ -1730,6 +1761,7 @@ createImageData(width: number, height: number, imageData: Object): Object
| imagedata | Object | 复制现有的ImageData对象。 |
**返回值:**
| 类型 | 说明 |
| ------ | ----------------- |
| Object | 返回创建的ImageData对象。 |
......@@ -1761,6 +1793,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
以当前canvas指定区域内的像素创建ImageData对象。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | --------------- |
| sx | number | 需要输出的区域的左上角x坐标。 |
......@@ -1769,6 +1802,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
| sh | number | 需要输出的区域的高度。 |
**返回值:**
| 类型 | 说明 |
| ------ | ----------------------- |
| Object | 返回包含指定区域像素的ImageData对象。 |
......@@ -1799,6 +1833,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
使用ImageData数据填充新的矩形区域。
**参数:**
| 参数 | 类型 | 描述 |
| ----------- | ------ | ----------------------------- |
| imagedata | Object | 包含像素值的ImageData对象。 |
......@@ -1885,6 +1920,7 @@ setLineDash(segments: Array): void
设置画布的虚线样式。
**参数:**
| 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- |
| segments | Array | 作为数组用来描述线段如何交替和间距长度。 |
......@@ -1919,6 +1955,7 @@ getLineDash(): Array
获得当前画布的虚线样式。
**返回值:**
| 类型 | 说明 |
| ----- | ------------------------ |
| Array | 返回数组,该数组用来描述线段如何交替和间距长度。 |
......@@ -1949,6 +1986,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
显示给定的ImageBitmap对象。
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| bitmap | ImageBitmap | 待显示的ImageBitmap对象。 |
......
......@@ -25,12 +25,14 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC
获取offscreen canvas绘图上下文,返回值为2D绘制对象。
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | ---------------------- |
| contextId | string | 是 | 仅支持&nbsp;'2d'。 |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 |
**返回值:**
| 类型 | 说明 |
| ---------------------------------------- | --------------------------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象,用于在画布组件上绘制矩形、文本、图片等。 |
......@@ -42,13 +44,15 @@ toDataURL(type?: string, quality?:number):
生成一个包含图片展示的URL。
**参数:**
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数,用于指定图像格式,默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下,可以从0到1的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。 |
**返回值:**
| 类型 | 说明 |
| ------ | --------- |
| string | 图像的URL地址。 |
......@@ -61,6 +65,7 @@ transferToImageBitmap(): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
**返回值:**
| 类型 | 说明 |
| ---------------------------------------- | --------------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
......
......@@ -12,12 +12,14 @@ addPath(path: Object): void
将另一个路径添加到当前的路径对象中。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| path | Object | 需要添加到当前路径的路径对象 |
**示例:**
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -47,7 +49,8 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
设置路径变换矩阵。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ---------- | ------ | ------- |
| scaleX | number | x轴的缩放比例 |
......@@ -58,6 +61,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
| translateY | number | y轴的平移距离 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -88,6 +92,7 @@ closePath(): void
将路径的当前点移回到路径的起点,当前点到起点间画一条直线。如果形状已经闭合或只有一个点,则此功能不执行任何操作。
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -120,13 +125,15 @@ moveTo(x: number, y: number): void
将路径的当前坐标点移动到目标点,移动过程中不绘制线条。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -159,13 +166,15 @@ lineTo(x: number, y: number): void
从当前点绘制一条直线到目标点。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ------- |
| x | number | 目标点X轴坐标 |
| y | number | 目标点Y轴坐标 |
**示例:**
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -199,7 +208,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
创建三次贝赛尔曲线的路径。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | -------------- |
| cp1x | number | 第一个贝塞尔参数的x坐标值。 |
......@@ -210,6 +220,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
| y | number | 路径结束时的y坐标值。 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -241,6 +252,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
创建二次贝赛尔曲线的路径。
**参数:**
| 参数 | 类型 | 描述 |
| ---- | ------ | ----------- |
| cpx | number | 贝塞尔参数的x坐标值。 |
......@@ -248,7 +260,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
| x | number | 路径结束时的x坐标值。 |
| y | number | 路径结束时的y坐标值。 |
**示例:**
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -280,6 +293,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
绘制弧线路径。
**参数:**
| 参数 | 类型 | 描述 |
| ------------- | ------- | ---------- |
| x | number | 弧线圆心的x坐标值。 |
......@@ -290,6 +304,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
| anticlockwise | boolean | 是否逆时针绘制圆弧。 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -319,7 +334,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
依据圆弧经过的点和圆弧半径创建圆弧路径。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | --------------- |
| x1 | number | 圆弧经过的第一个点的x坐标值。 |
......@@ -329,6 +345,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
| radius | number | 圆弧的圆半径值。 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -358,7 +375,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
在规定的矩形区域绘制一个椭圆。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ------------- | ------ | ------------------------------------ |
| x | number | 椭圆圆心的x轴坐标。 |
......@@ -371,6 +389,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
| anticlockwise | number | 是否以逆时针方向绘制椭圆,0为顺时针,1为逆时针。(可选参数,默认为0) |
**示例:**
```html
<!-- xxx.hml -->
<div>
......@@ -400,7 +419,8 @@ rect(x: number, y: number, width: number, height: number): void
创建矩形路径。
**参数:**
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ------ | ------------- |
| x | number | 指定矩形的左上角x坐标值。 |
......@@ -409,6 +429,7 @@ rect(x: number, y: number, width: number, height: number): void
| height | number | 指定矩形的高度。 |
**示例:**
```html
<!-- xxx.hml -->
<div>
......
......@@ -141,6 +141,7 @@ setData(key: string, value: object): boolean
| value | object | 是 | 要存储的数据。 |
**返回值:**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 |
......@@ -173,6 +174,7 @@ getData(key: string): object
| key | string | 是 | 数据键值。 |
**返回值:**
| 类型 | 说明 |
| ------ | ------ |
| object | 获取的数据。 |
......@@ -204,6 +206,7 @@ clearData(key?: string): boolean
| key | string | 否 | 数据键值。 |
**返回值:**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 |
......@@ -230,6 +233,7 @@ setDragImage(pixelmap: PixelMap, offsetX: number,offsetY: number): boolean
| offsetY | number | 是 | 相对于图片的纵向偏移量。 |
**返回值:**
| 类型 | 说明 |
| ---- | ------------------------ |
| boolean | 执行结果,true表示成功,false表示失败。 |
......
......@@ -32,6 +32,7 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
支持以下四种方式:\#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;(从左上角到右下角)。 |
......
......@@ -11,6 +11,7 @@
animate( keyframes: Keyframes, options: Options):void
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | --------- | ---- | ------------------------------------ |
| keyframes | keyframes | 是 | 设置动画样式 |
......@@ -218,6 +219,7 @@ createIntersectionObserver(param?: ObserverParam): Observer
监听元素在当前页面的可见范围。
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------------- | ---- | -------------- |
| param | ObserverParam | - | 获取observer的回调。 |
......
......@@ -24,24 +24,24 @@
除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ---------------------------------------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:<br/>-&nbsp;nowrap:不换行,单行显示。<br/>-&nbsp;wrap:换行,多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:<br/>-&nbsp;flex-start:项目位于容器的开头。<br/>-&nbsp;flex-end:项目位于容器的结尾。<br/>-&nbsp;center:项目位于容器的中心。<br/>-&nbsp;space-between:项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around:项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式,可选值为:<br/>-&nbsp;stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start:元素向交叉轴起点对齐。<br/>-&nbsp;flex-end:元素向交叉轴终点对齐。<br/>-&nbsp;center:元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:<br/>-&nbsp;flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;none:不渲染此元素<br />-inline-flex<sup>9+</sup>:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。<br/>示例:如设置grid-template-columns为:<br/>-&nbsp;50px&nbsp;100px&nbsp;60px:分三列,第一列50px,第二列100px,第三列60px;<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;<br/>-&nbsp;30%&nbsp;20%&nbsp;50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;<br/>-&nbsp;repeat(2,100px):分两列,第一列100px,第二列100px;<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局,可选值为:<br/>-&nbsp;row:逐行填充元素,如果行空间不够,则新增行;<br/>-&nbsp;column:逐列填充元素,如果列空间不够,则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible:多个子元素内容超过元素大小时,显示在元素外面;<br/>-&nbsp;hidden:元素内容超过元素大小时,进行裁切显示;<br/>-&nbsp;scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小,默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式:<br/>-&nbsp;stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;<br/>-&nbsp;flex-start:Flex布局容器内元素向交叉轴起点对齐;<br/>-&nbsp;flex-end:Flex布局容器内元素向交叉轴终点对齐;<br/>-&nbsp;center:Flex布局容器内元素在交叉轴居中对齐;<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果,可选值为:<br/>-&nbsp;spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;<br/>-&nbsp;fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;<br/>-&nbsp;none:滑动到边缘后无效果 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:<br/>-&nbsp;nowrap:不换行,单行显示。<br/>-&nbsp;wrap:换行,多行显示。 |
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:<br/>-&nbsp;flex-start:项目位于容器的开头。<br/>-&nbsp;flex-end:项目位于容器的结尾。<br/>-&nbsp;center:项目位于容器的中心。<br/>-&nbsp;space-between:项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around:项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式,可选值为:<br/>-&nbsp;stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start:元素向交叉轴起点对齐。<br/>-&nbsp;flex-end:元素向交叉轴终点对齐。<br/>-&nbsp;center:元素在交叉轴居中。<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与’flex-start‘等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:<br/>-&nbsp;flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;none:不渲染此元素<br />-inline-flex<sup>9+</sup>:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。<br/>示例:如设置grid-template-columns为:<br/>-&nbsp;50px&nbsp;100px&nbsp;60px:分三列,第一列50px,第二列100px,第三列60px;<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;<br/>-&nbsp;30%&nbsp;20%&nbsp;50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;<br/>-&nbsp;repeat(2,100px):分两列,第一列100px,第二列100px;<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 |
| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局,可选值为:<br/>-&nbsp;row:逐行填充元素,如果行空间不够,则新增行;<br/>-&nbsp;column:逐列填充元素,如果列空间不够,则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible:多个子元素内容超过元素大小时,显示在元素外面;<br/>-&nbsp;hidden:元素内容超过元素大小时,进行裁切显示;<br/>-&nbsp;scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小,默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式:<br/>-&nbsp;stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;<br/>-&nbsp;flex-start:Flex布局容器内元素向交叉轴起点对齐;<br/>-&nbsp;flex-end:Flex布局容器内元素向交叉轴终点对齐;<br/>-&nbsp;center:Flex布局容器内元素在交叉轴居中对齐;<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果,可选值为:<br/>-&nbsp;spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;<br/>-&nbsp;fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;<br/>-&nbsp;none:滑动到边缘后无效果 |
## 事件
......
......@@ -7,7 +7,7 @@
<!-- comp.hml -->
<div class="item">
<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>
```
......
......@@ -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 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length],短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel:使用斜角连接路径段;<br/>miter:使用尖角连接路径段;<br/>round:使用圆角连接路径段。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt:不在路径两端扩展;<br/>round:在路径的末端延伸半个圆,直径等于线度。<br/>square:在路径的末端延伸半个圆,宽度等于线宽的一半,高度等于线宽。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt:不在路径两端扩展;<br/>round:在路径的末端延伸半个圆,直径等于线宽;<br/>square:在路径的末端延伸一个矩形,宽度等于线宽的一半,高度等于线宽。 |
| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
......@@ -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 @@
## 子组件
支持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 @@
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round:在路径的末端延伸半个圆,直径等于线宽
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt:不在路径两端扩展
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square:在路径的末端延伸一个矩形,宽度等于线宽的一半,高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg>
</div>
......
......@@ -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 @@
## 子组件
支持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 @@
## 子组件
支持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 @@
## 子组件
支持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 @@
## 子组件
支持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 @@
## 子组件
tspan
[tspan](js-components-svg-tspan.md)
## 属性
......
......@@ -17,7 +17,7 @@
## 子组件
支持tspan
支持[tspan](js-components-svg-tspan.md)
支持以下表格中的属性。
......
......@@ -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 @@
## 接口
Blank(min?: Length)
Blank(min?: number \| string)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | [Length](../../ui/ts-types.md) | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
| min | number \| string | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 |
## 属性
......
......@@ -6,19 +6,9 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限说明
## 需要权限
使用网络图片时,需要在config.json(FA模型)或者module.json5(Stage模型)对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
```
"abilities": [
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
使用网络图片时,需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)
## 子组件
......@@ -42,21 +32,21 @@ Image(src: string | PixelMap | Resource)
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。<br/>> **说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | 设置图片渲染的模式。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>>&nbsp;**说明:**<br/>>&nbsp;PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。 |
| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | - | 仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | 设置图片是否可复制(SVG图片不支持复制)。<br/>当设置copyOption为非CopyOptions.None时,支持快捷组合键'CTRL+C'进行复制。 |
| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | - | 给图像设置颜色滤镜效果。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| ------------------------ | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图,支持本地图片和网络图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。<br/>> **说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | 设置图片渲染的模式。<br/>>&nbsp;**说明:**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| sourceSize | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | - | 设置图片裁剪尺寸,将原始图片解码成pixelMap,指定尺寸的图片,单位为px。<br/>>&nbsp;**说明:**<br/>>&nbsp;PixelMap资源不支持该属性。 |
| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向,在RTL语言环境下显示镜像翻转显示效果。 |
| fitOriginalSize | boolean | true | 图片组件尺寸未设置时,其显示尺寸是否跟随图源尺寸。 |
| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | - | 仅对svg图源生效,设置后会替换svg图片的fill颜色。 |
| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作,该操作会根据显示区域的尺寸决定用于绘制的图源尺寸,有利于减少内存占用。 |
| syncLoad<sup>8+</sup> | boolean | false | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | 设置图片是否可复制(SVG图片不支持复制)。<br/>当设置copyOption为非CopyOptions.None时,支持快捷组合键'CTRL+C'进行复制。 |
| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md#colorfilter9) | - | 给图像设置颜色滤镜效果。 |
> **说明:**
> 使用快捷组合键对Image组件复制的前提是,该组件必须处于获焦状态。将Image组件的属性focusable设置为true,即可使用TAB键将焦点切换到Image组件上,再将Image组件的focusOnTouch属性设置为true,即可实现点击获焦。
......@@ -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/> |
| 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动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。 |
## 示例
......
......@@ -3,7 +3,7 @@
滚动选择时间的组件。
> **说明:**
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -20,31 +20,31 @@
TimePicker(options?: TimePickerOptions)
默认以00:00至23:59的时间区间创建滑动选择器。
默认以00:00至23:59的时间区间创建滑动选择器。
- options参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ---- | ---- | ------ | --------- |
| selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------- | ------- | ----- | --------------------- |
| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| 名称 | 功能描述 |
| ---------------------------------------- | ----------- |
| onChange(callback:&nbsp;(value:&nbsp;TimePickerResult )&nbsp;=&gt;&nbsp;void) | 选择时间时触发该事件。 |
### TimePickerResult对象说明
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| hour | number | 选中时间的时。 |
| 名称 | 参数类型 | 描述 |
| ------ | ------ | ------- |
| hour | number | 选中时间的时。 |
| minute | number | 选中时间的分。 |
......
# CanvasRenderingContext2D对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -13,9 +14,9 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | - | 见[RenderingContextSettings](#renderingcontextsettings)。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 是 | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings
......@@ -26,9 +27,9 @@ RenderingContextSettings(antialias?: boolean)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ----- | ---------------- |
| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ------- | ---- | ----------------------------- |
| antialias | boolean | 否 | 表明canvas是否开启抗锯齿。<br>默认值:false |
## 属性
......@@ -38,23 +39,24 @@ RenderingContextSettings(antialias?: boolean)
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式,可选值为:<br/>-&nbsp;'butt':线端点以方形结束。<br/>-&nbsp;'round':线端点以圆形结束。<br/>-&nbsp;'square':线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。<br/>默认值:'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式,可选值为:<br/>-&nbsp;'round':在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel':在线段相连处使用三角形为底填充,&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter':在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。<br/>默认值:'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。 <br/>默认值:10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法:ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列。<br/>语法:ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选),用于指定字体样式,支持如下几种样式:'normal','italic'。<br/>-&nbsp;font-weight(可选),用于指定字体的粗细,支持如下几种类型:'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列,支持如下几种类型:'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值:'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;'left':文本左对齐。<br/>-&nbsp;'right':文本右对齐。<br/>-&nbsp;'center':文本居中对齐。<br/>-&nbsp;'start':文本对齐界线开始的地方。<br/>-&nbsp;'end':文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。<br/>默认值:'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式,可选值为:<br/>-&nbsp;'alphabetic':文本基线是标准的字母基线。<br/>-&nbsp;'top':文本基线在文本块的顶部。<br/>-&nbsp;'hanging':文本基线是悬挂基线。<br/>-&nbsp;'middle':文本基线在文本块的中间。<br/>-&nbsp;'ideographic':文字基线是表意字基线;如果字符本身超出了alphabetic基线,那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom':文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值:'alphabetic'。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式,可选值为:<br/>-&nbsp;'butt':线端点以方形结束。<br/>-&nbsp;'round':线端点以圆形结束。<br/>-&nbsp;'square':线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。<br/>默认值:'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式,可选值为:<br/>-&nbsp;'round':在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel':在线段相连处使用三角形为底填充,&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter':在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。<br/>默认值:'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。 <br/>默认值:10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法:ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列。<br/>语法:ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选),用于指定字体样式,支持如下几种样式:'normal','italic'。<br/>-&nbsp;font-weight(可选),用于指定字体的粗细,支持如下几种类型:'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列,支持如下几种类型:'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值:'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;'left':文本左对齐。<br/>-&nbsp;'right':文本右对齐。<br/>-&nbsp;'center':文本居中对齐。<br/>-&nbsp;'start':文本对齐界线开始的地方。<br/>-&nbsp;'end':文本对齐界线结束的地方。<br/>ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。<br/>默认值:'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式,可选值为:<br/>-&nbsp;'alphabetic':文本基线是标准的字母基线。<br/>-&nbsp;'top':文本基线在文本块的顶部。<br/>-&nbsp;'hanging':文本基线是悬挂基线。<br/>-&nbsp;'middle':文本基线在文本块的中间。<br/>-&nbsp;'ideographic':文字基线是表意字基线;如果字符本身超出了alphabetic基线,那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom':文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值:'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度,0.0为完全透明,1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量,精度为float。 <br/>默认值:0.0。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量,精度为float。 <br/>默认值:0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over','source-atop','source-in','source-out','destination-over','destination-atop','destination-in','destination-out','lighter','copy','xor'。<br/>默认值:'source-over'。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别,值越大越模糊,精度为float。 <br/>默认值:0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别,值越大越模糊,精度为float。 <br/>默认值:0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 <br/>默认值:true。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 <br/>默认值:true。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
>fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)','rgba(255, 255, 255, 1.0)','\#FFFFFF'。
> **说明:**
>
> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)','rgba(255, 255, 255, 1.0)','\#FFFFFF'。
### fillStyle
......@@ -662,12 +664,12 @@ fillRect(x: number, y: number, w: number, h: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形左上角点的x坐标。 |
| y | number | 是 | 0 | 指定矩形左上角点的y坐标。 |
| width | number | 是 | 0 | 指定矩形的宽度。 |
| height | number | 是 | 0 | 指定矩形的高度。 |
**示例:**
......@@ -706,12 +708,12 @@ strokeRect(x: number, y: number, w: number, h: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ------------ |
| x | number | 是 | 0 | 指定矩形的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例:**
......@@ -750,12 +752,12 @@ clearRect(x: number, y: number, w: number, h: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形上的左上角x坐标。 |
| y | number | 是 | 0 | 指定矩形上的左上角y坐标。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例:**
......@@ -796,12 +798,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | "" | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
**示例:**
......@@ -841,12 +843,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。|
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 |
**示例:**
......@@ -886,33 +888,33 @@ measureText(text: string): TextMetrics
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
**返回值:**
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
**TextMetrics类型描述:**
| 属性 | 类型 | 描述 |
| ----- | ------ | ------- |
| width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离,当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离,当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离,当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离,当前值为0。|
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离,当前值为0。|
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离,当前值为0。|
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离,当前值为0。|
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,当前值为0。|
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离,当前值为0。|
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离,当前值为0。|
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离,当前值为0。|
| 属性 | 类型 | 描述 |
| ------------------------ | ------ | ---------------------------------------- |
| width | number | 字符串的宽度。 |
| height | number | 字符串的高度。 |
| actualBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界顶部的距离,当前值为0。 |
| actualBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的矩形边界底部的距离,当前值为0。 |
| actualBoundingBoxLeft | number | 平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界左侧的距离,当前值为0。 |
| actualBoundingBoxRight | number | 平行于基线,从CanvasRenderingContext2D.textAlign 属性确定的对齐点到文本矩形边界右侧的距离,当前值为0。 |
| alphabeticBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 alphabetic 基线的距离,当前值为0。 |
| emHeightAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块顶部的距离,当前值为0。 |
| emHeightDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框中 em 方块底部的距离,当前值为0。 |
| fontBoundingBoxAscent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形最高边界顶部的距离,当前值为0。 |
| fontBoundingBoxDescent | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到渲染文本的所有字体的矩形边界最底部的距离,当前值为0。 |
| hangingBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 hanging 基线的距离,当前值为0。 |
| ideographicBaseline | number | 从CanvasRenderingContext2D.textBaseline 属性标明的水平线到线框的 ideographic 基线的距离,当前值为0。 |
......@@ -956,9 +958,9 @@ stroke(path?: Path2D): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**示例:**
......@@ -1040,10 +1042,10 @@ moveTo(x: number, y: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**示例:**
......@@ -1085,10 +1087,10 @@ lineTo(x: number, y: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------- |
| x | number | 是 | 0 | 指定位置的x坐标。 |
| y | number | 是 | 0 | 指定位置的y坐标。 |
**示例:**
......@@ -1170,16 +1172,16 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象,具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象,具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
**返回值:**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例:**
......@@ -1221,14 +1223,14 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------- |
| cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 |
| cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 |
| cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 |
| cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例:**
......@@ -1270,12 +1272,12 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 |
| cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 |
| x | number | 是 | 0 | 路径结束时的x坐标值。 |
| y | number | 是 | 0 | 路径结束时的y坐标值。 |
**示例:**
......@@ -1317,14 +1319,14 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------------- | ------- | ---- | ----- | ---------- |
| x | number | 是 | 0 | 弧线圆心的x坐标值。 |
| y | number | 是 | 0 | 弧线圆心的y坐标值。 |
| radius | number | 是 | 0 | 弧线的圆半径。 |
| startAngle | number | 是 | 0 | 弧线的起始弧度。 |
| endAngle | number | 是 | 0 | 弧线的终止弧度。 |
| counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 |
**示例:**
......@@ -1365,13 +1367,13 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | --------------- |
| x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 |
| y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 |
| x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 |
| y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 |
| radius | number | 是 | 0 | 圆弧的圆半径值。 |
**示例:**
......@@ -1412,16 +1414,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度,单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度,以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度,以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---------------- | ------- | ---- | ----- | ----------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
| radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 |
| rotation | number | 是 | 0 | 椭圆的旋转角度,单位为弧度。 |
| startAngle | number | 是 | 0 | 椭圆绘制的起始点角度,以弧度表示。 |
| endAngle | number | 是 | 0 | 椭圆绘制的结束点角度,以弧度表示。 |
| counterclockwise | boolean | 否 | false | 是否以逆时针方向绘制椭圆。 |
**示例:**
......@@ -1462,12 +1464,12 @@ rect(x: number, y: number, w: number, h: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| x | number | 是 | 0 | 指定矩形的左上角x坐标值。 |
| y | number | 是 | 0 | 指定矩形的左上角y坐标值。 |
| w | number | 是 | 0 | 指定矩形的宽度。 |
| h | number | 是 | 0 | 指定矩形的高度。 |
**示例:**
......@@ -1507,9 +1509,9 @@ fill(fillRule?: CanvasFillRule): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为:"nonzero", "evenodd"。|
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为:"nonzero", "evenodd"。 |
**示例:**
......@@ -1548,10 +1550,10 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | | Path2D填充路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为:"nonzero", "evenodd"。|
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | 是 | | Path2D填充路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要填充对象的规则。<br/>可选参数为:"nonzero", "evenodd"。 |
**示例:**
......@@ -1588,7 +1590,7 @@ struct Fill {
.height('100%')
}
}
```
```
![zh-cn_image_000000127777774](figures/zh-cn_image_000000127777774.png)
......@@ -1601,9 +1603,9 @@ clip(fillRule?: CanvasFillRule): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为:"nonzero", "evenodd"。|
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为:"nonzero", "evenodd"。 |
**示例:**
......@@ -1644,11 +1646,11 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| path | Path2D | 是 | - | Path2D剪切路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为:"nonzero", "evenodd"。|
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| path | Path2D | 是 | - | Path2D剪切路径。 |
| fillRule | CanvasFillRule | 否 | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为:"nonzero", "evenodd"。 |
### filter
......@@ -1659,9 +1661,9 @@ filter(filter: string): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。|
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| filter | string | 是 | - | 接受各类滤镜效果的函数。 |
### getTransform
......@@ -1693,9 +1695,9 @@ rotate(angle: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | 是 | 0 | 设置顺时针旋转的弧度值,可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
**示例:**
......@@ -1735,10 +1737,10 @@ scale(x: number, y: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | 是 | 0 | 设置水平方向的缩放值。 |
| y | number | 是 | 0 | 设置垂直方向的缩放值。 |
**示例:**
......@@ -1786,14 +1788,14 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------------- |
| a | number | 是 | 0 | scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 | skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 | translateX: 指定水平移动值。 |
| f | number | 是 | 0 | translateY: 指定垂直移动值。 |
**示例:**
......@@ -1839,14 +1841,14 @@ setTransfrom方法使用的参数和transform()方法相同,但setTransform()
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ---- | -------- |
| a | number | 是 | 0 |scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 |skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 |skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 |scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 |translateX: 指定水平移动值。 |
| f | number | 是 | 0 |translateY: 指定垂直移动值。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------------------- |
| a | number | 是 | 0 | scaleX: 指定水平缩放值。 |
| b | number | 是 | 0 | skewX: 指定水平倾斜值。 |
| c | number | 是 | 0 | skewY: 指定垂直倾斜值。 |
| d | number | 是 | 0 | scaleY: 指定垂直缩放值。 |
| e | number | 是 | 0 | translateX: 指定水平移动值。 |
| f | number | 是 | 0 | translateY: 指定垂直移动值。 |
**示例:**
......@@ -1894,10 +1896,10 @@ translate(x: number, y: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x | number | 是 | 0 | 设置水平平移量。 |
| y | number | 是 | 0 | 设置竖直平移量。 |
**示例:**
......@@ -1942,17 +1944,17 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源,请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时,将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时,将图像高度拉伸或压缩为绘制区域的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源,请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
| sw | number | 否 | 0 | 裁切源图像时需要裁切的宽度。 |
| sh | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dw | number | 否 | 0 | 绘制区域的宽度。当绘制区域的宽度和裁剪图像的宽度不一致时,将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dh | number | 否 | 0 | 绘制区域的高度。当绘制区域的高度和裁剪图像的高度不一致时,将图像高度拉伸或压缩为绘制区域的高度。 |
**示例:**
......@@ -1993,10 +1995,10 @@ createImageData(sw: number, sh: number): ImageData
**参数:**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ------ | ------ | ---- | ---- | ------------- |
| sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 |
| 参数 | 类型 | 必填 | 默认 | 描述 |
| ---- | ------ | ---- | ---- | ------------- |
| sw | number | 是 | 0 | ImageData的宽度。 |
| sh | number | 是 | 0 | ImageData的高度。 |
### createImageData
......@@ -2007,15 +2009,15 @@ createImageData(imageData: ImageData): ImageData
**参数:**
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ------ | ---- | ---- | ----------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md)| 是 | null | 复制现有的ImageData对象。 |
| 参数 | 类型 | 必填 | 默认 | 描述 |
| --------- | ---------------------------------------- | ---- | ---- | ----------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 复制现有的ImageData对象。 |
**返回值:**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。|
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### getPixelMap
......@@ -2026,18 +2028,18 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值:**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 |
| 类型 | 说明 |
| ---------------------------------------- | ------------- |
| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象。 |
### getImageData
......@@ -2047,18 +2049,18 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | --------------- |
| sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
| sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
| sw | number | 是 | 0 | 需要输出的区域的宽度。 |
| sh | number | 是 | 0 | 需要输出的区域的高度。 |
**返回值:**
| 类型 | 说明 |
| ---------- | ---------------------------------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
| 类型 | 说明 |
| ---------------------------------------- | -------------- |
| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
### putImageData
......@@ -2071,15 +2073,15 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number | 是 | 0 | 填充区域在y轴方向的偏移量。 |
| dirtyX | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
| dirtyY | number | 否 | 0 | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
| dirtyWidth | number | 否 | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。 |
| dirtyHeight | number | 否 | imagedata的高度 | 源图像数据矩形裁切范围的高度。 |
**示例:**
......@@ -2125,8 +2127,8 @@ setLineDash(segments: number[]): void
**参数:**
| 参数 | 类型 | 描述 |
| -------- | ----- | -------------------- |
| 参数 | 类型 | 描述 |
| -------- | -------- | ------------------- |
| segments | number[] | 描述线段如何交替和线段间距长度的数组。 |
**示例:**
......@@ -2167,8 +2169,8 @@ getLineDash(): number[]
**返回值:**
| 类型 | 说明 |
| ----- | ------------------------ |
| 类型 | 说明 |
| -------- | ------------------------ |
| number[] | 返回数组,该数组用来描述线段如何交替和间距长度。 |
**示例:**
......@@ -2210,9 +2212,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| quality |imageSmoothingQuality | 支持如下三种类型:'low',&nbsp;'medium',&nbsp;'high'。 |
| 参数 | 类型 | 描述 |
| ------- | --------------------- | ---------------------------------------- |
| quality | imageSmoothingQuality | 支持如下三种类型:'low',&nbsp;'medium',&nbsp;'high'。 |
......@@ -2224,9 +2226,9 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
**参数:**
| 参数 | 类型 | 描述 |
| ------ | ----------- | ------------------ |
| bitmap |[ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
| 参数 | 类型 | 描述 |
| ------ | ---------------------------------------- | ------------------ |
| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
**示例:**
......@@ -2386,12 +2388,12 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | -------- |
| x0 | number | 是 | 0 | 起点的x轴坐标。 |
| y0 | number | 是 | 0 | 起点的y轴坐标。 |
| x1 | number | 是 | 0 | 终点的x轴坐标。 |
| y1 | number | 是 | 0 | 终点的y轴坐标。 |
**示例:**
......@@ -2435,14 +2437,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------------- |
| x0 | number | 是 | 0 | 起始圆的x轴坐标。 |
| y0 | number | 是 | 0 | 起始圆的y轴坐标。 |
| r0 | number | 是 | 0 | 起始圆的半径。必须是非负且有限的。 |
| x1 | number | 是 | 0 | 终点圆的x轴坐标。 |
| y1 | number | 是 | 0 | 终点圆的y轴坐标。 |
| r1 | number | 是 | 0 | 终点圆的半径。必须为非负且有限的。 |
**示例:**
......
......@@ -30,17 +30,19 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| 名称 | 参数类型 | 描述 |
| ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](../../ui/ts-types.md) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗背景色。 |
| color | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置文字颜色。 |
| selectedColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项文字颜色。 |
| popupColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗文字颜色。 |
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置选中项背景颜色。 |
| popupBackground | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 设置提示弹窗背景色。 |
| usingPopup | boolean | 设置是否使用提示弹窗。 |
| selectedFont | [Font](../../ui/ts-types.md) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md) | 设置字母索引条默认字体样式。 |
| itemSize | Length | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| selectedFont | [Font](../../ui/ts-types.md#font) | 设置选中项文字样式。 |
| popupFont | [Font](../../ui/ts-types.md#font) | 设置提示弹窗字体样式。 |
| font | [Font](../../ui/ts-types.md#font) | 设置字母索引条默认字体样式。 |
| itemSize | string \| number | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
- IndexerAlign枚举说明
| 名称 | 描述 |
......
......@@ -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 @@
## 接口
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()
| 名称 | 功能描述 |
| -------- | -------- |
| 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 @@
## 接口
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 | 否 |设置布局列数。|
|breakpoints|BreakPoints| 否 |用于设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。|
|direction|GridRowDirection| 否 |栅格布局排列方向。|
## GetterOption
## GutterOption
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| x | Length \| GridRowSizeOption | 否 | 水平getter option。 |
| y | Length \| GridRowSizeOption | 否 | 竖直getter option。 |
| x | Length \| GridRowSizeOption | 否 | 水平gutter option。 |
| y | Length \| GridRowSizeOption | 否 | 竖直gutter option。 |
## GridRowColumnOption
栅格在不同宽度设备类型下,栅格列数。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | number | 否 | 最小宽度类型设备。 |
......@@ -48,12 +50,25 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
| xl | number | 否 | 特大宽度类型设备。 |
| xxl | number | 否 | 超大宽度类型设备。 |
## GridRowSizeOption
栅格在不同宽度设备类型下,gutter的大小。
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| xs | Length | 否 | 最小宽度类型设备。 |
| sm | Length | 否 | 小宽度类型设备。 |
| md | Length | 否 | 中等宽度类型设备。 |
| lg | Length | 否 | 大宽度类型设备。 |
| xl | Length | 否 | 特大宽度类型设备。 |
| xxl | Length | 否 | 超大宽度类型设备。 |
## BreakPoints
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| value | Array<string> | 否 | 用于设置断点位置的单调递增数组。<br>默认值:["320vp", "520vp", "840vp"] |
| reference | BreakpointsReference | 否 | - | 竖直getter option。 |
| reference | BreakpointsReference | 否 | - | 竖直gutter option。 |
```ts
// 启用xs、sm、md共3个断点
breakpoints: {value: ["100vp", "200vp"]}
......@@ -108,7 +123,7 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
### onBreakpointChange
onBreakpointChange(callback: (breakpoints: string) => void
onBreakpointChange(callback: (breakpoints: string) => void)
**参数:**
......
......@@ -22,11 +22,6 @@ Circle(options?: {width?: string | number, height?: string | number})
| width | string \| number | 否 | 0 | 宽度。 |
| height | string \| number | 否 | 0 | 高度。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| width | string&nbsp;\|&nbsp;number | 是 | - | 宽度。 |
| height | string&nbsp;\|&nbsp;number | 是 | - | 高度。 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
......
......@@ -14,9 +14,7 @@
## AnimationOptions对象说明
### 属性
| 属性名称 | 属性类型 | 描述 |
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| duration | number | 动画持续时间,单位为毫秒。<br/>默认值:1000 |
| tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。<br/>默认值:1.0 |
......@@ -24,12 +22,8 @@
| delay | number | 单位为ms(毫秒),默认不延时播放。<br/>默认值:0 |
| iterations | number | 默认播放一次,设置为-1时表示无限次播放。<br/>默认值:1 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 设置动画播放模式,默认播放完成后重头开始播放。<br/>默认值:PlayMode.Normal |
| onFinish | ()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
### 接口
| 名称 | 功能描述 |
| -------- | -------- |
| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
## 示例
......
......@@ -8,17 +8,7 @@
## 权限列表
使用网络视频时,需要在config或者module.json对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
```js
"abilities":[
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
```
使用网络视频时,需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)
## 子组件
......
......@@ -13,29 +13,30 @@
## ActionSheet.show
show(options: {&nbsp;paramObject1})
show(value: {&nbsp;title: string&nbsp;|&nbsp;Resource,&nbsp;message: string&nbsp;|&nbsp;Resource,&nbsp;confirm?: {value: string&nbsp;|&nbsp;Resource,&nbsp;action:() => void},&nbsp;cancel?:()=>void,&nbsp;sheets: Array&lt;SheetInfo&gt;,&nbsp;autoCancel?:boolean,&nbsp;alignment?: DialogAlignment,&nbsp;offset?: { dx: number | string | Resource; dy: number | string | Resource } })
定义列表弹窗并弹出。
- paramObject1参数
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | 无标题 | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 弹窗内容。 |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗标题。 |
| message | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | - | 弹窗内容。 |
| autoCancel | boolean | 否 | true | 点击遮障层时,是否关闭弹窗。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| confirm | {<br/>value:&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource),<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 确认按钮的文本内容和点击回调。<br/>value:按钮文本内容。<br/>action:&nbsp;按钮选中时的回调。 |
| cancel | ()&nbsp;=&gt;&nbsp;void | 否 | - | 点击遮障层关闭dialog时的回调。 |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md) | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 |
| offset | {<br/>dx:&nbsp;Length,<br/>dy:&nbsp;Length<br/>} | 否 | {<br/>dx:&nbsp;0,<br/>dy:&nbsp;0<br/>} | 弹窗相对alignment所在位置的偏移量。 |
| sheets | Array<SheetInfo&gt; | 是 | - | 设置选项内容,每个选择项支持设置图片、文本和选中的回调。 |
| sheets | Array&lt;SheetInfo&gt; | 是 | - | 设置选项内容,每个选择项支持设置图片、文本和选中的回调。 |
- SheetInfo接口说明
## SheetInfo接口说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------ | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | sheet文本。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | 无 | sheet图标。 |
| action | ()=&gt;void | 是 | - | sheet选中的回调。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 是 | 选项的文本内容。 |
| icon | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | 否 | 选项的图标,默认无图标显示。 |
| action | ()=&gt;void | 是 | 选项选中的回调。 |
## 示例
......
......@@ -10,9 +10,9 @@
| 名称 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- |
| show | options:&nbsp;{&nbsp;paramObject1&nbsp;\|&nbsp;paramObject2} | - | 定义并显示AlertDialog组件。 |
| show | value:&nbsp;{&nbsp;AlertDialogParamWithConfirm&nbsp;\|&nbsp;AlertDialogParamWithButtons} | - | 定义并显示AlertDialog组件。 |
- paramObject1参数
## AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
......@@ -24,7 +24,7 @@
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | - | 弹窗容器宽度所占用栅格数。 |
- paramObject2参数
## AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| title | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 否 | - | 弹窗标题。 |
......
# 点击控制
设置组件是否可触摸
设置组件是否可以响应点击事件、触摸事件等手指交互事件
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -16,7 +16,7 @@
| **名称** | **参数类型** | **默认值** | **描述** |
| --------- | -------- | ------- | -------------- |
| touchable | boolean | true | 设置当前组件是否可以被触摸。 |
| touchable | boolean | true | 设置当前组件是否可以响应点击事件、触摸事件等手指交互事件。 |
## 示例
......
# 禁用控制
可交互状态下组件响应点击事件
组件是否可交互,可交互状态下响应[点击事件](ts-universal-events-click.md)[触摸事件](ts-universal-events-touch.md)[拖拽事件](ts-universal-events-drag-drop.md)[按键事件](ts-universal-events-key.md)[焦点事件](ts-universal-focus-event.md)[鼠标事件](ts-universal-mouse-key.md)
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| enabled | boolean | true | 值为true表示组件可用,可响应点击等操作;值为false时,不响应点击等操作。 |
| 名称 | 参数类型 | 描述 |
| ------- | ------- | ---------------------------------------- |
| enabled | boolean | 值为true表示组件可交互,响应点击等操作。<br>值为false表示组件不可交互,不响应点击等操作。<br>默认值:true |
## 示例
......
......@@ -17,9 +17,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;[Angle](../../ui/ts-types.md),<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;angle,<br/>end?:&nbsp;angle,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;Length,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向,设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center:为角度渐变的中心点。<br/>start:角度渐变的起点。<br/>end:角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](../../ui/ts-types.md)&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center:径向渐变的中心点。<br/>radius:径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
## 示例
......
......@@ -18,13 +18,13 @@
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。 |
| shadow | {<br/>radius:&nbsp;number,<br/>color?:&nbsp;Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型),<br/>offsetX?:&nbsp;number,<br/>offsetY?:&nbsp;number<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| shadow | {<br/>radius:&nbsp;number \| [Resource](../../ui/ts-types.md#resource),<br/>color?:&nbsp;Color \| string \| Resource,<br/>offsetX?:&nbsp;number \| Resource,<br/>offsetY?:&nbsp;number \| Resource<br/>} | - | 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比) |
| brightness | number | 1.0 | 为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑;大于1时亮度增加,数值越大亮度越大。 |
| saturate | number | 1.0 | 为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大;小于1时消色成分越大,饱和度越小。(百分比) |
| contrast | number | 1.0 | 为当前组件添加对比度效果,入参为对比度的值,值为1时,显示原图;大于1时,值越大对比度越高,图像越清晰醒目;小于1时,值越小对比度越低;当对比度为0时,图像变为全灰。(百分比) |
| invert | number | 0 | 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。(百分比) |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| colorBlend&nbsp;<sup>8+</sup> | Color&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource) | - | 为当前组件添加颜色叠加效果,入参为叠加的颜色。 |
| sepia | number | 0 | 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。&nbsp;(百分比) |
| hueRotate | number\|string | '0deg' | 色相旋转效果,输入参数为旋转角度。 |
......
......@@ -16,7 +16,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment枚举说明),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本,布局与当前组件相同。 |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本,布局与当前组件相同。 |
## 示例
......
......@@ -17,8 +17,8 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| clip | Shape&nbsp;\|&nbsp;boolean | false | 参数为Shape类型时,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照边缘轮廓进行裁剪。 |
| mask | Shape | - | 在当前组件上加上指定形状的遮罩。 |
| clip | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;\|&nbsp;boolean | false | 参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照边缘轮廓进行裁剪。 |
| mask | [Circle](ts-drawing-components-circle.md)&nbsp;\|&nbsp;[Ellipse](ts-drawing-components-ellipse.md)&nbsp;\|&nbsp;[Path](ts-drawing-components-path.md)&nbsp;\|&nbsp;[Rect](ts-drawing-components-rect.md)&nbsp;| - | 在当前组件上加上指定形状的遮罩。 |
## 示例
......
......@@ -21,7 +21,7 @@
| size | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | - | 设置高宽尺寸。 |
| padding | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0 | 设置内边距属性。<br/>参数为Length类型时,四个方向内边距同时生效。 |
| margin | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0 | 设置外边距属性。<br/>参数为Length类型时,四个方向外边距同时生效。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸,组件布局时,进行尺寸范围限制。 |
| constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸,组件布局时,进行尺寸范围限制。constraintSize的优先级高于Width和Height。 |
| layoutWeight | number&nbsp;\|&nbsp;string | 0 | 容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置,表示自适应占满剩余空间。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
......
......@@ -3,7 +3,7 @@
组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。
> **说明:**
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
......@@ -13,9 +13,9 @@
## 事件
| 名称 | 支持冒泡 | 功能描述 |
| -------- | -------- | -------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onAreaChange(event:&nbsp;(oldValue:&nbsp;Area,&nbsp;newValue:&nbsp;Area)&nbsp;=&gt;&nbsp;void) | 否 | 组件区域变化时触发该回调,Area类型描述见[Area](../../ui/ts-types.md#area8)。 |
## 示例
......
......@@ -9,13 +9,21 @@
| 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](../../ui/ts-types.md)) | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragStart(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;&nbsp;[CustomBuilder](../../ui/ts-types.md#custombuilder8)) \| DragItemInfo | 否 | 第一次拖拽此事件绑定的组件时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>返回值:当前跟手效果所拖拽的对象,用于显示拖拽时的提示组件。<br/>长按150毫秒(ms)可触发拖拽事件。优先级:长按手势配置时间小于等于150毫秒(ms)时,长按手势优先触发,否则拖拽事件优先触发。 |
| onDragEnter(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽进入组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragMove(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽在组件范围内移动时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDragLeave(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 拖拽离开组件范围内时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。<br/>当监听了onDrop事件时,此事件才有效。 |
| onDrop(event:&nbsp;(event?:&nbsp;DragEvent,&nbsp;extraParams?:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 否 | 绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。<br/>- event:拖拽事件信息,包括拖拽点坐标。<br/>- extraParams:拖拽事件额外信息,详见extraParam类型描述。 |
- extraParam说明<br>
## DragItemInfo说明
| 属性名称 | 属性类型 | 必填 | 描述 |
| ------------- | ------ | ------- |--------------------------------- |
| pixelMap | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | 设置拖拽过程中显示的图片。 |
| builder | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 使用自定义生成器进行绘图,如果设置了pixelMap,则忽略此值。 |
| extraInfo | string | 否 | 拖拽项的描述。 |
## extraParam说明
用于返回组件在拖拽中需要用到的额外信息。
extraParam是Json对象转换的string字符串,可以通过Json.parse转换的Json对象获取如下属性。
| 属性名称 | 属性类型 | 描述 |
......
......@@ -2,7 +2,6 @@
- JS服务卡片UI框架说明
- [文件组织](js-service-widget-file.md)
- [配置文件](js-service-widget-config-file.md)
- 语法
- [HML语法参考](js-service-widget-syntax-hml.md)
- [CSS语法参考](js-service-widget-syntax-css.md)
......
# 配置文件
js标签中包含了实例名称、窗口样式和卡片页面信息。
| 标签 | 类型 | 默认值 | 必填 | 描述 |
| ------ | ------ | ------- | ---- | --------------------------- |
| name | String | default | 是 | 标识JS实例的名字。 |
| pages | Array | - | 是 | 路由信息,详见“[pages](#pages)”。 |
| window | Object | - | 否 | 窗口信息,详见“[window](#window)”。 |
> **说明:**
> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。
## pages
定义卡片页面信息,由卡片页面路径和卡片页面名组成,卡片仅包含一个页面。比如:
```
{
...
"src": "./js/widget/pages/index/index" //卡片仅包含一个页面
...
}
```
> **说明:**
> - pages列表中仅包含一个页面。
>
> - 页面文件名不能使用组件名称,比如:text.hml、button.hml等。
## window
window用于定义与显示窗口相关的配置。对于卡片尺寸适配问题,有2种配置方法,建议使用autoDesignWidth:
- 指定卡片designWidth 150px(2×2),所有与大小相关的样式(例如width、font-size)均以designWidth和实际卡片宽度的比例进行缩放,例如在designWidth为150时,如果设置width为100px时,在卡片实际宽度为300物理像素时,width实际渲染像素为200物理像素。
- 设置autoDesignWidth为true,此时designWidth字段将会被忽略,渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出,在不同设备上可能不同,请使用相对布局来适配多种设备。例如:在466\*466分辨率,320dpi的设备上,屏幕密度为2(以160dpi为基准),1px等于渲染出的2物理像素。
> **说明:**
> - 组件样式中&lt;length&gt;类型的默认值,按屏幕密度进行计算和绘制,如:在屏幕密度为2(以160dpi为基准)的设备上,默认&lt;length&gt;为1px时,设备上实际渲染出2物理像素。
>
> - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --------------- | ------- | ---- | ----- | ---------------------------------------- |
| designWidth | number | 否 | 150px | 页面显示设计时的参考值,实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算,当设为true时,designWidth将会被忽略,设计基准宽度由设备宽度与屏幕密度计算得出。 |
示例如下:
{
...
"window": {
"autoDesignWidth": true
}
...
}
## 示例
```json
{
"forms": [
{
"name": "widget",
"description": "This is a service widget.",
"src": "./js/widget/pages/index/index",
"window": {
"designWidth": 720,
"autoDesignWidth": true
},
"colorMode": "auto",
"isDefault": true,
"updateEnabled": true,
"scheduledUpdateTime": "10:30",
"updateDuration": 1,
"defaultDimension": "2*2",
"supportDimensions": [
"1*2","2*2","2*4","4*4"
],
"formConfigAbility": "ability://xxxxx"
}
]
}
```
......@@ -49,9 +49,15 @@ JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下:
> **说明:**
> 当代码文件A需要引用代码文件B时:
>
>
> - 如果代码文件A和文件B位于同一目录,则代码文件B引用资源文件时可使用相对路径,也可使用绝对路径。
>
>
> - 如果代码文件A和文件B位于不同目录,则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时,代码文件B的目录会发生变化。
>
>
> - 在json文件中定义的数据为资源文件路径时,需使用绝对路径。
## 配置文件
FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../ability/fa-formability.md#配置卡片配置文件)
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下,配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../ability/stage-formextension.md#配置卡片配置文件)
\ No newline at end of file
# UI开发
- [方舟开发框架(ArkUI)概述](arkui-overview.md)
- 基于TS扩展的声明式开发范式
- UI开发(基于eTS的声明式开发范式)
- [概述](ui-ts-overview.md)
- 框架说明
- 文件组织
......@@ -74,7 +74,7 @@
- [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md)
- [性能提升的推荐方法](ts-performance-improvement-recommendation.md)
- 基于JS扩展的类Web开发范式
- UI开发(兼容JS的类Web开发范式)
- [概述](ui-js-overview.md)
- 框架说明
- [文件组织](js-framework-file.md)
......
......@@ -26,7 +26,7 @@
- 平台API通道:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
- 两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于TS扩展的声明式开发范式(简称“声明式开发范式”)和基于JS扩展的类Web开发范式(简称“类Web开发范式”)。
- 两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于eTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。
| 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
......
......@@ -3,9 +3,9 @@
应用代码文件可通过如下方式访问:
- 使用相对路径引用代码文件,比如:上一级目录:../common/utils/utils.ets,当前目录:./common/utils/utils.ets。
- 使用相对路径引用代码文件,比如:上一级目录:../common/utils/utils,当前目录:./common/utils/utils。
- 使用当前模块根路径引用代码文件,比如:common/utils/utils.ets
- 使用当前模块根路径引用代码文件,比如:common/utils/utils。
- 公共代码文件推荐放在**common**目录下。
......@@ -14,7 +14,7 @@
```ts
// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets";
import { FoodData, FoodList } from "../common/utils/utils";
@Entry
@Component
......
......@@ -18,14 +18,6 @@
filename:工程中resources/rawfile目录下的文件名称。
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------------------- | ------ | ---- | ---- | ---------- |
| id | number | 是 | 否 | 资源id值。 |
| type | number | 是 | 否 | 资源类型。 |
| params | any[] | 是 | 否 | 资源可选参数 |
| bundleName<sup>9+</sup> | string | 是 | 否 | 资源包名称。 |
| moduleName<sup>9+</sup> | string | 是 | 否 | 资源模块名称。|
## Length
长度类型,用于描述尺寸单位。
......@@ -84,10 +76,10 @@
| 名称 | 类型 | 必填 | 说明 |
| ----------- | ------ | ---- |--------------------- |
| topLeft | Length | 否 | 组件上边框宽度。 |
| topRight | Length | 否 | 组件右边框宽度。 |
| bottomLeft | Length | 否 | 组件下边框宽度。 |
| bottomRight | Length | 否 | 组件左边框宽度。 |
| topLeft | Length | 否 | 组件左上角圆角半径。 |
| topRight | Length | 否 | 组件右上角圆角半径。 |
| bottomLeft | Length | 否 | 组件左下角圆角半径。 |
| bottomRight | Length | 否 | 组件右下角圆角半径。 |
## EdgeColors<sup>9+</sup>
......@@ -148,10 +140,10 @@
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
| size | number | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | number | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | string \| Resource | 否 | 设置文本的字体样式。 |
| size | [Length](#length) | 否 | 设置文本尺寸,Length为number类型时,使用fp单位。 |
| weight | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。 |
| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial, sans-serif'。 |
| style | [FontStyle](../reference/arkui-ts/ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 |
## Area<sup>8+</sup>
......@@ -159,10 +151,10 @@
| 名称 | 类型 | 说明 |
| -------------- | -------- | ------------------------------------------------- |
| width | Length | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | Length | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | Position | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 |
| width | [Length](#length) | 目标元素的宽度,作为返回值时,类型为number,单位vp。 |
| height | [Length](#length) | 目标元素的高度,作为返回值时,类型为number,单位vp。 |
| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
......@@ -203,7 +195,7 @@
| ------ | ----------------------- | ---- | ----------- |
| width | Length \| EdgeWidths<sup>9+</sup> | 否 | 边框宽度。 |
| color | ResourceColor \| EdgeColors<sup>9+</sup> | 否 | 边框颜色。 |
| radius | Length \| BorderRadiuses<sup>9+</sup> | 否 | 边框角度。 |
| radius | Length \| BorderRadiuses<sup>9+</sup> | 否 | 边框圆角半径。 |
| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 否 | 边框样式。 |
## ColorFilter<sup>9+</sup>
......
......@@ -9,20 +9,21 @@ tabs是一种常见的界面导航结构。通过页签容器,用户可以快
```html
<!-- xxx.hml -->
<div class="container" >
<tabs> <tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
<div class="container">
<tabs>
<tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
<tab-content>
<div class="text">
<text>content1</text>
</div>
<div class="text">
<text>content2</text>
</div>
</tab-content>
</tabs>
</div>
```
......
# 概述
基于JS扩展的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
兼容JS的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
请参考[基于JS扩展的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档,全面地了解组件,更好地开发应用。
请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档,全面地了解组件,更好地开发应用。
## 整体架构
使用基于JS扩展的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
使用兼容JS的类Web开发范式的方舟开发框架,包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
......@@ -32,7 +32,7 @@
## 相关实例
基于JS扩展的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
兼容JS的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
- [`AtomicLayout`:原子布局(JS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout)
......
......@@ -50,7 +50,15 @@
3. 存入食物图片资源。在resources &gt;base&gt; media目录下存入食物图片资源,图片名称为食物名称。
4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets,在该页面中声明食物成分数组FoodComposition。
4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets,在该页面中声明食物成分数组FoodComposition。以下示例创建了两个食物数据。
```
const FoodComposition: any[] = [
{ 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
{ 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }
]
```
实际开发中,开发者可以自定义更多的数据资源,当食物资源很多时,建议使用数据懒加载LazyForEach。
5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category,所以要将FoodData.ets的FoodData类export,在FoodDataModels.ets内import FoodData和Category。
......
......@@ -190,17 +190,10 @@
- [后台提醒开发指导](notification/background-agent-scheduled-reminder-guide.md)
- [调试助手使用指导](notification/assistant-guidelines.md)
- 窗口管理
- 窗口
- [窗口开发概述](windowmanager/window-overview.md)
- [管理应用窗口(Stage模型)](windowmanager/application-window-stage.md)
- [管理应用窗口(FA模型)](windowmanager/application-window-fa.md)
- [管理系统窗口(仅Stage模型支持)](windowmanager/system-window-stage.md)
- 屏幕属性
- [屏幕属性开发概述](windowmanager/display-overview.md)
- [屏幕属性开发指导](windowmanager/display-guidelines.md)
- 屏幕截图
- [屏幕截图开发概述](windowmanager/screenshot-overview.md)
- [屏幕截图开发指导](windowmanager/screenshot-guidelines.md)
- [窗口开发概述](windowmanager/window-overview.md)
- [管理应用窗口(Stage模型)](windowmanager/application-window-stage.md)
- [管理应用窗口(FA模型)](windowmanager/application-window-fa.md)
- [管理系统窗口(仅Stage模型支持)](windowmanager/system-window-stage.md)
- WebGL
- [WebGL开发概述](webgl/webgl-overview.md)
- [WebGL开发指导](webgl/webgl-guidelines.md)
......@@ -639,7 +632,6 @@
- JS服务卡片UI组件参考
- JS服务卡片UI框架说明
- [文件组织](reference/js-service-widget-ui/js-service-widget-file.md)
- [配置文件](reference/js-service-widget-ui/js-service-widget-config-file.md)
- 语法
- [HML语法参考](reference/js-service-widget-ui/js-service-widget-syntax-hml.md)
- [CSS语法参考](reference/js-service-widget-ui/js-service-widget-syntax-css.md)
......
# 窗口管理
- 窗口
- [窗口开发概述](window-overview.md)
- [管理应用窗口(Stage模型)](application-window-stage.md)
- [管理应用窗口(FA模型)](application-window-fa.md)
- [管理系统窗口(仅Stage模型支持)](system-window-stage.md)
- 屏幕属性
- [屏幕属性开发概述](display-overview.md)
- [屏幕属性开发指导](display-guidelines.md)
- 屏幕截图
- [屏幕截图开发概述](screenshot-overview.md)
- [屏幕截图开发指导](screenshot-guidelines.md)
\ No newline at end of file
- [窗口开发概述](window-overview.md)
- [管理应用窗口(Stage模型)](application-window-stage.md)
- [管理应用窗口(FA模型)](application-window-fa.md)
- [管理系统窗口(仅Stage模型支持)](system-window-stage.md)
\ No newline at end of file
# 屏幕属性开发指导
## 场景介绍
应用通过调用屏幕接口获取默认Display或者所有Display的属性。
## 接口说明
完整版的接口定义请参考API接口说明文件:[屏幕属性](../reference/apis/js-apis-display.md)
## 开发步骤
通过`getDefaultDisplay(): Promise<Display>`来获取当前默认的`Display`对象,具体代码示例可参考:
```js
import display from '@ohos.display' // 导入模块
display.getDefaultDisplay().then((disp) => {
console.log('display.getDefaultDisplay success, display :' + JSON.stringify(disp));
}, (err) => {
console.log('display.getDefaultDisplay failed, error : ' + JSON.stringify(err));
})
```
## 相关实例
针对屏幕属性开发,有以下相关实例可供参考:
- [`Screen`:屏幕属性(eTS)(API8)(Full SDK)](https://gitee.com/openharmony/applications_app_samples/tree/master/device/Screen)
# 屏幕属性开发概述
屏幕具有显示应用窗口布局的能力,屏幕属性包括:屏幕id号、屏幕名称、屏幕启用标识、屏幕状态、屏幕刷新率、屏幕旋转角度、屏幕宽度、屏幕高度、屏幕像素密度、屏幕字体缩放因子和每英寸屏幕的确切物理像素值。
## 基本概念
`Display`:Display指的是对应用可见的屏幕,这是一种抽象的屏幕概念,与真实的物理屏幕不同,可作为窗口容器。
# 屏幕截图开发指导
## 场景介绍
指定显示设备进行特定参数的屏幕截图。
## 接口说明
完整版的接口定义请参考API接口说明文件:[屏幕截图](../reference/apis/js-apis-screenshot.md)
## 开发步骤
通过接口`save(options?: ScreenshotOptions): Promise<image.PixelMap>`进行屏幕截图。其中`options`为预定义的截屏参数,如果没有输入`options`,则使用默认截取整屏,具体代码示例可参考:
```js
import screenshot from '@ohos.screenshot' // 导入模块
// 设置屏幕截图参数
let screenshotOps = {
"screenRect": {
"left": 200,
"top": 100,
"width": 200,
"height": 200},
"imageSize": {
"width": 300,
"height": 300},
"rotation": 0
};
screenshot.save(screenshotOps).then((image) => {
console.log('screenshot.save success, screenshot image :' + JSON.stringify(image));
}, (err) => {
console.log('screenshot.save failed, error : ' + JSON.stringify(err));
})
```
## 相关实例
针对屏幕截图开发,有以下相关实例可供参考:
- [`Screenshot`:屏幕截图(eTS)(API9)(Full SDK)](https://gitee.com/openharmony/applications_app_samples/tree/master/Basic/Screenshot)
# 屏幕截图开发概述
提供指定显示设备下特定参数的屏幕截图能力。
## 基本概念
`screenshot`:提供屏幕截图能力。
......@@ -49,7 +49,7 @@
"kernel_version": "3.0.0", --- 内核版本:3.0.0
"subsystems": [] --- 子系统
}
```
```
填入的信息与规划的目录相对应,其中`device_company``board`用于关联出`device/board/<device_company>/`目录。
### 单板配置
......@@ -403,7 +403,8 @@ OHOS Which product do you need? neptune_iotlink_demo
{
"subsystem": "kernel",
"components": [
{ "component": "liteos_m", "features":[]
{
"component": "liteos_m", "features":[]
}
]
},
......@@ -419,11 +420,11 @@ OHOS Which product do you need? neptune_iotlink_demo
osStatus_t ret = osKernelInitialize(); --- 内核初始化
if(ret == osOK)
{
threadId = osThreadNew((osThreadFunc_t)sys_init,NULL,&g_main_task); --- 创建init线程
if(threadId!=NULL)
{
osKernelStart(); --- 线程调度
}
threadId = osThreadNew((osThreadFunc_t)sys_init,NULL,&g_main_task); --- 创建init线程
if(threadId!=NULL)
{
osKernelStart(); --- 线程调度
}
}
```
......
......@@ -106,6 +106,7 @@
- [HiTrace开发指导](subsys-dfx-hitrace.md)
- [HiCollie开发指导](subsys-dfx-hicollie.md)
- HiSysEvent开发指导
- [HiSysEvent概述](subsys-dfx-hisysevent-overview.md)
- [HiSysEvent打点配置指导](subsys-dfx-hisysevent-logging-config.md)
- [HiSysEvent打点指导](subsys-dfx-hisysevent-logging.md)
- [HiSysEvent订阅指导](subsys-dfx-hisysevent-listening.md)
......
......@@ -5,17 +5,17 @@
HiSysEvent是面向OpenHarmony系统开发者提供的系统打点功能,通过在关键路径埋点来记录系统在运行过程中的重要信息,辅助开发者定位问题,此外还支持开发者将打点数据上传到云进行大数据质量度量。
HiSysEvent提供给开发者的打点相关能力主要包括事件配置、事件埋点、事件订阅、事件查询以及事件调试工具,各模块能力介绍如下:
HiSysEvent包括HiSysEvent打点配置、HiSysEvent打点、HiSysEvent订阅、HiSysEvent查询以及HiSysEvent工具模块,各模块能力介绍如下:
- 事件配置:提供了事件的yaml配置能力,支持在yaml文件中对HiSysEvent事件进行定义。
- [HiSysEvent打点配置](subsys-dfx-hisysevent-logging-config.md):提供了事件打点配置的相关能力,支持在yaml文件中对打点事件进行定义。
- 事件埋点:提供了事件埋点的相关接口能力,支持对打点的HiSysEvent事件进行落盘。
- [HiSysEvent打点](subsys-dfx-hisysevent-logging.md):提供了事件打点的相关接口能力,支持对打点事件进行落盘。
- 事件订阅:提供了事件订阅的相关接口能力,支持根据事件领域和事件名称来对HiSysEvent事件进行订阅。
- [HiSysEvent订阅](subsys-dfx-hisysevent-listening.md):提供了事件订阅的相关接口能力,支持根据事件领域和事件名称来对打点事件进行订阅。
- 事件查询:提供了事件查询的相关接口能力,支持根据事件领域和事件名称来对HiSysEvent事件进行查询。
- [HiSysEvent查询](subsys-dfx-hisysevent-query.md):提供了事件查询的相关接口能力,支持根据事件领域和事件名称来对打点事件进行查询。
- 事件调试工具:提供了hisysevent工具,支持通过该工具来实时订阅HiSysEvent事件及查询历史HiSysEvent事件。
- [HiSysEvent工具](subsys-dfx-hisysevent-tool.md):提供了HiSysEvent工具,支持通过该工具来实时订阅打点事件及查询历史打点事件。
## 参考
......
......@@ -119,8 +119,8 @@
| 标准系统Full SDK包(Windows\Linux) | 3.2.5.5 | [站点](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-windows_linux-full.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-windows_linux-full.tar.gz.sha256) |
| 标准系统Public SDK包(Mac) | 3.2.5.5 | [站点](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-mac-public.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-mac-public.tar.gz.sha256) |
| 标准系统Public SDK包(Windows\Linux) | 3.2.5.5 | [站点](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-windows_linux-public.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/harmonyos/os/3.2-Beta2/ohos-sdk-windows_linux-public.tar.gz.sha256) |
| 标准系统Full SDK包(Mac) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-full.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-full.tar.gz.sha256) |
| 标准系统Full SDK包(Windows\Linux) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-full.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-full.tar.gz.sha256) |
| 标准系统Full SDK包(Mac) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-full_20220913.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-full_20220913.tar.gz.sha256) |
| 标准系统Full SDK包(Windows\Linux) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-full_20220913.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-full_20220913.tar.gz.sha256) |
| 标准系统Public SDK包(Mac) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-public.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-mac-public.tar.gz.sha256) |
| 标准系统Public SDK包(Windows\Linux) | 3.2.5.6 | [站点](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-public.tar.gz) | [SHA256校验码](https://repo.huaweicloud.com/openharmony/os/3.2-Beta2/sdk-patch/ohos-sdk-windows_linux-public.tar.gz.sha256) |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册