diff --git a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md index 63e42760af0329365bd1a0379a21259dd3502c14..1894942945c53a4d36bc2f9c892de28359faa9ff 100644 --- a/en/application-dev/notification/background-agent-scheduled-reminder-guide.md +++ b/en/application-dev/notification/background-agent-scheduled-reminder-guide.md @@ -4,167 +4,42 @@ You can set your application to call the **ReminderRequest** class to create scheduled reminders for countdown timers, calendar events, and alarm clocks. When the created reminders are published, the timing and pop-up notification functions of your application will be taken over by the reminder agent in the background, even when your application is frozen or exits. -## Available APIs - -**reminderAgent** encapsulates the methods for publishing and canceling reminders. - -**Table 1** Major APIs in reminderAgent - - - -| API | Description | -| ------------------------------------------------------------ | ------------------------------------------------------------ | -| function publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback\): void;
function publishReminder(reminderReq: ReminderRequest): Promise\; | Publishes a scheduled reminder.
The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. | -| function cancelReminder(reminderId: number, callback: AsyncCallback\): void;
function cancelReminder(reminderId: number): Promise\; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.) | -| function getValidReminders(callback: AsyncCallback>): void;
function getValidReminders(): Promise>; | Obtains all valid reminders set by the current application. | -| function cancelAllReminders(callback: AsyncCallback\): void;
function cancelAllReminders(): Promise\; | Cancels all reminders set by the current application. | -| function addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback\): void;
function addNotificationSlot(slot: NotificationSlot): Promise; | Registers a NotificationSlot instance to be used by the reminder. | -| function removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback\): void;function removeNotificationSlot(slotType: notification.SlotType): Promise\; | Removes a NotificationSlot instance of a specified type. | - -**ActionButtonType** enumerates types of buttons displayed in a reminder notification. - -**Table 2** ActionButtonType enumeration - - - -| Name | Description | -| ------------------------ | ------------------------------------------------------------ | -| ACTION_BUTTON_TYPE_CLOSE | Close button, which can be tapped to stop the reminder alert tone, close the reminder notification, and cancel the reminder snoozing. | - -**ReminderType** enumerates the reminder types. - -**Table 3** ReminderType enumeration - - - -| Name | Description | -| ---------------------- | ------------------- | -| REMINDER_TYPE_TIMER | Countdown reminder. | -| REMINDER_TYPE_CALENDAR | Calendar reminder. | -| REMINDER_TYPE_ALARM | Alarm reminder. | - -**ActionButton** defines a button displayed in the reminder notification. - -**Table 4** ActionButton instance - - - -| Name | Type | Mandatory | Description | -| ----- | ---------------- | --------- | ------------------- | -| title | string | Yes | Text on the button. | -| type | ActionButtonType | Yes | Button type. | - -**WantAgent** sets the package and ability that are redirected to when the reminder notification is clicked. - -**Table 5** WantAgent instance - - - -| Name | Type | Mandatory | Description | -| ----------- | ------ | --------- | ------------------------------------------------------------ | -| pkgName | string | Yes | Name of the package redirected to when the reminder notification is clicked. | -| abilityName | string | Yes | Name of the ability redirected to when the reminder notification is clicked. | - -**MaxScreenWantAgent** sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed. - -**Table 6** MaxScreenWantAgent instance - - - -| Name | Type | Mandatory | Description | -| ----------- | ------ | --------- | ------------------------------------------------------------ | -| pkgName | string | Yes | Name of the package that is automatically started when the reminder arrives and the device is not in use. | -| abilityName | string | Yes | Name of the ability that is automatically started when the reminder arrives and the device is not in use. | - -**ReminderRequest** defines the reminder to publish. - -**Table 7** ReminderRequest instance - - - -| Name | Type | Mandatory | Description | -| ------------------ | ------------------------------ | --------- | ------------------------------------------------------------ | -| reminderType | ReminderType | Yes | Type of the reminder. | -| actionButton | [ActionButton?, ActionButton?] | No | Action button displayed in the reminder notification. | -| wantAgent | WantAgent | No | Information about the ability that is redirected to when the notification is clicked. | -| maxScreenWantAgent | MaxScreenWantAgent | No | Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed. | -| ringDuration | number | No | Ring duration. | -| snoozeTimes | number | No | Number of reminder snooze times. | -| timeInterval | number | No | Reminder snooze interval. | -| title | string | No | Reminder title. | -| content | string | No | Reminder content. | -| expiredContent | string | No | Extended content to be displayed when the reminder expires. | -| snoozeContent | string | No | Extended content to be displayed when the reminder is snoozing. | -| notificationId | number | No | Notification ID used by the reminder. For details, see the API reference of the **NotificationRequest.setNotificationId(int id)** method. | -| slotType | SlotType | No | Type of the slot used by the reminder. | - -**ReminderRequestCalendar** extends **ReminderRequest** and defines a reminder for a calendar event. - -For the application to run properly, if both **repeatMonths** and **repeatDays** are not specified, the earliest reminder time must be later than the current time. -**Table 8** ReminderRequestCalendar instance - - - -| Name | Type | Mandatory | Description | -| ------------ | -------------- | --------- | ------------------------------------------------------------ | -| dateTime | LocalDateTime | Yes | Reminder time, accurate to the minute. | -| repeatMonths | Array\ | No | Months in which the reminder repeats. The value range is 1 to 12. | -| repeatDays | Array\ | No | Date on which the reminder repeats. The value range is 1 to 31. | - -**ReminderRequestAlarm** extends **ReminderRequest** and defines a reminder for the alarm clock. - -**Table 9** ReminderRequestAlarm instance - - - -| Name | Type | Mandatory | Description | -| ---------- | -------------- | --------- | ------------------------------------------------------------ | -| hour | number | Yes | Hour portion of the reminder time. The value range is 0 to 23. | -| minute | number | Yes | Minute portion of the reminder time. The value range is 0 to 59. | -| daysOfWeek | Array\ | No | Days of a week when the reminder repeats. The value range is 1 to 7. | - -**ReminderRequestTimer** extends **ReminderRequest** and defines a reminder for a scheduled timer. - -**Table 10** ReminderRequestTimer instance - - - -| Name | Type | Mandatory | Description | -| -------------------- | ------ | --------- | ----------------------------------------- | -| triggerTimeInSeconds | number | Yes | Number of seconds in the countdown timer. | - -**LocalDateTime** defines a **LocalDateTime** instance. +## Available APIs -**Table 11** LocalDateTime instance +**reminderAgent** encapsulates the APIs for publishing and canceling reminders. +For details about the APIs, see [reminderAgent](../reference/apis/js-apis-reminderAgent.md). +**Table 1** Major APIs in reminderAgent -| Name | Type | Mandatory | Description | -| ------ | ------ | --------- | ----------- | -| year | number | Yes | Year. | -| month | number | Yes | Month. | -| day | number | Yes | Date. | -| hour | number | Yes | Hour. | -| minute | number | Yes | Minute. | -| second | number | No | Second. | +| Name| Description| +| -------- | -------- | +| publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback<number>): void
publishReminder(reminderReq: ReminderRequest): Promise<number> | Publishes a scheduled reminder.
The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. | +| cancelReminder(reminderId: number, callback: AsyncCallback<void>): void
cancelReminder(reminderId: number): Promise<void> | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.)| +| getValidReminders(callback: AsyncCallback<Array<ReminderRequest>>): void
getValidReminders(): Promise<Array<ReminderRequest>> | Obtains all valid reminders set by the current application.| +| cancelAllReminders(callback: AsyncCallback<void>): void
cancelAllReminders(): Promise<void> | Cancels all reminders set by the current application.| +| addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback<void>): void
addNotificationSlot(slot: NotificationSlot): Promise<void> | Registers a **NotificationSlot** instance to be used by the reminder.| +| removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback<void>): void
removeNotificationSlot(slotType: notification.SlotType): Promise<void> | Removes a **NotificationSlot** instance of a specified type.| ## How to Develop > **NOTE** -> To publish a reminder, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission. - -Publish a 10-second countdown reminder. +> +> 1. To publish a reminder through the reminder agent, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission. +> +> 2. Your application must have notification enabled. For details, see [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). -1. Define a countdown timer instance. +1. Define a reminder agent. - ``` + Sample code for defining a reminder agent for a countdown timer: + ```js import reminderAgent from '@ohos.reminderAgent'; import notification from '@ohos.notification'; export default { - // In JS Project: + // For a JS project: // timer: { - // In eTS Project: + // For an eTS project: let timer : reminderAgent.ReminderRequestTimer = { reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER, triggerTimeInSeconds: 10, @@ -191,9 +66,97 @@ Publish a 10-second countdown reminder. } ``` -2. Publish the reminder. - - ``` + Sample code for defining a reminder agent for a calendar event: + + ```js + // For a JS project: + // calendar: { + // For an eTS project: + let calendar : reminderAgent.ReminderRequestCalendar = { + reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR, + dateTime: { + year: 2050, + month: 7, + day: 30, + hour: 11, + minute: 14, + second: 30 + }, + repeatMonths: [1], + repeatDays: [1], + actionButton: [ + { + title: "close", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE + }, + { + title: "snooze", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE + }, + ], + wantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + maxScreenWantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + ringDuration: 5, + snoozeTimes: 2, + timeInterval: 5, + title: "this is title", + content: "this is content", + expiredContent: "this reminder has expired", + snoozeContent: "remind later", + notificationId: 100, + slotType: notification.SlotType.SOCIAL_COMMUNICATION + } + ``` + + Sample code for defining a reminder agent for an alarm: + + ```js + // For a JS project: + // alarm: { + // For an eTS project: + let alarm : reminderAgent.ReminderRequestAlarm = { + reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM, + hour: 11, + minute: 14, + daysOfWeek: [0], + actionButton: [ + { + title: "close", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE + }, + { + title: "snooze", + type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE + }, + ], + wantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + maxScreenWantAgent: { + pkgName: "com.example.device", + abilityName: "com.example.device.MainAbility" + }, + ringDuration: 5, + snoozeTimes: 2, + timeInterval: 5, + title: "this is title", + content: "this is content", + expiredContent: "this reminder has expired", + snoozeContent: "remind later", + notificationId: 100, + slotType: notification.SlotType.SOCIAL_COMMUNICATION + } + ``` + +2. Publish a countdown reminder. + ```js startTimer() { reminderAgent.publishReminder(this.timer, (err, reminderId) =>{ this.printInfo(JSON.stringify(err)); @@ -203,98 +166,9 @@ Publish a 10-second countdown reminder. ``` HML page code: - - ``` + ```html
``` -Sample code for defining a calendar reminder instance: - -``` -// In JS Project: -// calendar: { -// In eTS Project: -let calendar : reminderAgent.ReminderRequestCalendar = { - reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR, - dateTime: { - year: 2050, - month: 7, - day: 30, - hour: 11, - minute: 14, - second: 30 - }, - repeatMonths: [1], - repeatDays: [1], - actionButton: [ - { - title: "close", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE - }, - { - title: "snooze", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE - }, - ], - wantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - maxScreenWantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - ringDuration: 5, - snoozeTimes: 2, - timeInterval: 5, - title: "this is title", - content: "this is content", - expiredContent: "this reminder has expired", - snoozeContent: "remind later", - notificationId: 100, - slotType: notification.SlotType.SOCIAL_COMMUNICATION -} -``` - -Sample code for defining an alarm reminder instance: - -``` -// In JS Project: -// alarm: { -// In eTS Project: -let alarm : reminderAgent.ReminderRequestAlarm = { - reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM, - hour: 11, - minute: 14, - daysOfWeek: [0], - actionButton: [ - { - title: "close", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE - }, - { - title: "snooze", - type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE - }, - ], - wantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - maxScreenWantAgent: { - pkgName: "com.example.device", - abilityName: "com.example.device.MainAbility" - }, - ringDuration: 5, - snoozeTimes: 2, - timeInterval: 5, - title: "this is title", - content: "this is content", - expiredContent: "this reminder has expired", - snoozeContent: "remind later", - notificationId: 100, - slotType: notification.SlotType.SOCIAL_COMMUNICATION -} -``` \ No newline at end of file diff --git a/en/application-dev/reference/apis/js-apis-reminderAgent.md b/en/application-dev/reference/apis/js-apis-reminderAgent.md index 24f01b3f40d20ae22434cba44c2a6c644d4a95fa..7db47e5bec79abe6abd5ff65457e1b6565ce0fc9 100644 --- a/en/application-dev/reference/apis/js-apis-reminderAgent.md +++ b/en/application-dev/reference/apis/js-apis-reminderAgent.md @@ -20,7 +20,7 @@ import reminderAgent from'@ohos.reminderAgent'; publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback<number>): void -Publishes an agent-powered reminder. This API uses an asynchronous callback to return the result. +Publishes a reminder through the reminder agent. This API uses an asynchronous callback to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). **Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER @@ -49,7 +49,7 @@ Publishes an agent-powered reminder. This API uses an asynchronous callback to r publishReminder(reminderReq: ReminderRequest): Promise<number> -Publishes an agent-powered reminder. This API uses a promise callback to return the result. +Publishes a reminder through the reminder agent. This API uses a promise to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8). **Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER @@ -435,7 +435,7 @@ Sets the package and ability that are redirected to when the reminder notificati ## MaxScreenWantAgent -Sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed. +Provides the information about the target package and ability to start automatically when the reminder is displayed in full-screen mode. This API is reserved. **System capability**: SystemCapability.Notification.ReminderAgent @@ -454,7 +454,7 @@ Defines the reminder to publish. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | | reminderType | ReminderType | Yes| Type of the reminder.| -| actionButton | [ActionButton?, ActionButton?] | No| Action button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)| +| actionButton | [ActionButton?, ActionButton?] | No| Button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)| | wantAgent | WantAgent | No| Information about the ability that is redirected to when the notification is clicked.| | maxScreenWantAgent | MaxScreenWantAgent | No| Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed.| | ringDuration | number | No| Ringing duration.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md index 386f5aa23c7467f88e77d0c34647f2467af903b3..10ddfd03dc9644ad949d6800e6718318c1de15de 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -1,11 +1,11 @@ # Search +The **\** component provides an input area for users to search. + > **NOTE** > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **\** component provides an input area for users to search. - ## Required Permissions None @@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll - Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | value | string | No| - | Text input in the search text box. | - | placeholder | string | No | - | Text displayed when there is no input. | - | icon | string | No| - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png. | - | controller | SearchController | No| - | Controller. | + | Name | Type | Mandatory | Default Value | Description | + | ----------- | ---------------- | ---- | ---- | ---------------------------------------- | + | value | string | No | - | Text input in the search text box. | + | placeholder | string | No | - | Text displayed when there is no input. | + | icon | string | No | - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.| + | controller | SearchController | No | - | Controller. | ## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button. | -| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | -| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | -| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | +| Name | Type | Default Value | Description | +| ----------------------- | ---------------------------------------- | ---- | --------------------- | +| searchButton | string | – | Text on the search button located next to the search text box. By default, there is no search button.| +| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | +| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | +| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | +| copyOption9+ | boolean \| [CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed.| ## Events -| Name | Description | -| -------- | -------- | -| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.
- **value**: current text input. | -| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
- **value**: current text input. | -| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
- **value**: text copied. | -| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
- **value**: text cut. | -| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
- **value**: text pasted. | +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.
-**value**: current text input.| +| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.
-**value**: current text input. | +| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.
-**value**: text copied. | +| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.
-**value**: text cut. | +| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.
-**value**: text pasted. | ## SearchController @@ -63,9 +64,9 @@ Sets the position of the caret. - Parameters - | Name | Type | Mandatory | Default Value | Description | - | ---- | ------ | ---- | ---- | --------------------- | - | value | number | Yes | - | Length from the start of the text string to the position where the caret is located. | + | Name | Type | Mandatory | Default Value | Description | + | ----- | ------ | ---- | ---- | ----------------- | + | value | number | Yes | - | Length from the start of the character string to the position where the caret is located.| @@ -76,29 +77,30 @@ Sets the position of the caret. @Entry @Component struct SearchExample { - @State changevalue: string = '' - @State submitvalue: string = '' + @State changeValue: string = '' + @State submitValue: string = '' controller: SearchController = new SearchController() build() { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { - Text(this.submitvalue) - Text(this.changevalue) - Search({value: '', placeholder: 'Type to search', controller: this.controller}) + Text(this.submitValue) + Text(this.changeValue) + Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller}) .searchButton('Search') .width(400) .height(35) .backgroundColor(Color.White) .placeholderColor(Color.Grey) - .placeholderFont({ size: 50, weight: 10, family: 'serif', style: FontStyle.Normal }) + .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal }) .onSubmit((value: string) => { - this.submitvalue = value + this.submitValue = value }) .onChange((value: string) => { - this.changevalue = value + this.changeValue = value }) - .margin({ top: 30 }) + .margin({ top: 30, left:10, right:10 }) } } } ``` +![search](figures/search.png) diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md index 33471a248de86a79f1fb72c2fa3365e7e2b330f8..a3fba5efc3ca2b4f40aed277bd10cd96d2d62b40 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md @@ -1,11 +1,11 @@ # Path2D - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. 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**. -**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. +> **NOTE** +> +> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## addPath @@ -14,41 +14,43 @@ addPath(path: Object): void Adds a path to this path. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | path | Object | Yes | null | Path to be added to this path. | - -- Example - - ``` - @Entry - @Component - struct AddPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - - private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.addPath(this.path2Da) - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| path | Object | Yes | null | Path to be added to this path. | + +**Example** + +```ts +// xxx.ets +@Entry +@Component +struct AddPath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + + private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.addPath(this.path2Da) + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` +} +``` - ![en-us_image_0000001211898520](figures/en-us_image_0000001211898520.png) +![en-us_image_0000001211898520](figures/en-us_image_0000001211898520.png) ## closePath @@ -57,37 +59,38 @@ 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 has already been closed or has only one point, this method does nothing. -- Example - - ``` - @Entry - @Component - struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private path2Db: Path2D = new Path2D() - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - this.path2Db.moveTo(200, 100) - this.path2Db.lineTo(300, 100) - this.path2Db.lineTo(200, 200) - this.path2Db.closePath() - this.context.stroke(this.path2Db) - }) - } - .width('100%') - .height('100%') +**Example** + +```ts +// xxx.ets +@Entry +@Component +struct ClosePath { + private settings: RenderingContextSettings = new RenderingContextSettings(true) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private path2Db: Path2D = new Path2D() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.path2Db.moveTo(200, 100) + this.path2Db.lineTo(300, 100) + this.path2Db.lineTo(200, 200) + this.path2Db.closePath() + this.context.stroke(this.path2Db) + }) } + .width('100%') + .height('100%') } - ``` +} +``` - ![en-us_image_0000001212218482](figures/en-us_image_0000001212218482.png) +![en-us_image_0000001212218482](figures/en-us_image_0000001212218482.png) ## moveTo @@ -96,15 +99,17 @@ 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 - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the target point. | - | y | number | Yes | 0 | Y-coordinate of the target point. | +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes | 0 | X-coordinate of the target point. | +| y | number | Yes | 0 | Y-coordinate of the target point. | -- Example +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct MoveTo { @@ -132,7 +137,7 @@ Moves the current coordinate point of the path to the target point, without draw } ``` - ![en-us_image_0000001257138389](figures/en-us_image_0000001257138389.png) +![en-us_image_0000001257138389](figures/en-us_image_0000001257138389.png) ## lineTo @@ -141,15 +146,17 @@ lineTo(x: number, y: number): void Draws a straight line from the current point to the target point. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the target point. | - | y | number | Yes | 0 | Y-coordinate of the target point. | +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes | 0 | X-coordinate of the target point. | +| y | number | Yes | 0 | Y-coordinate of the target point. | -- Example +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct LineTo { @@ -178,7 +185,7 @@ Draws a straight line from the current point to the target point. } ``` - ![en-us_image_0000001256858435](figures/en-us_image_0000001256858435.png) +![en-us_image_0000001256858435](figures/en-us_image_0000001256858435.png) ## bezierCurveTo @@ -187,19 +194,21 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, Draws a cubic bezier curve on the canvas. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. | - | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. | - | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. | - | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. | - | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | - | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | - -- Example +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. | +| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. | +| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. | +| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. | +| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | +| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | + +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct BezierCurveTo { @@ -224,7 +233,7 @@ Draws a cubic bezier curve on the canvas. } ``` - ![en-us_image_0000001257058445](figures/en-us_image_0000001257058445.png) +![en-us_image_0000001257058445](figures/en-us_image_0000001257058445.png) ## quadraticCurveTo @@ -233,17 +242,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void Draws a quadratic curve on the canvas. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. | - | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. | - | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | - | y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. | +| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. | +| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | +| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | -- Example +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct QuadraticCurveTo { @@ -269,28 +280,30 @@ Draws a quadratic curve on the canvas. } ``` - ![en-us_image_0000001212058512](figures/en-us_image_0000001212058512.png) +![en-us_image_0000001212058512](figures/en-us_image_0000001212058512.png) ## arc -arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void +arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void Draws an arc on the canvas. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the center point of the arc. | - | y | number | Yes | 0 | Y-coordinate of the center point of the arc. | - | radius | number | Yes | 0 | Radius of the arc. | - | startAngle | number | Yes | 0 | Start radian of the arc. | - | endAngle | number | Yes | 0 | End radian of the arc. | - | anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | - -- Example +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes | 0 | X-coordinate of the center point of the arc. | +| y | number | Yes | 0 | Y-coordinate of the center point of the arc. | +| radius | number | Yes | 0 | Radius of the arc. | +| startAngle | number | Yes | 0 | Start radian of the arc. | +| endAngle | number | Yes | 0 | End radian of the arc. | +| anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | + +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct Arc { @@ -314,7 +327,7 @@ Draws an arc on the canvas. } ``` - ![en-us_image_0000001212378446](figures/en-us_image_0000001212378446.png) +![en-us_image_0000001212378446](figures/en-us_image_0000001212378446.png) ## arcTo @@ -323,18 +336,20 @@ 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 - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. | - | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. | - | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. | - | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. | - | radius | number | Yes | 0 | Radius of the arc. | +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. | +| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. | +| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. | +| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. | +| radius | number | Yes | 0 | Radius of the arc. | -- Example +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct ArcTo { @@ -359,7 +374,7 @@ Draws an arc based on the radius and points on the arc. } ``` - ![en-us_image_0000001212058510](figures/en-us_image_0000001212058510.png) +![en-us_image_0000001212058510](figures/en-us_image_0000001212058510.png) ## ellipse @@ -368,21 +383,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number Draws an ellipse in the specified rectangular region. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the ellipse center. | - | y | number | Yes | 0 | Y-coordinate of the ellipse center. | - | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | - | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | - | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. | - | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. | - | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. | - | anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. | - -- Example +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes | 0 | X-coordinate of the ellipse center. | +| y | number | Yes | 0 | Y-coordinate of the ellipse center. | +| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | +| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | +| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. | +| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. | +| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. | +| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. | + +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -407,7 +424,7 @@ Draws an ellipse in the specified rectangular region. } ``` - ![en-us_image_0000001257138391](figures/en-us_image_0000001257138391.png) +![en-us_image_0000001257138391](figures/en-us_image_0000001257138391.png) ## rect @@ -416,17 +433,19 @@ rect(x: number, y: number, width: number, height: number): void Creates a rectangle. -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. | - | y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. | - | width | number | Yes | 0 | Width of the rectangle. | - | height | number | Yes | 0 | Height of the rectangle. | +**Parameters** -- Example +| Name | Type | Mandatory | Default Value | Description | +| -------- | -------- | -------- | -------- | -------- | +| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. | +| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. | +| width | number | Yes | 0 | Width of the rectangle. | +| height | number | Yes | 0 | Height of the rectangle. | + +**Example** - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -450,4 +469,4 @@ Creates a rectangle. } ``` - ![en-us_image_0000001256978385](figures/en-us_image_0000001256978385.png) +![en-us_image_0000001256978385](figures/en-us_image_0000001256978385.png) \ No newline at end of file