Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 fc4481b8 编写于 作者: E ester.zhou
浏览文件
操作

update docs (0827) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 0c0f19ff
显示空白变更内容
内联 并排
Showing with 854 addition and 911 deletion
en/application-dev/reference/apis/js-apis-system-time.md
浏览文件 @ fc4481b8
......@@ -2,8 +2,9 @@
This module provides the time, time zone, and timing services. Use the time and time zone services to set and obtain the system time and time zone, and use the timing service to manage and use the system time and time zone to implement alarms or other timing functions.
> **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>- The APIs of this module are system APIs and cannot be called by third-party applications.
## Modules to Import
......@@ -25,15 +26,15 @@ Sets the system time. This API uses an asynchronous callback to return the resul
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
| Name | Type | Mandatory| Description |
| -------- | ------------------------- | ---- | ------------------------------------------ |
| time | number | Yes | Timestamp to set, in milliseconds. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
```js
// Set the system time to 2021-01-20 02:36:25.
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time, (error, data) => {
if (error) {
......@@ -57,26 +58,26 @@ Sets the system time. This API uses a promise to return the result.
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
| Name| Type | Mandatory| Description |
| ------ | ------ | ---- | ------------------ |
| time | number | Yes | Timestamp to set, in milliseconds. |
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| ------------------- | -------------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```js
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time).then((data) => {
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time).then((data) => {
console.log(`systemTime.setTime success data : ` + JSON.stringify(data));
}).catch((error) => {
}).catch((error) => {
console.error(`failed to systemTime.setTime because ` + JSON.stringify(error));
});
});
```
......@@ -90,10 +91,10 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
| callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time. |
**Example**
......@@ -118,14 +119,14 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| --------------------- | ------------------------------------------------------------ |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
......@@ -149,10 +150,10 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
| callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time.|
**Example**
......@@ -177,14 +178,14 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| --------------------- | ------------------------------------------------------------ |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
......@@ -208,10 +209,10 @@ Obtains the time elapsed since system start, including the deep sleep time. This
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
| callback | AsyncCallback&lt;number&gt; | Yes | Callback used to return the time. |
**Example**
......@@ -236,14 +237,14 @@ Obtains the time elapsed since system start, including the deep sleep time. This
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------------------------------ |
| isNano | boolean | No | Whether the time to return is in nanoseconds.<br>- **true**: in nanoseconds.<br>- **false**: in milliseconds. |
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| --------------------- | ------------------------------------------------------------ |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
......@@ -269,10 +270,10 @@ Sets the system date. This API uses an asynchronous callback to return the resul
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
| Name | Type | Mandatory| Description |
| -------- | ------------------------- | ---- | ------------------------------------------ |
| date | Date | Yes | Target date to set. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
......@@ -300,14 +301,14 @@ Sets the system date. This API uses a promise to return the result.
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
| Name| Type| Mandatory| Description |
| ------ | ---- | ---- | ---------- |
| date | Date | Yes | Target date to set.|
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| ------------------- | -------------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
......@@ -332,9 +333,9 @@ Obtains the current system date. This API uses an asynchronous callback to retur
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;Date&gt; | Yes| Callback used to return the current system date.|
| Name | Type | Mandatory| Description |
| -------- | ------------------------- | ---- | ---------------------------- |
| callback | AsyncCallback&lt;Date&gt; | Yes | Callback used to return the current system date.|
**Example**
......@@ -359,8 +360,8 @@ Obtains the current system date. This API uses a promise to return the result.
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| ------------------- | ----------------------------------------- |
| Promise&lt;Date&gt; | Promise used to return the current system date.|
**Example**
......@@ -386,10 +387,10 @@ Sets the system time zone. This API uses an asynchronous callback to return the
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
| Name | Type | Mandatory| Description |
| -------- | ------------------------- | ---- | ------------------------------------------ |
| timezone | string | Yes | System time zone to set. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
......@@ -416,14 +417,14 @@ Sets the system time zone. This API uses a promise to return the result.
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
| Name | Type | Mandatory| Description |
| -------- | ------ | ---- | ---------- |
| timezone | string | Yes | System time zone to set.|
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| ------------------- | -------------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
......@@ -447,9 +448,9 @@ Obtains the system time zone. This API uses an asynchronous callback to return t
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;string&gt; | Yes| Callback used to return the system time zone.|
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------ |
| callback | AsyncCallback&lt;string&gt; | Yes | Callback used to return the system time zone.|
**Example**
......@@ -474,8 +475,8 @@ Obtains the system time zone. This API uses a promise to return the result.
**Return value**
| Type| Description|
| -------- | -------- |
| Type | Description |
| --------------------- | ------------------------------------- |
| Promise&lt;string&gt; | Promise used to return the system time zone.|
**Example**
......
en/application-dev/reference/apis/js-apis-system-timer.md 0 → 100644
浏览文件 @ fc4481b8
# System Timer
The **systemTimer** module provides system timer features. You can use the APIs of this module to implement the alarm clock and other timer services.
> **NOTE**<br/>
>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>- The APIs of this module are system APIs and cannot be called by third-party applications.
## Modules to Import
```
import systemTimer from '@ohos.systemTimer';
```
## systemTime.createTimer
createTimer(options: TimerOptions, callback: AsyncCallback&lt;number&gt;): void
Creates a timer. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | ------------------ | ---- | --------------------------------------------------------------------------------------- |
| options | TimerOptions | Yes | Timer options.<br>**TIMER_TYPE_REALTIME**: sets the timer to the real-time type. If it is not specified, the timer is of the non-real-time type.<br>**TIMER_TYPE_WAKEUP**: sets the timer to the wakeup type. If it is not specified, the timer is of the non-wakeup type.<br>**TIMER_TYPE_EXACT**: sets the timer to the exact type. If it is not specified, the timer is of the non-exact type.<br>**TIMER_TYPE_IDLE: number**: sets the timer to the idle type. If it is not specified, the timer is of the non-idle type (not yet supported).|
| repeat | boolean | Yes | Whether the timer is a repeating timer. The value **true** means that the timer is a repeating timer, and **false** means that the timer is a one-shot timer. |
| interval | number | No | Repeat interval. For a repeating timer, the value must be greater than 5000 ms. For a one-shot timer, the value is **0**. |
| wantAgent| wantAgent | No | **wantAgent** object of the notification to be sent when the timer expires. (An OpenHarmony application MainAbility can be started, but not an SA service.) |
**Return value**
| Type | Description |
| ------------------------- | ------------------------------------------------------------ |
| syncCallback&lt;number&gt;| Callback used to return the timer ID. |
**Example**
```js
export default {
systemTimer () {
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat: false
}
systemTimer.createTimer(options, (error, data) => {
if (error) {
console.error(`failed to systemTime.createTimer ` + JSON.stringify(error));
return;
}
console.log(`systemTime.createTimer success data : ` + JSON.stringify(data));
});
}
}
```
## systemTime.createTimer
createTimer(options: TimerOptions): Promise&lt;number&gt;
Creates a timer. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | ------------------ | ---- | --------------------------------------------------------------------------------------- |
| options | TimerOptions | Yes | Timer options.<br>**TIMER_TYPE_REALTIME**: sets the timer to the real-time type. If it is not specified, the timer is of the non-real-time type.<br>**TIMER_TYPE_WAKEUP**: sets the timer to the wakeup type. If it is not specified, the timer is of the non-wakeup type.<br>**TIMER_TYPE_EXACT**: sets the timer to the exact type. If it is not specified, the timer is of the non-exact type.<br>**TIMER_TYPE_IDLE: number**: sets the timer to the idle type. If it is not specified, the timer is of the non-idle type (not yet supported).|
| repeat | boolean | Yes | Whether the timer is a repeating timer. The value **true** means that the timer is a repeating timer, and **false** means that the timer is a one-shot timer. |
| interval | number | No | Repeat interval. For a repeating timer, the value must be greater than 5000 ms. For a one-shot timer, the value is **0**. |
| wantAgent| wantAgent | No | **wantAgent** object of the notification to be sent when the timer expires. (An OpenHarmony application MainAbility can be started, but not an SA service.) |
**Return value**
| Type | Description |
| --------------------- | ------------------------------------------------------------ |
| Promise&lt;number&gt; | Promise used to return the timer ID. |
**Example**
```js
export default {
systemTimer () {
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
systemTimer.createTimer(options).then((data) => {
console.log(`systemTime.createTimer success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.createTimer because ` + JSON.stringify(error));
});
}
}
```
## systemTime.startTimer
startTimer(timer: number, triggerTime: number, callback: AsyncCallback&lt;void&gt;): void
Starts a timer. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| ----------- | --------------------------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
| triggerTime | number | Yes | Time when the timer is triggered, in milliseconds. |
**Example**
```js
export default {
systemTimer () {
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 10000, (error, data) => {
if (error) {
console.error(`failed to systemTime.startTimer ` + JSON.stringify(error));
return;
}
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
});
}
}
```
## systemTime.startTimer
startTimer(timer: number, triggerTime: number): Promise&lt;void&gt;
Starts a timer. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| ----------- | --------------------------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
| triggerTime | number | Yes | Time when the timer is triggered, in milliseconds. |
**Example**
```js
export default {
systemTimer (){
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 10000).then((data) => {
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.startTimer because ` + JSON.stringify(error));
});
}
}
```
## systemTime.stopTimer
stopTimer(timer: number, callback: AsyncCallback&lt;void&gt;): void
Stops a timer. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
**Example**
```js
export default {
systemTimer () {
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 100000)
systemTimer.stoptTimer(timerId, 10000, (error, data) => {
if (error) {
console.error(`failed to systemTime.startTimer ` + JSON.stringify(error));
return;
}
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
});
}
}
```
## systemTime.stopTimer
stopTimer(timer: number): Promise&lt;void&gt;
Stops a timer. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
**Example**
```js
export default {
systemTimer (){
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 100000)
systemTimer.stoptTimer(timerId, 10000).then((data) => {
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.startTimer because ` + JSON.stringify(error));
});
}
}
```
## systemTime.destroyTimer
destroyTimer(timer: number, callback: AsyncCallback&lt;void&gt;): void
Destroys a timer. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | --------------------------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
**Example**
```js
export default {
systemTimer () {
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 100000)
systemTimer.stopTimer(timerId)
systemTimer.destroyTimer(timerId, (error, data) => {
if (error) {
console.error(`failed to systemTime.startTimer ` + JSON.stringify(error));
return;
}
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
});
}
}
```
## systemTime.destroyTimer
destroyTimer(timer: number): Promise&lt;void&gt;
Destroys a timer. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------- | ---- | ------------------------------------------------------------ |
| timer | number | Yes | ID of the timer. |
**Example**
```js
export default {
systemTimer (){
var options = {
type: systemTimer.TIMER_TYPE_REALTIME,
repeat:false
}
let timerId = systemTimer.Timer(options)
systemTimer.startTimer(timerId, 100000)
systemTimer.stopTimer(timerId)
systemTimer.destroytTimer(timerId, 10000).then((data) => {
console.log(`systemTime.startTimer success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.startTimer because ` + JSON.stringify(error));
});
}
}
```
en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
浏览文件 @ fc4481b8
# CanvasGradient<a name="EN-US_TOPIC_0000001173164733"></a>
# CanvasGradient
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasGradient** provides a gradient object.
## addColorStop<a name="section12691015917"></a>
addColorStop\(offset: number, color: string\): void
Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color.
- Parameters
<a name="table1032173253712"></a>
<table><thead align="left"><tr id="row166643263712"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p1966932123714"><a name="p1966932123714"></a><a name="p1966932123714"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p10661232173710"><a name="p10661232173710"></a><a name="p10661232173710"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p66673283719"><a name="p66673283719"></a><a name="p66673283719"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1166193243714"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p96673263717"><a name="p96673263717"></a><a name="p96673263717"></a>offset</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1674323372"><a name="p1674323372"></a><a name="p1674323372"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p12672326374"><a name="p12672326374"></a><a name="p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p>
</td>
</tr>
<tr id="row146783253715"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p46773203715"><a name="p46773203715"></a><a name="p46773203715"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1967173213712"><a name="p1967173213712"></a><a name="p1967173213712"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p1467123233710"><a name="p1467123233710"></a><a name="p1467123233710"></a>Gradient color to set.</p>
</td>
</tr>
</tbody>
</table>
- Example Code
## addColorStop
```
<!-- xxx.hml -->
<div>
addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
**Parameters**
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ |
| offset | number | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
| color | string | Gradient color to set. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div>
```
```
// xxx.js
export default {
```js
// xxx.js
export default {
handleClick() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
......@@ -56,8 +38,7 @@ Adds a color stop for the** CanvasGradient** object based on the specified offs
gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00');
}
}
}
```
![](figures/en-us_image_0000001152610806.png)
![en-us_image_0000001152610806](figures/en-us_image_0000001152610806.png)
en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
浏览文件 @ fc4481b8
# Path2D<a name="EN-US_TOPIC_0000001173164751"></a>
# Path2D
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
## addPath<a name="section12484748163816"></a>
## addPath
addPath\(path: Object\): void
addPath(path: Object): void
Adds a path to this path.
- Parameters
<a name="table1948454813819"></a>
<table><thead align="left"><tr id="row17484114816383"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p1348494853817"><a name="p1348494853817"></a><a name="p1348494853817"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p1148414873815"><a name="p1148414873815"></a><a name="p1148414873815"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p34841948133816"><a name="p34841948133816"></a><a name="p34841948133816"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1148424813816"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p64848482383"><a name="p64848482383"></a><a name="p64848482383"></a>path</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p9484194817384"><a name="p9484194817384"></a><a name="p9484194817384"></a>Object</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p9484144883813"><a name="p9484144883813"></a><a name="p9484144883813"></a>Path to be added to this path.</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Name | Type | Description |
| ---- | ------ | ------------------------------ |
| path | Object | Path to be added to this path. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -49,86 +37,39 @@ Adds a path to this path.
path2.addPath(path1);
ctx.stroke(path2);
}
}
}
```
![](figures/en-us_image_0000001173164873.png)
![en-us_image_0000001173164873](figures/en-us_image_0000001173164873.png)
## setTransform<a name="section68262045132013"></a>
## setTransform
setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void
setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
Sets the path transformation matrix.
- Parameters
<a name="table4826104515201"></a>
<table><thead align="left"><tr id="row58261345122010"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p1382684562019"><a name="p1382684562019"></a><a name="p1382684562019"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p382617450202"><a name="p382617450202"></a><a name="p382617450202"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p48261945172017"><a name="p48261945172017"></a><a name="p48261945172017"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1182611454206"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p178262456205"><a name="p178262456205"></a><a name="p178262456205"></a>scaleX</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p182620458203"><a name="p182620458203"></a><a name="p182620458203"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p10751910222"><a name="p10751910222"></a><a name="p10751910222"></a>Scale ratio of the x-axis</p>
</td>
</tr>
<tr id="row168266458201"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p16827445142013"><a name="p16827445142013"></a><a name="p16827445142013"></a>skewX</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p68274454204"><a name="p68274454204"></a><a name="p68274454204"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p71155207223"><a name="p71155207223"></a><a name="p71155207223"></a>Skew angle of the x-axis</p>
</td>
</tr>
<tr id="row38271945122016"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p7827134572011"><a name="p7827134572011"></a><a name="p7827134572011"></a>skewY</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p168275453206"><a name="p168275453206"></a><a name="p168275453206"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p562016295229"><a name="p562016295229"></a><a name="p562016295229"></a>Skew angle of the y-axis</p>
</td>
</tr>
<tr id="row13827114514206"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p11827745122012"><a name="p11827745122012"></a><a name="p11827745122012"></a>scaleY</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p168272459209"><a name="p168272459209"></a><a name="p168272459209"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p19205153616222"><a name="p19205153616222"></a><a name="p19205153616222"></a>Scale ratio of the y-axis</p>
</td>
</tr>
<tr id="row482704512010"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p2082713455206"><a name="p2082713455206"></a><a name="p2082713455206"></a>translateX</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p5827104512206"><a name="p5827104512206"></a><a name="p5827104512206"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p10511942152217"><a name="p10511942152217"></a><a name="p10511942152217"></a>Translation distance of the x-axis</p>
</td>
</tr>
<tr id="row1274814215213"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p574820262114"><a name="p574820262114"></a><a name="p574820262114"></a>translateY</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1174820232117"><a name="p1174820232117"></a><a name="p1174820232117"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1645314484227"><a name="p1645314484227"></a><a name="p1645314484227"></a>Translation distance of the y-axis</p>
</td>
</tr>
</tbody>
</table>
- Example
```
<!-- xxx.hml -->
<div>
**Parameters**
| Name | Type | Description |
| ---------- | ------ | ----------------------------------- |
| scaleX | number | Scale ratio of the x-axis. |
| skewX | number | Skew angle of the x-axis. |
| skewY | number | Skew angle of the y-axis. |
| scaleY | number | Scale ratio of the y-axis. |
| translateX | number | Translation distance of the x-axis. |
| translateY | number | Translation distance of the y-axis. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -136,30 +77,29 @@ Sets the path transformation matrix.
path.setTransform(0.8, 0, 0, 0.4, 0, 0);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001127125208.png)
![en-us_image_0000001127125208](figures/en-us_image_0000001127125208.png)
## closePath<a name="section653891424217"></a>
## closePath
closePath\(\): void
closePath(): void
Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action.
- Example
```
<!-- xxx.hml -->
<div>
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -170,58 +110,36 @@ Moves the current point of the path back to the start point of the path, and dra
path.closePath();
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001127125202.png)
![](figures/en-us_image_0000001127125202.png)
## moveTo<a name="section384917162456"></a>
## moveTo
moveTo\(x: number, y: number\): void
moveTo(x: number, y: number): void
Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
- Parameters
<a name="table78491916124512"></a>
<table><thead align="left"><tr id="row14850181613456"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p11850191612454"><a name="p11850191612454"></a><a name="p11850191612454"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p9850416144514"><a name="p9850416144514"></a><a name="p9850416144514"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p1850816154519"><a name="p1850816154519"></a><a name="p1850816154519"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row6850181612455"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p17850161612455"><a name="p17850161612455"></a><a name="p17850161612455"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p118501716164516"><a name="p118501716164516"></a><a name="p118501716164516"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p3850181634517"><a name="p3850181634517"></a><a name="p3850181634517"></a>X-coordinate of the target point</p>
</td>
</tr>
<tr id="row12850181618452"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p1185081616453"><a name="p1185081616453"></a><a name="p1185081616453"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p98506164455"><a name="p98506164455"></a><a name="p98506164455"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p138501116104518"><a name="p138501116104518"></a><a name="p138501116104518"></a>Y-coordinate of the target point</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Parameter | Type | Description |
| --------- | ------ | --------------------------------- |
| x | number | X-coordinate of the target point. |
| y | number | Y-coordinate of the target point. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -232,58 +150,37 @@ Moves the current coordinate point of the path to the target point, without draw
path.closePath();
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001173164869.png)
![en-us_image_0000001173164869](figures/en-us_image_0000001173164869.png)
## lineTo<a name="section1374011322484"></a>
## lineTo
lineTo\(x: number, y: number\): void
lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point.
- Parameters
<a name="table174093224819"></a>
<table><thead align="left"><tr id="row187401432134818"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p374173224817"><a name="p374173224817"></a><a name="p374173224817"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p2741183219482"><a name="p2741183219482"></a><a name="p2741183219482"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p1774112327488"><a name="p1774112327488"></a><a name="p1774112327488"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1741143284810"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p19741103254812"><a name="p19741103254812"></a><a name="p19741103254812"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p57411832154812"><a name="p57411832154812"></a><a name="p57411832154812"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p1474119322489"><a name="p1474119322489"></a><a name="p1474119322489"></a>X-coordinate of the target point</p>
</td>
</tr>
<tr id="row97411532144814"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p14741193212488"><a name="p14741193212488"></a><a name="p14741193212488"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p127411332174814"><a name="p127411332174814"></a><a name="p127411332174814"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p137412326481"><a name="p137412326481"></a><a name="p137412326481"></a>Y-coordinate of the target point</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Parameter | Type | Description |
| --------- | ------ | --------------------------------- |
| x | number | X-coordinate of the target point. |
| y | number | Y-coordinate of the target point. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -295,86 +192,40 @@ Draws a straight line from the current point to the target point.
path.closePath();
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001127285024.png)
![en-us_image_0000001127285024](figures/en-us_image_0000001127285024.png)
## bezierCurveTo<a name="section122413525494"></a>
## bezierCurveTo
bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
Draws a cubic bezier curve on the canvas.
- Parameters
<a name="table5241185218495"></a>
<table><thead align="left"><tr id="row1224175215491"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p192411529491"><a name="p192411529491"></a><a name="p192411529491"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p4241052154910"><a name="p4241052154910"></a><a name="p4241052154910"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p5241052114911"><a name="p5241052114911"></a><a name="p5241052114911"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row624113524497"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p6241135213493"><a name="p6241135213493"></a><a name="p6241135213493"></a>cp1x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p22422529499"><a name="p22422529499"></a><a name="p22422529499"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p172421052114919"><a name="p172421052114919"></a><a name="p172421052114919"></a>X-coordinate of the first parameter of the bezier curve</p>
</td>
</tr>
<tr id="row924225212492"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p4242115213499"><a name="p4242115213499"></a><a name="p4242115213499"></a>cp1y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p7242195234910"><a name="p7242195234910"></a><a name="p7242195234910"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p524211522496"><a name="p524211522496"></a><a name="p524211522496"></a>Y-coordinate of the first parameter of the bezier curve</p>
</td>
</tr>
<tr id="row1924210522498"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p624214522499"><a name="p624214522499"></a><a name="p624214522499"></a>cp2x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p15242175214914"><a name="p15242175214914"></a><a name="p15242175214914"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p524275215490"><a name="p524275215490"></a><a name="p524275215490"></a>X-coordinate of the second parameter of the bezier curve</p>
</td>
</tr>
<tr id="row1024285214912"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p3242175211491"><a name="p3242175211491"></a><a name="p3242175211491"></a>cp2y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p624205215497"><a name="p624205215497"></a><a name="p624205215497"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p124214527499"><a name="p124214527499"></a><a name="p124214527499"></a>Y-coordinate of the second parameter of the bezier curve</p>
</td>
</tr>
<tr id="row11242175210494"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p8242185217497"><a name="p8242185217497"></a><a name="p8242185217497"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p11242125219493"><a name="p11242125219493"></a><a name="p11242125219493"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p122428527495"><a name="p122428527495"></a><a name="p122428527495"></a>X-coordinate of the end point on the bezier curve</p>
</td>
</tr>
<tr id="row02433524498"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p924345217491"><a name="p924345217491"></a><a name="p924345217491"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1243135224912"><a name="p1243135224912"></a><a name="p1243135224912"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p3243135254915"><a name="p3243135254915"></a><a name="p3243135254915"></a>Y-coordinate of the end point on the bezier curve</p>
</td>
</tr>
</tbody>
</table>
- Example
```
<!-- xxx.hml -->
<div>
**Parameters**
| Parameter | Type | Description |
| --------- | ------ | --------------------------------------------------------- |
| cp1x | number | X-coordinate of the first parameter of the bezier curve. |
| cp1y | number | Y-coordinate of the first parameter of the bezier curve. |
| cp2x | number | X-coordinate of the second parameter of the bezier curve. |
| cp2y | number | Y-coordinate of the second parameter of the bezier curve |
| x | number | X-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -383,72 +234,38 @@ Draws a cubic bezier curve on the canvas.
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001173324783.png)
![en-us_image_0000001173324783](figures/en-us_image_0000001173324783.png)
## quadraticCurveTo<a name="section16154556165015"></a>
## quadraticCurveTo
quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas.
- Parameters
<a name="table815416567500"></a>
<table><thead align="left"><tr id="row915445619508"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p1815412561507"><a name="p1815412561507"></a><a name="p1815412561507"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p3154195613509"><a name="p3154195613509"></a><a name="p3154195613509"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p6154456135016"><a name="p6154456135016"></a><a name="p6154456135016"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row51543567505"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p111544569503"><a name="p111544569503"></a><a name="p111544569503"></a>cpx</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1315419563508"><a name="p1315419563508"></a><a name="p1315419563508"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p10154105675010"><a name="p10154105675010"></a><a name="p10154105675010"></a>X-coordinate of the bezier curve parameter</p>
</td>
</tr>
<tr id="row4154175618504"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1615410566508"><a name="p1615410566508"></a><a name="p1615410566508"></a>cpy</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p31540568507"><a name="p31540568507"></a><a name="p31540568507"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p8154165685013"><a name="p8154165685013"></a><a name="p8154165685013"></a>Y-coordinate of the bezier curve parameter</p>
</td>
</tr>
<tr id="row11548564504"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p41551856175018"><a name="p41551856175018"></a><a name="p41551856175018"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1515575685013"><a name="p1515575685013"></a><a name="p1515575685013"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p9155115610507"><a name="p9155115610507"></a><a name="p9155115610507"></a>X-coordinate of the end point on the bezier curve</p>
</td>
</tr>
<tr id="row1115555665015"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p18155105685012"><a name="p18155105685012"></a><a name="p18155105685012"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p20155856135019"><a name="p20155856135019"></a><a name="p20155856135019"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p5155156125013"><a name="p5155156125013"></a><a name="p5155156125013"></a>Y-coordinate of the end point on the bezier curve</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Parameter | Type | Description |
| --------- | ------ | -------------------------------------------------- |
| cpx | number | X-coordinate of the bezier curve parameter. |
| cpy | number | Y-coordinate of the bezier curve parameter. |
| x | number | X-coordinate of the end point on the bezier curve. |
| y | number | Y-coordinate of the end point on the bezier curve. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -457,86 +274,40 @@ Draws a quadratic curve on the canvas.
path.quadraticCurveTo(100, 100, 200, 20);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001173164871.png)
![en-us_image_0000001173164871](figures/en-us_image_0000001173164871.png)
## arc<a name="section950116919527"></a>
## arc
arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number\): void
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void
Draws an arc on the canvas.
- Parameters
<a name="table1050139185219"></a>
<table><thead align="left"><tr id="row250129165211"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p185016935213"><a name="p185016935213"></a><a name="p185016935213"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p250111935212"><a name="p250111935212"></a><a name="p250111935212"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p7501997528"><a name="p7501997528"></a><a name="p7501997528"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row850189195216"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p175011099524"><a name="p175011099524"></a><a name="p175011099524"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p14501390521"><a name="p14501390521"></a><a name="p14501390521"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p85027935216"><a name="p85027935216"></a><a name="p85027935216"></a>X-coordinate of the center point of the arc</p>
</td>
</tr>
<tr id="row350216985214"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p55026925210"><a name="p55026925210"></a><a name="p55026925210"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p75021291525"><a name="p75021291525"></a><a name="p75021291525"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p18502193521"><a name="p18502193521"></a><a name="p18502193521"></a>Y-coordinate of the center point of the arc</p>
</td>
</tr>
<tr id="row2502169185215"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p150211925210"><a name="p150211925210"></a><a name="p150211925210"></a>radius</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p550211913528"><a name="p550211913528"></a><a name="p550211913528"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p13502169135212"><a name="p13502169135212"></a><a name="p13502169135212"></a>Radius of the arc</p>
</td>
</tr>
<tr id="row550212975211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1350212985217"><a name="p1350212985217"></a><a name="p1350212985217"></a>startAngle</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p85029985211"><a name="p85029985211"></a><a name="p85029985211"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p165021920526"><a name="p165021920526"></a><a name="p165021920526"></a>Start radian of the arc</p>
</td>
</tr>
<tr id="row25022912524"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p105021912522"><a name="p105021912522"></a><a name="p105021912522"></a>endAngle</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p150219925218"><a name="p150219925218"></a><a name="p150219925218"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p550213945213"><a name="p550213945213"></a><a name="p550213945213"></a>End radian of the arc</p>
</td>
</tr>
<tr id="row250218913526"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p850216913520"><a name="p850216913520"></a><a name="p850216913520"></a>anticlockwise</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1850219914524"><a name="p1850219914524"></a><a name="p1850219914524"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p105031691522"><a name="p105031691522"></a><a name="p105031691522"></a>Whether to draw the arc counterclockwise</p>
</td>
</tr>
</tbody>
</table>
- Example
```
<!-- xxx.hml -->
<div>
**Parameters**
| Parameter | Type | Description |
| ------------- | ------- | -------------------------------------------- |
| x | number | X-coordinate of the center point of the arc. |
| y | number | Y-coordinate of the center point of the arc. |
| radius | number | Radius of the arc. |
| startAngle | number | Start radian of the arc. |
| endAngle | number | End radian of the arc. |
| anticlockwise | boolean | Whether to draw the arc counterclockwise. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -544,79 +315,39 @@ Draws an arc on the canvas.
path.arc(100, 75, 50, 0, 6.28);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001173164867.png)
![en-us_image_0000001173164867](figures/en-us_image_0000001173164867.png)
## arcTo<a name="section98421358175219"></a>
## arcTo
arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc.
- Parameters
<a name="table584265819528"></a>
<table><thead align="left"><tr id="row198421584521"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p12842115815217"><a name="p12842115815217"></a><a name="p12842115815217"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p38431558175217"><a name="p38431558175217"></a><a name="p38431558175217"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p8843195812520"><a name="p8843195812520"></a><a name="p8843195812520"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row148431358115213"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p384345875215"><a name="p384345875215"></a><a name="p384345875215"></a>x1</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p984325805212"><a name="p984325805212"></a><a name="p984325805212"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p178438582527"><a name="p178438582527"></a><a name="p178438582527"></a>X-coordinate of the first point on the arc</p>
</td>
</tr>
<tr id="row1984385813525"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p16843958185217"><a name="p16843958185217"></a><a name="p16843958185217"></a>y1</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p168431058165216"><a name="p168431058165216"></a><a name="p168431058165216"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p12843205813522"><a name="p12843205813522"></a><a name="p12843205813522"></a>Y-coordinate of the first point on the arc</p>
</td>
</tr>
<tr id="row88431558115211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p88431058105211"><a name="p88431058105211"></a><a name="p88431058105211"></a>x2</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1984315875217"><a name="p1984315875217"></a><a name="p1984315875217"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p158431558185211"><a name="p158431558185211"></a><a name="p158431558185211"></a>X-coordinate of the second point on the arc</p>
</td>
</tr>
<tr id="row198431858125217"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1484420584525"><a name="p1484420584525"></a><a name="p1484420584525"></a>y2</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p084495885213"><a name="p084495885213"></a><a name="p084495885213"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p1684418583522"><a name="p1684418583522"></a><a name="p1684418583522"></a>Y-coordinate of the second point on the arc</p>
</td>
</tr>
<tr id="row11844358155211"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p8844155865219"><a name="p8844155865219"></a><a name="p8844155865219"></a>radius</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p1984410581525"><a name="p1984410581525"></a><a name="p1984410581525"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p17844155815220"><a name="p17844155815220"></a><a name="p17844155815220"></a>Radius of the arc</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Parameter | Type | Description |
| --------- | ------ | -------------------------------------------- |
| x1 | number | X-coordinate of the first point on the arc. |
| y1 | number | Y-coordinate of the first point on the arc. |
| x2 | number | X-coordinate of the second point on the arc. |
| y2 | number | Y-coordinate of the second point on the arc. |
| radius | number | Radius of the arc. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -624,100 +355,42 @@ Draws an arc based on the radius and points on the arc.
path.arcTo(150, 20, 150, 70, 50);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001127125204.png)
![en-us_image_0000001127125204](figures/en-us_image_0000001127125204.png)
## ellipse<a name="section8146160205420"></a>
## ellipse
ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void
ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void
Draws an ellipse in the specified rectangular region.
- Parameters
<a name="table51461805541"></a>
<table><thead align="left"><tr id="row181461109541"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.1.4.1.1"><p id="p014716035415"><a name="p014716035415"></a><a name="p014716035415"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="31.34343434343434%" id="mcps1.1.4.1.2"><p id="p171472055413"><a name="p171472055413"></a><a name="p171472055413"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="35.323232323232325%" id="mcps1.1.4.1.3"><p id="p1814718035418"><a name="p1814718035418"></a><a name="p1814718035418"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1114714015418"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p81478015543"><a name="p81478015543"></a><a name="p81478015543"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p71470013548"><a name="p71470013548"></a><a name="p71470013548"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p714720125410"><a name="p714720125410"></a><a name="p714720125410"></a>X-coordinate of the ellipse center</p>
</td>
</tr>
<tr id="row1114710018548"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p1214718010544"><a name="p1214718010544"></a><a name="p1214718010544"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p314760175411"><a name="p314760175411"></a><a name="p314760175411"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p014730105419"><a name="p014730105419"></a><a name="p014730105419"></a>Y-coordinate of the ellipse center</p>
</td>
</tr>
<tr id="row2147709540"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p201478045416"><a name="p201478045416"></a><a name="p201478045416"></a>radiusX</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p14147205540"><a name="p14147205540"></a><a name="p14147205540"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p151475013547"><a name="p151475013547"></a><a name="p151475013547"></a>Ellipse radius on the x-axis.</p>
</td>
</tr>
<tr id="row61474012544"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p51477018543"><a name="p51477018543"></a><a name="p51477018543"></a>radiusY</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p14148150205416"><a name="p14148150205416"></a><a name="p14148150205416"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p181481705544"><a name="p181481705544"></a><a name="p181481705544"></a>Ellipse radius on the y-axis.</p>
</td>
</tr>
<tr id="row201484005417"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p161483075416"><a name="p161483075416"></a><a name="p161483075416"></a>rotation</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p1148502548"><a name="p1148502548"></a><a name="p1148502548"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p514820005414"><a name="p514820005414"></a><a name="p514820005414"></a>Rotation angle of the ellipse. The unit is radian.</p>
</td>
</tr>
<tr id="row181481704549"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p1814850165416"><a name="p1814850165416"></a><a name="p1814850165416"></a>startAngle</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p1914815025414"><a name="p1914815025414"></a><a name="p1914815025414"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p51481906547"><a name="p51481906547"></a><a name="p51481906547"></a>Angle of the start point for drawing the ellipse. The unit is radian.</p>
</td>
</tr>
<tr id="row1148150125412"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p131483019542"><a name="p131483019542"></a><a name="p131483019542"></a>endAngle</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p14148190155418"><a name="p14148190155418"></a><a name="p14148190155418"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p1114812095411"><a name="p1114812095411"></a><a name="p1114812095411"></a>Angle of the end point for drawing the ellipse. The angle is represented by radians.</p>
</td>
</tr>
<tr id="row4148206542"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.1.4.1.1 "><p id="p1114817035417"><a name="p1114817035417"></a><a name="p1114817035417"></a>anticlockwise</p>
</td>
<td class="cellrowborder" valign="top" width="31.34343434343434%" headers="mcps1.1.4.1.2 "><p id="p3148130105411"><a name="p3148130105411"></a><a name="p3148130105411"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="35.323232323232325%" headers="mcps1.1.4.1.3 "><p id="p914910015410"><a name="p914910015410"></a><a name="p914910015410"></a>Whether to draw the ellipse in the anticlockwise direction. The value <strong id="b148606837841113"><a name="b148606837841113"></a><a name="b148606837841113"></a>0</strong> indicates clockwise and the value <strong id="b64668246441113"><a name="b64668246441113"></a><a name="b64668246441113"></a>1</strong> indicates anticlockwise. This parameter is optional. The default value is <strong id="b137444197741113"><a name="b137444197741113"></a><a name="b137444197741113"></a>0</strong>.</p>
</td>
</tr>
</tbody>
</table>
- Example
```
<!-- xxx.hml -->
<div>
**Parameters**
| Parameter | Type | Description |
| ------------- | ------ | ------------------------------------------------------------ |
| x | number | X-coordinate of the ellipse center. |
| y | number | Y-coordinate of the ellipse center. |
| radiusX | number | Ellipse radius on the x-axis. |
| radiusY | number | Ellipse radius on the y-axis. |
| rotation | number | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. |
| endAngle | number | Angle of the end point for drawing the ellipse. The angle is represented by radians. |
| anticlockwise | number | Whether to draw the ellipse in the anticlockwise direction. The value **0** indicates clockwise and the value **1** indicates anticlockwise. This parameter is optional. The default value is **0**. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
......@@ -725,72 +398,38 @@ Draws an ellipse in the specified rectangular region.
path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001173324787.png)
![en-us_image_0000001173324787](figures/en-us_image_0000001173324787.png)
## rect<a name="section18565225124518"></a>
## rect
rect\(x: number, y: number, width: number, height: number\): void
rect(x: number, y: number, width: number, height: number): void
Creates a rectangle.
- Parameters
<a name="table92131548185610"></a>
<table><thead align="left"><tr id="row9238348185613"><th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.1"><p id="p723854810561"><a name="p723854810561"></a><a name="p723854810561"></a>Parameter</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.2"><p id="p2238144885615"><a name="p2238144885615"></a><a name="p2238144885615"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="33.333333333333336%" id="mcps1.1.4.1.3"><p id="p223814486561"><a name="p223814486561"></a><a name="p223814486561"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row5238104813569"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1423864816566"><a name="p1423864816566"></a><a name="p1423864816566"></a>x</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p3238194814560"><a name="p3238194814560"></a><a name="p3238194814560"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p9238204818566"><a name="p9238204818566"></a><a name="p9238204818566"></a>X-coordinate of the upper left corner of the rectangle.</p>
</td>
</tr>
<tr id="row1423884816562"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p132383488563"><a name="p132383488563"></a><a name="p132383488563"></a>y</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p02395487560"><a name="p02395487560"></a><a name="p02395487560"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p523934819568"><a name="p523934819568"></a><a name="p523934819568"></a>Y-coordinate of the upper left corner of the rectangle.</p>
</td>
</tr>
<tr id="row723954815563"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p182391481565"><a name="p182391481565"></a><a name="p182391481565"></a>width</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p142391648145610"><a name="p142391648145610"></a><a name="p142391648145610"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p523919486569"><a name="p523919486569"></a><a name="p523919486569"></a>Width of the rectangle.</p>
</td>
</tr>
<tr id="row1723924885618"><td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.1 "><p id="p1923934820561"><a name="p1923934820561"></a><a name="p1923934820561"></a>height</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.2 "><p id="p13239448135615"><a name="p13239448135615"></a><a name="p13239448135615"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="33.333333333333336%" headers="mcps1.1.4.1.3 "><p id="p523924819568"><a name="p523924819568"></a><a name="p523924819568"></a>Height of the rectangle.</p>
</td>
</tr>
</tbody>
</table>
- Example
**Parameters**
```
<!-- xxx.hml -->
<div>
| Parameter | Type | Description |
| --------- | ------ | ------------------------------------------------------- |
| x | number | X-coordinate of the upper left corner of the rectangle. |
| y | number | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Width of the rectangle. |
| height | number | Height of the rectangle. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
</div>
</div>
```
```
//xxx.js
export default {
```js
// xxx.js
export default {
onShow() {
const el =this.$refs.canvas;
const ctx = el.getContext('2d');
......@@ -798,8 +437,7 @@ Creates a rectangle.
path.rect(20, 20, 100, 100);
ctx.stroke(path);
}
}
}
```
![](figures/en-us_image_0000001127125212.png)
![en-us_image_0000001127125212](figures/en-us_image_0000001127125212.png)
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ fc4481b8
......@@ -3,6 +3,7 @@
The **\<Image>** component is used to render and display local and online images.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -36,7 +37,7 @@ Obtains an image from the specified source for subsequent rendering and display.
| Name | Type | Mandatory | Default Value | Description |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
## Attributes
......@@ -46,10 +47,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
| alt | string \| [Resource](../../ui/ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. |
| objectFit | ImageFit | ImageFit.Cover | Image scale type. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br><br>This attribute is not applicable to SVG images.|
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br><br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects.|
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br><br>This attribute is not applicable to SVG images.|
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br><br>This attribute is not applicable to **PixelMap** objects.|
| syncLoad<sup>8+</sup> | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
### ImageFit
......@@ -159,7 +160,7 @@ struct ImageExample1 {
}
```
![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif)
![en-us_image_0000001211898484](figures/en-us_image_0000001211898484.gif)
### Setting Attributes
......@@ -227,7 +228,7 @@ struct ImageExample2 {
}
```
![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png)
![en-us_image_0000001212058474](figures/en-us_image_0000001212058474.png)
### Invoking Events
......@@ -291,4 +292,4 @@ struct ImageExample3 {
}
```
![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif)
![en-us_image_0000001256858397](figures/en-us_image_0000001256858397.gif)
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ fc4481b8
# PinchGesture
PinchGesture is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers.
> **NOTE**<br>
> **NOTE**
>
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -41,25 +43,26 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct PinchGestureExample {
@State scale: number = 1
@State scaleValue: number = 1
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('PinchGesture scale:' + this.scale)
}
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.scale({ x: this.scale, y: this.scale, z: this.scale })
.scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue })
.gesture(
PinchGesture()
.onActionStart((event: GestureEvent) => {
console.info('Pinch start')
})
.onActionUpdate((event: GestureEvent) => {
this.scale = event.scale
this.scaleValue = event.scale
})
.onActionEnd(() => {
console.info('Pinch end')
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或