diff --git a/en/application-dev/reference/arkui-js/js-components-common-events.md b/en/application-dev/reference/arkui-js/js-components-common-events.md index b477f87918dc4f1ac030fbbf0d33e51b4c97248f..ff3370b891a40e1d0fdac79f8546348ffa649c42 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-events.md +++ b/en/application-dev/reference/arkui-js/js-components-common-events.md @@ -1,116 +1,108 @@ # Universal Events +> **NOTE**
+> Universal events are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + ## Event Description - Events are bound to components. When a component meets the event triggering condition, the corresponding event callback in the JS is executed to implement the interaction between the UI and the JS logic layer of the page. -- The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters. - -Different from private events, universal events can be bound to most components. - - - -| Name | Parameter | Description | Support Bubbling | -| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------------- | -| touchstart | [TouchEvent](js-components-common-events.md) | Triggered when the tapping starts. | Yes5+ | -| touchmove | [TouchEvent](js-components-common-events.md) | Triggered when the tapping moves. | Yes5+ | -| touchcancel | [TouchEvent](js-components-common-events.md) | Triggered when the tapping is interrupted. | Yes5+ | -| touchend | [TouchEvent](js-components-common-events.md) | Triggered when the tapping ends. | Yes5+ | -| click | - | Triggered when a component is clicked. | Yes6+ | -| doubleclick7+ | | Triggered when a component is double-clicked. | No | -| longpress | - | Triggered when a component is long pressed. | No | -| swipe5+ | [SwipeEvent](js-components-common-events.md#table111811577714) | Triggered when a user quickly swipes on a component. | No | -| attached6+ | - | Triggered after the current component node is mounted to the render tree. | No | -| detached6+ | - | Triggered when the current component node is removed from the render tree. | No | -| pinchstart7+ | [PinchEvent](js-components-common-events.md) | Triggered when a pinch operation is started. | No | -| pinchupdate7+ | [PinchEvent](js-components-common-events.md) | Triggered when a pinch operation is in progress. | No | -| pinchend7+ | [PinchEvent](js-components-common-events.md) | Triggered when a pinch operation is ended. | No | -| pinchcancel7+ | [PinchEvent](js-components-common-events.md) | Triggered when the pinch operation is interrupted. | No | -| dragstart7+ | [DragEvent](js-components-common-events.md) | Triggered when dragging starts. | No | -| drag7+ | [DragEvent](js-components-common-events.md) | Triggered when dragging is in progress. | No | -| dragend7+ | [DragEvent](js-components-common-events.md) | Triggered when dragging is ended. | No | -| dragenter7+ | [DragEvent](js-components-common-events.md) | Triggered when the dragged component enters a drop target. | No | -| dragover7+ | [DragEvent](js-components-common-events.md) | Triggered when the dragged component is being dragged over a drop target. | No | -| dragleave7+ | [DragEvent](js-components-common-events.md) | Triggered when the dragged component leaves a drop target. | No | -| drop7+ | [DragEvent](js-components-common-events.md) | Triggered when a component is dropped on a drop target. | No | -> ![img](public_sys-resources/icon-note.gif) **NOTE:** Events not listed in the preceding table are non-bubbling events, such as the [change event](js-components-basic-input.md). For details, see the specific component. - -**Table 1** Attributes of the BaseEvent object - - - -| Attribute | Type | Description | -| --------- | ------ | ----------------------------------------------- | -| type | string | Event type, such as **click** and **longpress** | -| timestamp | number | Timestamp when the event is triggered | +- The event callback can carry additional information through parameters, such as the dataset on the component and event-specific callback parameters. -**Table 2** Attributes of the TouchEvent object (inherited from BaseEvent) +Different from private events, universal events can be bound to most components. -| Attribute | Type | Description | -| -------------- | ----------------- | ------------------------------------------------------------ | -| touches | Array\ | Attribute set of the touch event, including the information array of the touch points on the screen. | -| changedTouches | Array\ | Attribute set when a touch event occurs, including the information array of changed touch points on the screen. **changedTouches** has the same data format as **touches** and indicates touch point changes, such as from no touch point to newly generated touch points, from some touch points to no touch point, and location changes. For example, when the user's finger leaves the touchscreen, no data exists in the **touches** array, but **changedTouches** will save the generated data. | +| Name | Parameter | Description | Support Bubbling | +| ------------------------ | ---------- | ---------------------------------------- | ---------------------------------------- | +| touchstart | TouchEvent | Triggered when the tapping starts. For details about **TouchEvent**, see Table 2. | Yes5+ | +| touchmove | TouchEvent | Triggered when the tapping moves. | Yes5+ | +| touchcancel | TouchEvent | Triggered when the tapping is interrupted. | Yes5+ | +| touchend | TouchEvent | Triggered when the tapping ends. | Yes5+ | +| click | - | Triggered when a component is clicked. | Yes6+ | +| doubleclick7+ | - | Triggered when a component is double-clicked. | No
Bubbling is supported since API version 9. | +| longpress | - | Triggered when a component is long pressed. | No
Bubbling is supported since API version 9.| +| swipe5+ | SwipeEvent | Triggered when a user quickly swipes on a component.
For details about **SwipeEvent**, see Table 4. | No
Bubbling is supported since API version 9.| +| attached6+ | - | Triggered after the current component node is mounted to the render tree. | No | +| detached6+ | - | Triggered when the current component node is removed from the render tree. | No | +| pinchstart7+ | PinchEvent | Triggered when a pinch operation is started.
For details about **PinchEvent**, see Table 5.| No | +| pinchupdate7+ | PinchEvent | Triggered when a pinch operation is in progress. | No | +| pinchend7+ | PinchEvent | Triggered when a pinch operation is ended. | No | +| pinchcancel7+ | PinchEvent | Triggered when a pinch operation is interrupted. | No | +| dragstart7+ | DragEvent | Triggered when dragging starts.
For details about **DragEvent**, see Table 6. | No | +| drag7+ | DragEvent | Triggered when dragging is in progress. | No | +| dragend7+ | DragEvent | Triggered when dragging is ended. | No | +| dragenter7+ | DragEvent | Triggered when the dragged component enters a drop target. | No | +| dragover7+ | DragEvent | Triggered when the dragged component is being dragged over a drop target. | No | +| dragleave7+ | DragEvent | Triggered when the dragged component leaves a drop target. | No | +| drop7+ | DragEvent | Triggered when the dragged component is dropped on a drop target. | No | + + +> **NOTE**
+> Events not listed in the preceding table do not support bubbling, such as the [change event](../arkui-js/js-components-basic-input.md#events) of the **** component. For details, see the description of the specific component. + +**Table 1** BaseEvent + +| Attribute | Type | Description | +| --------------------- | -------------------- | --------------------------- | +| type | string | Event type, such as **click** and **longpress**.| +| timestamp | number | Timestamp when the event is triggered. | +| deviceId6+ | number | ID of the device that triggers the event. | +| target6+ | [Target](#target6)| Target object that triggers the event. | + +**Table 2** TouchEvent (inherited from BaseEvent) + +| Attribute | Type | Description | +| -------------- | ---------------------- | ---------------------------------------- | +| touches | Array<TouchInfo> | Attribute set of the touch event, including the information array of the touch points on the screen. | +| changedTouches | Array<TouchInfo> | Attribute set when a touch event occurs, including the information array of changed touch points on the screen. **changedTouches** has the same data format as **touches** and indicates touch point changes, including changes in the number and location of touch points. For example, when the user's finger leaves the screen, which means that the number of touch points changes from 1 to 0, **changedTouches** has the relevant data generated, but not **touches**.| **Table 3** TouchInfo +| Attribute | Type | Description | +| ------------------ | ------ | ------------------------------ | +| globalX | number | Horizontal distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.| +| globalY | number | Vertical distance from the upper left corner of the screen (excluding the status bar), which acts as the origin of coordinates.| +| localX | number | Horizontal distance from the upper left corner of the touched component, which acts as the origin of coordinates. | +| localY | number | Vertical distance from the upper left corner of the touched component, which acts as the origin of coordinates. | +| size | number | Touch area. | +| force6+ | number | Touch force. | +**Table 4** SwipeEvent (inherited from BaseEvent) -| Attribute | Type | Description | -| --------- | ------ | ------------------------------------------------------------ | -| globalX | number | Horizontal distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin. | -| globalY | number | Vertical distance from the upper left corner of the screen (excluding the status bar). The upper left corner of the screen acts as the coordinate origin. | -| localX | number | Horizontal distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin. | -| localY | number | Vertical distance from the upper left corner of the touched component. The upper left corner of the component acts as the coordinate origin. | -| size | number | Touch area. | -| force6+ | number | Touch force. | - -**Table 4** Attributes of the SwipeEvent object (inherited from BaseEvent) +| Attribute | Type | Description | +| --------------------- | ------ | ---------------------------------------- | +| direction | string | Swiping direction. The value can be one of the following:
- **left**: Swipe left.
- **right**: Swipe right.
- **up**: Swipe up.
- **down**: Swipe down.| +| distance6+ | number | Swiping distance in the swiping direction. | +**Table 5** PinchEvent7+ +| Attribute | Type | Description | +| ------------ | ------ | -------------- | +| scale | number | Scale factor. | +| pinchCenterX | number | X-coordinate of the pinch center, in px.| +| pinchCenterY | number | Y-coordinate of the pinch center, in px.| -| Attribute | Type | Description | -| ---------- | ------ | ------------------------------------------------------------ | -| direction | string | Swiping direction. The value can be one of the following:
- **left**: Swipe from right to left
- **right**: Swipe from left to right
- **up**: Swipe upwards
- **down**: Swipe downwards | -| distance6+ | number | Swiping distance in the swiping direction. | +**Table 6** DragEvent7+ (inherited from BaseEvent) -**Table 5** Attributes of the PinchEvent object7+ +| Attribute | Type | Description | +| ------------------------- | -------------------------------- | ---------------- | +| type | string | Event name. | +| globalX | number | Horizontal distance from the upper left corner of the screen, which acts as the origin of coordinates.| +| globalY | number | Vertical distance from the upper left corner of the screen, which acts as the origin of coordinates.| +| timestamp | number | Timestamp. | - - -| Attribute | Type | Description | -| ------------ | ------ | ---------------------------------------- | -| scale | number | Scale factor. | -| pinchCenterX | number | X-coordinate of the pinch center, in px. | -| pinchCenterY | number | Y-coordinate of the pinch center, in px. | - -**Table 6** Attributes of the DragEvent object (inherited from BaseEvent)7+ - - - -| Attribute | Type | Description | -| --------- | ------ | ------------------------------------------------------------ | -| type | string | Event name. | -| globalX | number | Horizontal distance from the origin of the coordinates in the upper left corner of the screen. | -| globalY | number | Vertical distance from the origin of the coordinates in the upper left corner of the screen. | -| timestamp | number | Timestamp. | - -## Event Object +## Target6+ When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object. -**target object:** +| Attribute | Type | Description | +| -------------------- | ------ | ---------------------------------------- | +| dataSet6+ | Object | Custom attribute set defined through [data-*](../arkui-js/js-components-common-attributes.md).| +**Example** - -| Attribute | Type | Description | -| --------- | ------ | ------------------------------------------------------------ | -| dataSet6+ | Object | Custom attribute set defined through [data-*](js-components-common-attributes.md). | - -**Example:** - -``` +```html
``` -``` +```js // xxx.js export default { touchstartfunc(msg) { @@ -128,3 +120,5 @@ export default { } ``` + + diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index f4a4b6e72edeeac8f332e8f4027ad5dc7db4eeba..ebd0371eb673a6f460ff97b626595ffc6fc91f25 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -1,11 +1,11 @@ # ImageAnimator -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. +The **\** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. ## Required Permissions @@ -15,7 +15,7 @@ None ## Child Components -None +Not supported ## APIs @@ -37,7 +37,7 @@ ImageAnimator() | iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. | - AnimationStatus enums - | Name | Description | + | Name | Description | | -------- | -------- | | Initial | The animation is in the initial state. | | Running | The animation is being played. | @@ -45,7 +45,7 @@ ImageAnimator() | Stopped | The animation is stopped. | - FillMode enums - | Name | Description | + | Name | Description | | -------- | -------- | | None | After the playback is complete, the animation restores to the initial state. | | Forwards | After the playback is complete, the animation remains in the end state. | @@ -78,6 +78,7 @@ struct ImageAnimatorExample { ImageAnimator() .images([ { + // The comment folder is at the same level as the pages folder. src: '/comment/bg1.jpg', duration: 500, width: 325, diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index d6c76db8635c77b616b0fe09484abe45349d86a6..5e13044ead75c6736820487408d519dcc49ffb87 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -1,11 +1,11 @@ # CanvasRenderingContext2D -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -Use **RenderingContext** to draw rectangles, text, images, and other objects on a canvas. +The **\** component is used to draw rectangles, text, images, and other objects on a canvas. ## APIs @@ -15,7 +15,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting) - Parameters | Name | Type | Mandatory | Default Value | Description | | ------- | ---------------------------------------- | --------- | ------------- | ----------------------------- | - | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See RenderingContextSettings. | + | setting | [RenderingContextSettings](#renderingcontextsettings) | Yes | - | See [RenderingContextSettings](#renderingcontextsettings). | ### RenderingContextSettings @@ -34,15 +34,15 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet | Name | Type | Default Value | Description | | ---------------------------------------- | ---------------------------------------- | ------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | +| [fillStyle](#fillstyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Style used to fill an area.
- When the type is **<color>**, this attribute indicates the fill color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | | [lineWidth](#linewidth) | number | - | Line width. | -| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | -| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. | -| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. | +| [strokeStyle](#strokestyle) | <color> \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | - | Stroke style.
- When the type is **<color>**, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the [createLinearGradient](#createlineargradient) method.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the [createPattern](#createpattern) method. | +| [lineCap](#linecap) | string | 'butt' | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness. | +| [lineJoin](#linejoin) | string | 'miter' | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a rounded corner with the radius equal to the line width.
- **'bevel'**: The shape used to join line segments is a beveled corner. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments is a mitered corner. The corner is formed by extending the outside edges of the lines until they meet. You can adjust the effect of this attribute using **miterLimit**. | | [miterLimit](#miterlimit) | number | 10 | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. | -| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. | -| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. | -| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. | +| [font](#font) | string | 'normal normal 14px sans-serif' | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**. | +| [textAlign](#textalign) | string | 'left' | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
**NOTE**
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**. | +| [textBaseline](#textbaseline) | string | 'alphabetic' | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
- **'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. | | [globalAlpha](#globalalpha) | number | - | Opacity. **0.0**: completely transparent; **1.0**: completely opaque. | | [lineDashOffset](#linedashoffset) | number | 0.0 | Offset of the dashed line. The precision is float. | | [globalCompositeOperation](#globalcompositeoperation) | string | 'source-over' | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**. | @@ -53,14 +53,14 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. | | imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> The value of the **<color>** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format. ### fillStyle - -``` +```ts +// xxx.ets @Entry @Component struct FillStyleExample { @@ -89,8 +89,8 @@ struct FillStyleExample { ### lineWidth - -``` +```ts +// xxx.ets @Entry @Component struct LineWidthExample { @@ -119,8 +119,8 @@ struct LineWidthExample { ### strokeStyle - -``` +```ts +// xxx.ets @Entry @Component struct StrokeStyleExample { @@ -151,8 +151,8 @@ struct StrokeStyleExample { ### lineCap - -``` +```ts +// xxx.ets @Entry @Component struct LineCapExample { @@ -185,8 +185,8 @@ struct LineCapExample { ### lineJoin - -``` +```ts +// xxx.ets @Entry @Component struct LineJoinExample { @@ -220,8 +220,8 @@ struct LineJoinExample { ### miterLimit - -``` +```ts +// xxx.ets @Entry @Component struct MiterLimit { @@ -255,8 +255,8 @@ struct MiterLimit { ### font - -``` +```ts +// xxx.ets @Entry @Component struct Font { @@ -285,8 +285,8 @@ struct Font { ### textAlign - -``` +```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -330,8 +330,8 @@ struct CanvasExample { ### textBaseline - -``` +```ts +// xxx.ets @Entry @Component struct TextBaseline { @@ -375,8 +375,8 @@ struct TextBaseline { ### globalAlpha - -``` +```ts +// xxx.ets @Entry @Component struct GlobalAlpha { @@ -408,8 +408,8 @@ struct GlobalAlpha { ### lineDashOffset - -``` +```ts +// xxx.ets @Entry @Component struct LineDashOffset { @@ -453,8 +453,8 @@ struct LineDashOffset { | copy | Displays the new drawing and neglects the existing drawing. | | xor | Combines the new drawing and existing drawing using the XOR operation. | - -``` +```ts +// xxx.ets @Entry @Component struct GlobalCompositeOperation { @@ -491,8 +491,8 @@ struct GlobalCompositeOperation { ### shadowBlur - -``` +```ts +// xxx.ets @Entry @Component struct ShadowBlur { @@ -523,8 +523,8 @@ struct ShadowBlur { ### shadowColor - -``` +```ts +// xxx.ets @Entry @Component struct ShadowColor { @@ -555,8 +555,8 @@ struct ShadowColor { ### shadowOffsetX - -``` +```ts +// xxx.ets @Entry @Component struct ShadowOffsetX { @@ -588,8 +588,8 @@ struct ShadowOffsetX { ### shadowOffsetY - -``` +```ts +// xxx.ets @Entry @Component struct ShadowOffsetY { @@ -620,8 +620,8 @@ struct ShadowOffsetY { ### imageSmoothingEnabled - -``` +```ts +// xxx.ets @Entry @Component struct ImageSmoothingEnabled { @@ -668,7 +668,8 @@ Fills a rectangle on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct FillRect { @@ -710,7 +711,8 @@ Draws an outlined rectangle on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct StrokeRect { @@ -751,7 +753,8 @@ Clears the content in a rectangle on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct ClearRect { @@ -793,7 +796,8 @@ Draws filled text on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct FillText { @@ -834,7 +838,8 @@ Draws a text stroke on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct StrokeText { @@ -883,7 +888,8 @@ Returns a **TextMetrics** object used to obtain the width of specified text. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct MeasureText { @@ -923,7 +929,8 @@ Strokes a path. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Stroke { @@ -960,7 +967,8 @@ Creates a drawing path. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct BeginPath { @@ -1005,7 +1013,8 @@ Moves a drawing path to a target position on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct MoveTo { @@ -1048,7 +1057,8 @@ Connects the current point to a target position using a straight line. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct LineTo { @@ -1085,7 +1095,8 @@ Draws a closed path. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct ClosePath { @@ -1130,7 +1141,8 @@ Creates a pattern for image filling based on a specified source image and repeti - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CreatePattern { @@ -1177,7 +1189,8 @@ Draws a cubic bezier curve on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct BezierCurveTo { @@ -1222,7 +1235,8 @@ Draws a quadratic curve on the canvas. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct QuadraticCurveTo { @@ -1313,7 +1327,8 @@ Draws an arc based on the radius and points on the arc. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct ArcTo { @@ -1362,7 +1377,8 @@ Draws an ellipse in the specified rectangular region. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -1406,7 +1422,8 @@ Creates a rectangle. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -1441,7 +1458,8 @@ Fills the area inside a closed path. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Fill { @@ -1476,7 +1494,8 @@ Sets the current path to a clipping path. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Clip { @@ -1519,7 +1538,8 @@ Rotates a canvas clockwise around its coordinate axes. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Rotate { @@ -1560,7 +1580,8 @@ Scales a canvas based on scale factors. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Scale { @@ -1594,7 +1615,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE**
> The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. > > - x' = scaleX \* x + skewY \* y + translateX @@ -1613,7 +1634,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Transform { @@ -1664,7 +1686,8 @@ Resets the existing transformation matrix and creates a new transformation matri - Example - ``` + ```ts + // xxx.ets @Entry @Component struct SetTransform { @@ -1708,7 +1731,8 @@ Moves the origin of the coordinate system. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct Translate { @@ -1738,18 +1762,18 @@ Moves the origin of the coordinate system. ### drawImage -drawImage(image: ImageBitmap, dx: number, dy: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void -drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void -drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void +drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void Draws an image. - Parameters | Name | Type | Mandatory | Default Value | Description | | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see ImageBitmap or PixelMap. | | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | | sWidth | number | No | 0 | Target width to crop the source image. | @@ -1762,7 +1786,8 @@ Draws an image. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct ImageExample { @@ -1812,12 +1837,24 @@ Creates an **ImageData** object. For details, see [ImageData](ts-components-canv | --------- | ------ | --------- | ------------- | ---------------------------------------- | | imagedata | Object | Yes | null | **ImageData** object with the same width and height copied from the original **ImageData** object. | +### getPixelMap + +getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap + +Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas. +- Parameters + | Name | Type | Mandatory | Default Value | Description | + | ---- | ------ | ---- | ---- | --------------- | + | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| + | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| + | sw | number | Yes | 0 | Width of the output area. | + | sh | number | Yes | 0 | Height of the output area. | ### getImageData getImageData(sx: number, sy: number, sw: number, sh: number): Object - Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas. +Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas. - Parameters | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | --------- | ------------- | ---------------------------------------- | @@ -1831,7 +1868,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void -Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular area on the canvas. +Puts the **[ImageData](ts-components-canvas-imagebitmap.md)** onto a rectangular area on the canvas. - Parameters | Name | Type | Mandatory | Default Value | Description | @@ -1846,7 +1883,8 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are - Example - ``` + ```ts + // xxx.ets @Entry @Component struct PutImageData { @@ -1887,7 +1925,8 @@ Restores the saved drawing context. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -1919,7 +1958,8 @@ Saves the current drawing context. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CanvasExample { @@ -1959,7 +1999,8 @@ Creates a linear gradient. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CreateLinearGradient { @@ -2008,7 +2049,8 @@ Creates a linear gradient. - Example - ``` + ```ts + // xxx.ets @Entry @Component struct CreateRadialGradient { diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 1395a2cf8dbf0ed99d20c74ab65d211df9f346c2..6e120cd42deb2de2e7388b56aaa0b5eef5ec799a 100644 --- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -1,9 +1,7 @@ # OffscreenCanvasRenderingContext2D -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> -> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE**
The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency. @@ -44,14 +42,15 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | true | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite. | | imageSmoothingQuality | string | 'low' | Image smoothness. The value can be **'low'**, **'medium'**, or **'high'**. | -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > The value of the **<color>** type can be in 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', or '\#FFFFFF' format. ### fillStyle -``` +```ts +// xxx.ets @Entry @Component struct FillStyleExample { @@ -84,7 +83,8 @@ struct FillStyleExample { ### lineWidth -``` +```ts +// xxx.ets @Entry @Component struct LineWidthExample { @@ -117,7 +117,8 @@ struct LineWidthExample { ### strokeStyle -``` +```ts +// xxx.ets @Entry @Component struct StrokeStyleExample { @@ -152,7 +153,8 @@ struct StrokeStyleExample { ### lineCap -``` +```ts +// xxx.ets @Entry @Component struct LineCapExample { @@ -189,7 +191,8 @@ struct LineCapExample { ### lineJoin -``` +```ts +// xxx.ets @Entry @Component struct LineJoinExample { @@ -227,7 +230,8 @@ struct LineJoinExample { ### miterLimit -``` +```ts +// xxx.ets @Entry @Component struct MiterLimit { @@ -265,7 +269,8 @@ struct MiterLimit { ### font -``` +```ts +// xxx.ets @Entry @Component struct Font { @@ -298,7 +303,8 @@ struct Font { ### textAlign -``` +```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -346,7 +352,8 @@ struct CanvasExample { ### textBaseline -``` +```ts +// xxx.ets @Entry @Component struct TextBaseline { @@ -394,7 +401,8 @@ struct TextBaseline { ### globalAlpha -``` +```ts +// xxx.ets @Entry @Component struct GlobalAlpha { @@ -430,7 +438,8 @@ struct GlobalAlpha { ### lineDashOffset -``` +```ts +// xxx.ets @Entry @Component struct LineDashOffset { @@ -478,7 +487,8 @@ struct LineDashOffset { | xor | Combines the new drawing and existing drawing using the XOR operation. | -``` +```ts +// xxx.ets @Entry @Component struct GlobalCompositeOperation { @@ -519,7 +529,8 @@ struct GlobalCompositeOperation { ### shadowBlur -``` +```ts +// xxx.ets @Entry @Component struct ShadowBlur { @@ -554,7 +565,8 @@ struct ShadowBlur { ### shadowColor -``` +```ts +// xxx.ets @Entry @Component struct ShadowColor { @@ -590,7 +602,8 @@ struct ShadowColor { ### shadowOffsetX -``` +```ts +// xxx.ets @Entry @Component struct ShadowOffsetX { @@ -626,7 +639,8 @@ struct ShadowOffsetX { ### shadowOffsetY -``` +```ts +// xxx.ets @Entry @Component struct ShadowOffsetY { @@ -662,7 +676,8 @@ struct ShadowOffsetY { ### imageSmoothingEnabled -``` +```ts +// xxx.ets @Entry @Component struct ImageSmoothingEnabled { @@ -712,7 +727,8 @@ Fills a rectangle on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct FillRect { @@ -801,7 +817,8 @@ Clears the content in a rectangle on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct ClearRect { @@ -846,7 +863,8 @@ Draws filled text on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct FillText { @@ -942,7 +960,8 @@ Returns a **TextMetrics** object used to obtain the width of specified text. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct MeasureText { @@ -1024,7 +1043,8 @@ Creates a drawing path. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct BeginPath { @@ -1071,7 +1091,8 @@ Moves a drawing path to a target position on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct MoveTo { @@ -1116,7 +1137,8 @@ Connects the current point to a target position using a straight line. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct LineTo { @@ -1155,7 +1177,8 @@ Draws a closed path. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct ClosePath { @@ -1202,7 +1225,8 @@ Creates a pattern for image filling based on a specified source image and repeti - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CreatePattern { @@ -1251,7 +1275,8 @@ Draws a cubic bezier curve on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct BezierCurveTo { @@ -1298,7 +1323,8 @@ Draws a quadratic curve on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct QuadraticCurveTo { @@ -1347,7 +1373,8 @@ Draws an arc on the canvas. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Arc { @@ -1394,7 +1421,8 @@ Draws an arc based on the radius and points on the arc. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct ArcTo { @@ -1445,7 +1473,8 @@ Draws an ellipse in the specified rectangular region. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -1491,7 +1520,8 @@ Creates a rectangle. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -1528,7 +1558,8 @@ Fills the area inside a closed path. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Fill { @@ -1565,7 +1596,8 @@ Sets the current path to a clipping path. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Clip { @@ -1610,7 +1642,8 @@ Rotates a canvas clockwise around its coordinate axes. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Rotate { @@ -1653,7 +1686,8 @@ Scales a canvas based on scale factors. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Scale { @@ -1689,7 +1723,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. > > - x' = scaleX \* x + skewY \* y + translateX @@ -1708,7 +1742,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Transform { @@ -1761,7 +1796,8 @@ Resets the existing transformation matrix and creates a new transformation matri - Example - ``` + ```ts +// xxx.ets @Entry @Component struct SetTransform { @@ -1807,7 +1843,8 @@ Moves the origin of the coordinate system. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Translate { @@ -1839,18 +1876,18 @@ Moves the origin of the coordinate system. ### drawImage -drawImage(image: ImageBitmap, dx: number, dy: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void -drawImage(image: ImageBitmap, dx: number, dy: number, dWidth: number, dHeight: number): void +drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void -drawImage(image: ImageBitmap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void +drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void Draws an image. - Parameters | Name | Type | Mandatory | Default Value | Description | | ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- | - | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Image resource. For details, see ImageBitmap. | + | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see ImageBitmap. | | sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | | sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | | sWidth | number | No | 0 | Target width to crop the source image. | @@ -1863,7 +1900,8 @@ Draws an image. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct Index { @@ -1916,12 +1954,24 @@ Creates an **ImageData** object by copying an existing **ImageData** object. For | --------- | ---------------------------------------- | --------- | ------------- | ----------------------------- | | imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes | null | **ImageData** object to copy. | +### getPixelMap + +getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap + +Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas. +- Parameters + | Name | Type | Mandatory | Default Value | Description | + | -------- | -------- | -------- | -------- | -------- | + | sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area. | + | sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area. | + | sw | number | Yes | 0 | Width of the output area. | + | sh | number | Yes | 0 | Height of the output area. | ### getImageData getImageData(sx: number, sy: number, sw: number, sh: number): Object -Creates an [ImageData](ts-components-canvas-imagebitmap.md) object with pixels in the specified area on the canvas. +Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas. - Parameters | Name | Type | Mandatory | Default Value | Description | @@ -1951,7 +2001,8 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are - Example - ``` + ```ts +// xxx.ets @Entry @Component struct PutImageData { @@ -1994,7 +2045,8 @@ Restores the saved drawing context. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -2028,7 +2080,8 @@ Saves the current drawing context. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CanvasExample { @@ -2070,7 +2123,8 @@ Creates a linear gradient. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CreateLinearGradient { @@ -2122,7 +2176,8 @@ Creates a linear gradient. - Example - ``` + ```ts +// xxx.ets @Entry @Component struct CreateRadialGradient {