Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“f8bc41321323dbc15ad840e8f1615538c7bf293f”上不存在“doc/api/v1/git@gitcode.net:s920243400/PaddleDetection.git”
未验证 提交 42d3879b 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!12310 翻译完成 10240+10704+10934+11574+11573+10912 

Merge pull request !12310 from ester.zhou/C1-1208
上级 e7189b4f ecb9e734
显示空白变更内容
内联 并排
Showing with 913 addition and 791 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 42d3879b
......@@ -6,13 +6,16 @@ The **\<RichText>** component parses and displays HTML text.
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components
Not supported
## APIs
RichText(content:string)
RichText(content: string)
**Parameters**
......@@ -42,7 +45,7 @@ RichText(content:string)
| \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
| \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
| style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
| \<script>\</script> | Embeds or references a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 42d3879b
......@@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
| Name| Description|
| -------- | -------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a long press gesture is recognized.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a long press gesture is lift.|
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.|
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Invoked when a long press gesture is recognized.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Invoked when the finger used for a long press gesture is lift.|
| onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a long press gesture is recognized.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 42d3879b
......@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------ | --------- | ---------------------------------------- |
| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** |
| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** |
| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
## PanDirection enums
| Name | Description |
| ---------- | --------------------- |
| All | All directions. |
| Horizontal | Horizontal panning. |
| Vertical | Vertical panning. |
| Left | Panning to the left. |
| Right | Panning to the right. |
| Up | Panning up. |
| Down | Panning down. |
| None | Panning disabled. |
| Name| Description|
| -------- | -------- |
| All | All directions.|
| Horizontal | Horizontal panning.|
| Vertical | Vertical panning.|
| Left | Panning to the left.|
| Right | Panning to the right.|
| Up | Panning up.|
| Down | Panning down.|
| None | Panning disabled.|
## PanGestureOptions
......@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
**APIs**
| Name | Description |
| --------------------------------- | --------------------------- |
| setDirection(value: PanDirection) | Sets the direction. |
| setDistance(value: number) | Sets the distance. |
| setFingers(value: number) | Sets the number of fingers. |
| Name| Description|
| -------- | -------- |
| setDirection(value: PanDirection) | Sets the direction.|
| setDistance(value: number) | Sets the distance.|
| setFingers(value: number) | Sets the number of fingers.|
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. |
| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. |
| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
| onActionCancel(event: () =&gt; void) | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
| Name| Description|
| -------- | -------- |
| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when a pan gesture is recognized.|
| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the pan gesture status is updated.|
| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the finger used for a pan gesture is lift.|
| onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.|
## Example
......@@ -115,3 +115,13 @@ struct PanGestureExample {
}
}
```
**Diagrams**
Pannig to the left:
![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png)
Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner.
![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png)
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 42d3879b
......@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------ | --------- | ---------------------------------------- |
| fingers | number | No | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** |
| distance | number | No | Minimum recognition distance, in vp.<br>Default value: **3** |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. |
| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. |
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. |
| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized. |
| Name| Description|
| -------- | -------- |
| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 42d3879b
......@@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number })
| Parameter| Description|
| -------- | -------- |
| onActionStart(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when a rotation gesture is recognized.|
| onActionUpdate(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
| onActionEnd(event:(event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Triggered when the finger used for the rotation gesture is lift.|
| onActionCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a rotation gesture is recognized.|
| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for the rotation gesture is lift.|
| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
## Example
......@@ -49,7 +49,7 @@ struct RotationGestureExample {
.padding(20)
.border({ width: 3 })
.margin(80)
.rotate({ angle: this.angle })
.rotate({ z: 1, angle: this.angle })
// The gesture event is triggered by rotating with two fingers.
.gesture(
RotationGesture()
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 42d3879b
......@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | -------------- | --------- | ---------------------------------------- |
| fingers | number | No | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** |
| direction | SwipeDirection | No | Swipe direction.<br>Default value: **SwipeDirection.All** |
| speed | number | No | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | [swipeDirection](#swipedirection)| No| Swipe direction.<br>Default value: **SwipeDirection.All**|
| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
## SwipeDirection
| Name | Description |
| ---------- | --------------------- |
| All | All directions. |
| Horizontal | Horizontal direction. |
| Vertical | Vertical direction. |
| None | Swiping disabled. |
| Name| Description|
| -------- | -------- |
| All | All directions.|
| Horizontal | Horizontal direction.|
| Vertical | Vertical direction.|
| None | Swiping disabled.|
## Events
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. |
| Name| Description|
| -------- | -------- |
| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when a swipe gesture is recognized.|
## Example
......@@ -55,7 +55,7 @@ struct SwipeGestureExample {
.width(300)
.height(200)
.margin(100)
.rotate({ angle: this.rotateAngle })
.rotate({ z: 1, angle: this.rotateAngle })
// The gesture event is triggered by swiping vertically with one finger.
.gesture(
SwipeGesture({ direction: SwipeDirection.Vertical })
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 42d3879b
......@@ -29,13 +29,13 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
| Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ----------------------------- |
| antialias | boolean | No | Whether antialiasing is enabled.<br>Default value: **false**|
| antialias | boolean | No | Whether to enable antialiasing.<br>Default value: **false** |
## Attributes
| Name | Type | Description |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
| [lineWidth](#linewidth) | number | Line width. |
| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
......@@ -66,8 +66,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
@Entry
@Component
struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -96,8 +96,8 @@ struct FillStyleExample {
@Entry
@Component
struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -126,8 +126,8 @@ struct LineWidthExample {
@Entry
@Component
struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -158,8 +158,8 @@ struct StrokeStyleExample {
@Entry
@Component
struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -192,8 +192,8 @@ struct LineCapExample {
@Entry
@Component
struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -227,8 +227,8 @@ struct LineJoinExample {
@Entry
@Component
struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -262,8 +262,8 @@ struct MiterLimit {
@Entry
@Component
struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -292,8 +292,8 @@ struct Fonts {
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -337,8 +337,8 @@ struct CanvasExample {
@Entry
@Component
struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -382,8 +382,8 @@ struct TextBaseline {
@Entry
@Component
struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -415,8 +415,8 @@ struct GlobalAlpha {
@Entry
@Component
struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -427,7 +427,7 @@ struct LineDashOffset {
.onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0;
this.context.lineDashOffset = 10.0
this.context.stroke();
})
}
......@@ -461,8 +461,8 @@ struct LineDashOffset {
@Entry
@Component
struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -499,8 +499,8 @@ struct GlobalCompositeOperation {
@Entry
@Component
struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -531,8 +531,8 @@ struct ShadowBlur {
@Entry
@Component
struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -563,8 +563,8 @@ struct ShadowColor {
@Entry
@Component
struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -596,8 +596,8 @@ struct ShadowOffsetX {
@Entry
@Component
struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......@@ -628,9 +628,9 @@ struct ShadowOffsetY {
@Entry
@Component
struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -677,8 +677,8 @@ Fills a rectangle on the canvas.
@Entry
@Component
struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -765,8 +765,8 @@ Clears the content in a rectangle on the canvas.
@Entry
@Component
struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -797,12 +797,11 @@ Draws filled text on the canvas.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | Yes | "" | Text to draw. |
| Name | Type | Mandatory| Default Value| Description |
| -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example**
......@@ -811,8 +810,8 @@ Draws filled text on the canvas.
@Entry
@Component
struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -842,9 +841,9 @@ Draws a text stroke on the canvas.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | Yes | "" | Text to draw. |
| Name | Type | Mandatory| Default Value| Description |
| -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width of the text to be drawn. |
......@@ -856,8 +855,8 @@ Draws a text stroke on the canvas.
@Entry
@Component
struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -887,14 +886,14 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | Yes | "" | Text to be measured.|
| Name| Type | Mandatory| Default Value| Description |
| ---- | ------ | ---- | ------ | -------------------- |
| text | string | Yes | '' | Text to be measured.|
**Return value**
| Type | Description |
| ----------- | ------- |
| ----------- | ---------------- |
| TextMetrics | **TextMetrics** object.|
**TextMetrics**
......@@ -925,8 +924,8 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
@Entry
@Component
struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -968,8 +967,8 @@ Strokes a path.
@Entry
@Component
struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1008,8 +1007,8 @@ Creates a drawing path.
@Entry
@Component
struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1055,8 +1054,8 @@ Moves a drawing path to a target position on the canvas.
@Entry
@Component
struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1100,8 +1099,8 @@ Connects the current point to a target position using a straight line.
@Entry
@Component
struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1138,8 +1137,8 @@ Draws a closed path.
@Entry
@Component
struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1173,10 +1172,10 @@ Creates a pattern for image filling based on a specified source image and repeti
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | null | Source image. For details, see **ImageBitmap**. |
| repetition | string | Yes | "" | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
| Name | Type | Mandatory| Description |
| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes | Source image. For details, see **ImageBitmap**. |
| repetition | string | Yes | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**.<br>Default value: **''**|
**Return value**
......@@ -1191,9 +1190,9 @@ Creates a pattern for image filling based on a specified source image and repeti
@Entry
@Component
struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1240,8 +1239,8 @@ Draws a cubic bezier curve on the canvas.
@Entry
@Component
struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1287,8 +1286,8 @@ Draws a quadratic curve on the canvas.
@Entry
@Component
struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1297,10 +1296,10 @@ Draws a quadratic curve on the canvas.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.beginPath();
this.context.moveTo(20, 20);
this.context.quadraticCurveTo(100, 100, 200, 20);
this.context.stroke();
this.context.beginPath()
this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke()
})
}
.width('100%')
......@@ -1336,8 +1335,8 @@ Draws an arc on the canvas.
@Entry
@Component
struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1383,8 +1382,8 @@ Draws an arc based on the radius and points on the arc.
@Entry
@Component
struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1393,9 +1392,9 @@ Draws an arc based on the radius and points on the arc.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.moveTo(100, 20);
this.context.arcTo(150, 20, 150, 70, 50);
this.context.stroke();
this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke()
})
}
.width('100%')
......@@ -1424,7 +1423,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise. |
**Example**
......@@ -1433,8 +1432,8 @@ Draws an ellipse in the specified rectangular region on the canvas.
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1479,8 +1478,8 @@ Creates a rectangle on the canvas.
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1522,8 +1521,8 @@ Fills the area inside a closed path on the canvas.
@Entry
@Component
struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1574,17 +1573,17 @@ struct Fill {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();
let region = new Path2D()
region.moveTo(30, 90)
region.lineTo(110, 20)
region.lineTo(240, 130)
region.lineTo(60, 130)
region.lineTo(190, 20)
region.lineTo(270, 90)
region.closePath()
// Fill path
this.context.fillStyle = 'green';
this.context.fill(region, "evenodd");
this.context.fillStyle = 'green'
this.context.fill(region, "evenodd")
})
}
.width('100%')
......@@ -1615,8 +1614,8 @@ Sets the current path to a clipping area.
@Entry
@Component
struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1669,9 +1668,9 @@ struct Clip {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
let region = new Path2D();
region.rect(80,10,20,130);
region.rect(40,50,100,50);
let region = new Path2D()
region.rect(80,10,20,130)
region.rect(40,50,100,50)
this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height)
......@@ -1739,8 +1738,8 @@ Rotates a canvas clockwise around its coordinate axes.
@Entry
@Component
struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1782,8 +1781,8 @@ Scales the canvas based on the given scale factors.
@Entry
@Component
struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1839,8 +1838,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para
@Entry
@Component
struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1892,8 +1891,8 @@ Resets the existing transformation matrix and creates a new transformation matri
@Entry
@Component
struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1943,8 +1942,8 @@ Moves the origin of the coordinate system.
@Entry
@Component
struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -1999,9 +1998,9 @@ Draws an image on the canvas.
@Entry
@Component
struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -2010,7 +2009,7 @@ Draws an image on the canvas.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
})
}
.width('100%')
......@@ -2103,8 +2102,8 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
@Entry
@Component
struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() {
......@@ -2114,9 +2113,9 @@ struct GetImageData {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130);
var imagedata = this.context.getImageData(50,50,130,130);
this.context.putImageData(imagedata,150,150);
this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150)
})
}
.width('100%')
......@@ -2155,8 +2154,8 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
@Entry
@Component
struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -2383,7 +2382,7 @@ struct ToDataURL {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var dataURL = this.context.toDataURL();
var dataURL = this.context.toDataURL()
})
}
.width('100%')
......@@ -2406,8 +2405,8 @@ Restores the saved drawing context.
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
......@@ -2417,11 +2416,11 @@ Restores the saved drawing context.
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
this.context.save() // save the default state
this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100)
})
}
.width('100%')
......@@ -2445,8 +2444,8 @@ Saves all states of the canvas in the stack. This API is usually called when the
@Entry
@Component
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -2455,11 +2454,11 @@ Saves all states of the canvas in the stack. This API is usually called when the
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.save(); // save the default state
this.context.fillStyle = "green";
this.context.fillRect(20, 20, 100, 100);
this.context.restore(); // restore to the default state
this.context.fillRect(150, 75, 100, 100);
this.context.save() // save the default state
this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100)
this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100)
})
}
.width('100%')
......@@ -2492,8 +2491,8 @@ Creates a linear gradient.
@Entry
@Component
struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -2543,8 +2542,8 @@ Creates a linear gradient.
@Entry
@Component
struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 42d3879b
# Combined Gestures
Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures.
> **NOTE**
>
> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
GestureGroup(mode: GestureMode, ...gesture: GestureType[])
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| mode | GestureMode | Yes | - | Recognition mode of combined gestures. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\| [PanGesture](ts-basic-gestures-pangesture.md)<br/>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.|
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
## GestureMode
| Name | Description |
| Name| Description|
| -------- | -------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onCancel(event: () =&gt; void) | Callback for the **GestureMode.Sequence** cancellation event. |
| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct GestureGroupExample {
@State count: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
@State borderStyles: BorderStyle = BorderStyle.Solid
@State count: number = 0;
@State offsetX: number = 0;
@State offsetY: number = 0;
@State positionX: number = 0;
@State positionY: number = 0;
@State borderStyles: BorderStyle = BorderStyle.Solid;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
}
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150)
.width(200)
.padding(20)
.margin(20)
.border({ width: 3, style: this.borderStyles })
.gesture(
// The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered.
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {this.count++}
console.log('LongPress onAction')
if (event.repeat) {
this.count++;
}
console.info('LongPress onAction');
})
.onActionEnd(() => {
console.log('LongPress end')
console.info('LongPress end');
}),
PanGesture({})
PanGesture()
.onActionStart(() => {
this.borderStyles = BorderStyle.Dashed
console.log('pan start')
this.borderStyles = BorderStyle.Dashed;
console.info('pan start');
})
.onActionUpdate((event: GestureEvent) => {
this.offsetX = event.offsetX
this.offsetY = event.offsetY
console.log('pan update')
this.offsetX = this.positionX + event.offsetX;
this.offsetY = this.positionY + event.offsetY;
console.info('pan update');
})
.onActionEnd(() => {
this.positionX = this.offsetX;
this.positionY = this.offsetY;
this.borderStyles = BorderStyle.Solid;
console.info('pan end');
})
)
.onCancel(() => {
console.log('sequence gesture canceled')
console.info('sequence gesture canceled');
})
)
}
}
```
![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif)
Diagram:
In sequence recognition mode the long press gesture event is triggered first.
![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png)
After the long press gesture is recognized, the drag gesture event is triggered.
![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png)
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 42d3879b
......@@ -6,12 +6,6 @@ The **\<Canvas>** component can be used to customize drawings.
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components
Not supported
......@@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Parameter | Description |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. |
| onReady(event: () => void) | - | Triggered when the canvas is ready. |
**Example**
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 42d3879b
......@@ -17,19 +17,19 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
**Example**
```ts
// xxx.ets
@Entry
@Component
struct Page45 {
// xxx.ets
@Entry
@Component
struct Page45 {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
......@@ -39,8 +39,8 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
.width('100%')
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
.onReady(() => {
var grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, 'red')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1.0, 'green')
......@@ -50,7 +50,8 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
}
.width('100%')
.height('100%')
}}
}
}
```
![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
......
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 42d3879b
......@@ -27,19 +27,19 @@ loadAnimation(
path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
**Parameters**
| Name | Type | Mandatory | Description |
| -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
| Name | Type | Mandatory | Description |
| -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
| autoplay | boolean | No | Whether to automatically play the animation.<br/>Default value: **true** |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation.<br/>Default value: null |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
......@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
**Example**
```ts
......@@ -131,9 +131,9 @@ Plays a specified animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
**Example**
......@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example**
......@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example**
......@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example**
......@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
**Example**
......@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays.
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
**Example**
......@@ -275,9 +275,9 @@ Plays an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
......@@ -294,9 +294,9 @@ Destroys an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
......@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
......@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
......@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.|
**Example**
......@@ -370,9 +370,9 @@ Sets the playback speed of an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
**Example**
......@@ -389,9 +389,9 @@ Sets the playback direction of an animation.
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
| Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
**Example**
......@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. |
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress.<br/>Default value: **false** |
| name | string | No | Name of the target animation. By default, the value is null. |
**Example**
......@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress.
**Parameters**
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. |
| Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress.<br>Default value: **false** |
| name | string | No | Name of the target animation. By default, the value is null. |
**Example**
......@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment.
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
**Example**
......@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
| Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
**Example**
......@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
**Parameters**
| Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
| Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
**Example**
......@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**|
| Name | Type | Mandatory | Description |
| -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br/>Default value: **false** |
**Example**
......@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
**Example**
......@@ -575,10 +575,10 @@ Removes an event listener.
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
| Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
**Example**
......@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event.
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.|
| Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.|
**Example**
......
en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md
浏览文件 @ 42d3879b
# GridContainer
The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
> ![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 **&lt;GridContainer&gt;** component lays out components vertically. It is used only in the grid layout.
## Required Permissions
None
## Child Components
This component can contain child components.
Supported
## APIs
GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
- Parameter
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
| sizeType | SizeType | No | SizeType.Auto | Device size type. |
| gutter | Length | No | - | Gutter of the grid layout. |
| margin | Length | No | - | Margin of the grid layout. |
**Parameters**
- SizeType enums
| Name | Description |
| -------- | -------- |
| XS | Device of the minimum size. |
| SM | Small-sized device. |
| MD | Medium-sized device. |
| LG | Large-sized device. |
| Auto | Auto. The size type is selected based on the device type. |
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
| sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
| gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. |
| margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. |
## SizeType
| Name| Description|
| -------- | -------- |
| XS | Device of the minimum size.|
| SM | Small-sized device.|
| MD | Medium-sized device.|
| LG | Large-sized device.|
| Auto | Auto. The size type is selected based on the device type.|
## Attributes
Universal attributes and [attributes](ts-container-column.md#attributes) of the **&lt;Column&gt;** component are supported.
The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
## Events
Universal events are supported.
The universal events are supported.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct GridContainerExample {
......
en/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 42d3879b
......@@ -4,7 +4,9 @@ The **\<Scroll>** component scrolls the content when the layout size of a compon
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The prerequisite for the component to rebound is that the component is scrolled.
> - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
> - This component can scroll only when the size on the main axis is less than the content size.
> - This component can produce a bounce effect only when there is more than one screen of content.
## Child Components
......@@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| -------------- | ---------------------------------------- | --------- |
| scrollable | ScrollDirection | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
| scrollBarColor | string \| number \| Color | Color of the scrollbar.|
| scrollable | [ScrollDirection](#scrolldirection) | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Auto**|
| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.|
| scrollBarWidth | string \| number | Width of the scrollbar.|
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
## ScrollDirection
| Name | Description |
......@@ -34,16 +36,21 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Horizontal | Only horizontal scrolling is supported. |
| Vertical | Only vertical scrolling is supported. |
| None | Scrolling is disabled. |
| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.|
| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9.|
## Events
| Name | Description |
| ----------------------------------------------------------- | ------------------------------------------------------------ |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(event: (side: Edge) => void) | Invoked when scrolling reaches the edge. |
| onScrollEnd(event: () => void) | Invoked when scrolling stops. |
> **NOTE**
>
> If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
## Scroller
Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. Currently, this controller can be bound to the **\<List>**, **\<Scroll>** and **\<ScrollBar>** components. One controller can control only one container component.
......@@ -67,18 +74,24 @@ Scrolls to the specified position.
| Name | Type | Mandatory| Description |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number \| string | Yes | Horizontal scrolling offset. |
| yOffset | number \| string | Yes | Vertical scrolling offset. |
| animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
| xOffset | Length | Yes | Horizontal scrolling offset. |
| yOffset | Length | Yes | Vertical scrolling offset. |
| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
### scrollEdge
scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
scrollEdge(value: Edge): void
Scrolls to the edge of the container.
**Parameters**
| Name | Type| Mandatory | Description |
| ----- | ---- | ---- | --------- |
| value | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.|
### scrollPage
......@@ -91,7 +104,7 @@ Scrolls to the next or previous page.
| Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ |
| next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
| direction | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical. |
| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9. |
### currentOffset
......@@ -101,6 +114,13 @@ currentOffset()
Obtains the scrolling offset.
**Return value**
| Type | Description |
| ---------------------------------------- | ---------------------------------------- |
| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
### scrollToIndex
scrollToIndex(value: number): void
......@@ -120,15 +140,36 @@ Scrolls to the item with the specified index.
| value | number | Yes | Index of the item to be scrolled to in the list.|
### scrollBy<sup>9+</sup>
scrollBy(dx: Length, dy: Length): void
Scrolls by the specified amount.
> **NOTE**
>
> Only the **\<Scroll>** component is supported.
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ----------------- |
| dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
| dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct ScrollExample {
scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
scroller: Scroller = new Scroller();
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
build() {
Stack({ alignContent: Alignment.TopStart }) {
......@@ -146,38 +187,99 @@ struct ScrollExample {
}, item => item)
}.width('100%')
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarColor(Color.Gray)
.scrollBarWidth(30)
.scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction.
.scrollBar(BarState.On) // The scrollbar is always displayed.
.scrollBarColor(Color.Gray) // Color of the scrollbar.
.scrollBarWidth(30) // Width of the scrollbar.
.edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset)
console.info(xOffset + ' ' + yOffset);
})
.onScrollEdge((side: Edge) => {
console.info('To the edge')
console.info('To the edge');
})
.onScrollEnd(() => {
console.info('Scroll Stop')
console.info('Scroll Stop');
})
Button('scroll 150')
.onClick(() => { // Click to scroll down to 150.0 vp.
this.scroller.scrollBy(0,150);
})
.margin({ top: 10, left: 20 })
Button('scroll 100')
.onClick(() => { // Click to scroll down by 100.0 vp.
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
})
.margin({ top: 10, left: 20 })
.margin({ top: 60, left: 20 })
Button('back top')
.onClick(() => { // Click to go back to the top.
this.scroller.scrollEdge(Edge.Top)
this.scroller.scrollEdge(Edge.Top);
})
.margin({ top: 60, left: 20 })
.margin({ top: 110, left: 20 })
Button('next page')
.onClick(() => { // Click to go to the next page.
this.scroller.scrollPage({ next: true })
this.scroller.scrollPage({ next: true });
})
.margin({ top: 110, left: 20 })
.margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
}
}
```
![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
### Example 2
```ts
@Entry
@Component
struct NestedScroll {
@State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list.
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
private scroller: Scroller = new Scroller();
build() {
Flex() {
Scroll(this.scroller) {
Column() {
Text("Scroll Area")
.width("100%").height("40%").backgroundColor(0X330000FF)
.fontSize(16).textAlign(TextAlign.Center)
List({ space: 20 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text("ListItem" + item)
.width("100%").height("100%").borderRadius(15)
.fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
}.width("100%").height(100)
}, item => item)
}
.width("100%").height("50%").edgeEffect(EdgeEffect.None)
.onReachStart(() => {
this.listPosition = 0;
})
.onReachEnd(() => {
this.listPosition = 2;
})
.onScrollBegin((dx: number, dy: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
this.scroller.scrollBy(0, -dy);
return { dxRemain: dx, dyRemain: 0 };
}
this.listPosition = 1;
return { dxRemain: dx, dyRemain: dy };
})
Text("Scroll Area")
.width("100%").height("40%").backgroundColor(0X330000FF)
.fontSize(16).textAlign(TextAlign.Center)
}
}
.width("100%").height("100%")
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}
}
```
![NestedScroll](figures/NestedScroll.gif)
en/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 42d3879b
......@@ -137,4 +137,4 @@ struct GestureSettingsExample {
}
```
![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif)
![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif)
en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 42d3879b
# Time Picker Dialog Box
> ![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.
You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default.
## Required Permissions
None
> **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.
## TimePickerDialog.show
......@@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions)
Defines and displays a time picker dialog box.
- options parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| selected | Date | No| Current system time| Time of the selected item.|
| useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| selected | Date | No| Selected time.<br>Default value: current system time|
| useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
## Example
### Time Picker Sample Code (24-Hour Clock)
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true
@State isUseMilitaryTime: boolean = true;
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
......@@ -40,13 +38,13 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
console.info("TimePickerDialog:onCancel()");
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
})
})
......@@ -54,12 +52,16 @@ struct TimePickerDialogExample01 {
}
}
```
![en-us_image_0000001118642010](figures/en-us_image_0000001118642010.gif)
### Time Picker Sample Code (12-Hour Clock)
```
```ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false
@State isUseMilitaryTime: boolean = false;
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
......@@ -68,13 +70,13 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
console.info("TimePickerDialog:onCancel()");
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
}
})
})
......@@ -82,3 +84,5 @@ struct TimePickerDialogExample02 {
}
}
```
![en-us_image_0000001118642020](figures/en-us_image_0000001118642020.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 42d3879b
......@@ -32,7 +32,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
| [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**|
| [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**|
| [font](#font) | string | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**|
| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>> **NOTE**<br>> In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**|
| [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**|
| [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'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.<br>- **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.<br>- Default value: **'alphabetic'**|
| [globalAlpha](#globalalpha) | number | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
| [lineDashOffset](#linedashoffset) | number | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**|
......@@ -78,7 +78,7 @@ struct FillStyleExample {
}
```
![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png)
![en-us_image_0000001193872516](figures/en-us_image_0000001193872516.png)
### lineWidth
......@@ -111,7 +111,7 @@ struct LineWidthExample {
}
```
![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png)
![en-us_image_0000001238832403](figures/en-us_image_0000001238832403.png)
### strokeStyle
......@@ -145,7 +145,7 @@ struct StrokeStyleExample {
}
```
![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png)
![en-us_image_0000001238712437](figures/en-us_image_0000001238712437.png)
### lineCap
......@@ -182,7 +182,7 @@ struct LineCapExample {
}
```
![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png)
![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG)
### lineJoin
......@@ -220,7 +220,7 @@ struct LineJoinExample {
}
```
![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png)
![en-us_image_0000001194352450](figures/en-us_image_0000001194352450.png)
### miterLimit
......@@ -258,7 +258,7 @@ struct MiterLimit {
}
```
![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png)
![en-us_image_0000001238952397](figures/en-us_image_0000001238952397.png)
### font
......@@ -291,7 +291,7 @@ struct Fonts {
}
```
![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png)
![en-us_image_0000001194032476](figures/en-us_image_0000001194032476.png)
### textAlign
......@@ -339,7 +339,7 @@ struct CanvasExample {
}
```
![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png)
![en-us_image_0000001239032423](figures/en-us_image_0000001239032423.png)
### textBaseline
......@@ -387,7 +387,7 @@ struct TextBaseline {
}
```
![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png)
![en-us_image_0000001193872518](figures/en-us_image_0000001193872518.png)
### globalAlpha
......@@ -423,7 +423,7 @@ struct GlobalAlpha {
}
```
![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png)
![en-us_image_0000001238832405](figures/en-us_image_0000001238832405.png)
### lineDashOffset
......@@ -458,7 +458,7 @@ struct LineDashOffset {
}
```
![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png)
![en-us_image_0000001238712439](figures/en-us_image_0000001238712439.png)
### globalCompositeOperation
......@@ -513,7 +513,7 @@ struct GlobalCompositeOperation {
}
```
![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png)
![en-us_image_0000001194192456](figures/en-us_image_0000001194192456.png)
### shadowBlur
......@@ -548,7 +548,7 @@ struct ShadowBlur {
}
```
![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png)
![en-us_image_0000001194352452](figures/en-us_image_0000001194352452.png)
### shadowColor
......@@ -583,7 +583,7 @@ struct ShadowColor {
}
```
![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png)
![en-us_image_0000001238952399](figures/en-us_image_0000001238952399.png)
### shadowOffsetX
......@@ -619,7 +619,7 @@ struct ShadowOffsetX {
}
```
![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png)
![en-us_image_0000001194032478](figures/en-us_image_0000001194032478.png)
### shadowOffsetY
......@@ -655,7 +655,7 @@ struct ShadowOffsetY {
}
```
![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png)
![en-us_image_0000001239032425](figures/en-us_image_0000001239032425.png)
### imageSmoothingEnabled
......@@ -689,7 +689,7 @@ struct ImageSmoothingEnabled {
}
```
![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png)
![en-us_image_0000001193872520](figures/en-us_image_0000001193872520.png)
## Methods
......@@ -739,7 +739,7 @@ Fills a rectangle on the canvas.
}
```
![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png)
![en-us_image_0000001194192436](figures/en-us_image_0000001194192436.png)
### strokeRect
......@@ -748,7 +748,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
Draws an outlined rectangle on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------ |
......@@ -757,7 +757,7 @@ Draws an outlined rectangle on the canvas.
| width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas.
}
```
![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png)
![en-us_image_0000001194352436](figures/en-us_image_0000001194352436.png)
### clearRect
......@@ -795,7 +795,7 @@ clearRect(x: number, y: number, w: number, h: number): void
Clears the content in a rectangle on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ------------- |
......@@ -804,7 +804,7 @@ Clears the content in a rectangle on the canvas.
| width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas.
}
```
![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png)
![en-us_image_0000001238952377](figures/en-us_image_0000001238952377.png)
### fillText
......@@ -853,7 +853,7 @@ Draws filled text on the canvas.
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -883,7 +883,7 @@ Draws filled text on the canvas.
}
```
![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png)
![en-us_image_0000001194032458](figures/en-us_image_0000001194032458.png)
### strokeText
......@@ -901,7 +901,7 @@ Draws a text stroke on the canvas.
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width of the text to be drawn. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -931,7 +931,7 @@ Draws a text stroke on the canvas.
}
```
![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png)
![en-us_image_0000001238952401](figures/en-us_image_0000001238952401.png)
### measureText
......@@ -940,13 +940,13 @@ measureText(text: string): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | Yes | "" | Text to be measured.|
**Return value**
**Return value**
| Type | Description |
| ----------- | ------- |
......@@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
| hangingBaseline | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.|
| ideographicBaseline | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
}
```
![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png)
![en-us_image_0000001194032480](figures/en-us_image_0000001194032480.png)
### stroke
......@@ -1010,13 +1010,13 @@ stroke(path?: Path2D): void
Strokes a path.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ---------------------------------------- | ---- | ---- | ------------ |
| path | [Path2D](ts-components-canvas-path2d.md) | No | null | A **Path2D** path to draw.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1050,7 +1050,7 @@ Strokes a path.
}
```
![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png)
![en-us_image_0000001238832389](figures/en-us_image_0000001238832389.png)
### beginPath
......@@ -1059,7 +1059,7 @@ beginPath(): void
Creates a drawing path.
**Example**
**Example**
```ts
// xxx.ets
......@@ -1093,7 +1093,7 @@ Creates a drawing path.
}
```
![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png)
![en-us_image_0000001193872522](figures/en-us_image_0000001193872522.png)
### moveTo
......@@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void
Moves a drawing path to a target position on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- |
| x | number | Yes | 0 | X-coordinate of the target position.|
| y | number | Yes | 0 | Y-coordinate of the target position.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas.
}
```
![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png)
![en-us_image_0000001238832409](figures/en-us_image_0000001238832409.png)
### lineTo
......@@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void
Connects the current point to a target position using a straight line.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------- |
| x | number | Yes | 0 | X-coordinate of the target position.|
| y | number | Yes | 0 | Y-coordinate of the target position.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line.
}
```
![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png)
![en-us_image_0000001238712443](figures/en-us_image_0000001238712443.png)
### closePath
......@@ -1198,7 +1198,7 @@ closePath(): void
Draws a closed path.
**Example**
**Example**
```ts
// xxx.ets
......@@ -1232,7 +1232,7 @@ Draws a closed path.
}
```
![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png)
![en-us_image_0000001194192460](figures/en-us_image_0000001194192460.png)
### createPattern
......@@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti
| ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti
}
```
![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png)
![en-us_image_0000001194352456](figures/en-us_image_0000001194352456.png)
### bezierCurveTo
......@@ -1295,7 +1295,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------------- |
......@@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas.
| 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
......@@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas.
}
```
![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png)
![en-us_image_0000001238952403](figures/en-us_image_0000001238952403.png)
### quadraticCurveTo
......@@ -1347,7 +1347,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
Draws a quadratic curve on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- |
......@@ -1356,7 +1356,7 @@ Draws a quadratic curve on the canvas.
| 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
......@@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas.
}
```
![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png)
![en-us_image_0000001194032482](figures/en-us_image_0000001194032482.png)
### arc
......@@ -1397,7 +1397,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---------------- | ------- | ---- | ----- | ---------- |
......@@ -1408,7 +1408,7 @@ Draws an arc on the canvas.
| endAngle | number | Yes | 0 | End radian of the arc. |
| counterclockwise | boolean | No | false | Whether to draw the arc counterclockwise.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1439,7 +1439,7 @@ Draws an arc on the canvas.
}
```
![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png)
![en-us_image_0000001239032429](figures/en-us_image_0000001239032429.png)
### arcTo
......@@ -1448,7 +1448,7 @@ 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**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | --------------- |
......@@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points 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
......@@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc.
}
```
![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png)
![en-us_image_0000001193872524](figures/en-us_image_0000001193872524.png)
### ellipse
......@@ -1498,7 +1498,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---------------- | ------- | ---- | ----- | ----------------- |
......@@ -1509,9 +1509,9 @@ Draws an ellipse in the specified rectangular region on the canvas.
| rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
| counterclockwise | boolean | No | false | Whether to draw the ellipse in the counterclockwise direction. |
| counterclockwise | boolean | No | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
}
```
![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png)
![en-us_image_0000001194192440](figures/en-us_image_0000001194192440.png)
### rect
......@@ -1550,7 +1550,7 @@ rect(x: number, y: number, w: number, h: number): void
Creates a rectangle on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ------------- |
......@@ -1559,7 +1559,7 @@ Creates a rectangle on the canvas.
| w | number | Yes | 0 | Width of the rectangle. |
| h | number | Yes | 0 | Height of the rectangle. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas.
}
```
![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png)
![en-us_image_0000001238712445](figures/en-us_image_0000001238712445.png)
### fill
......@@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas.
}
```
![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png)
![en-us_image_0000001194192462](figures/en-us_image_0000001194192462.png)
fill(path: Path2D, fillRule?: CanvasFillRule): void
......@@ -1702,7 +1702,7 @@ Sets the current path to a clipping path.
| -------- | -------------- | ---- | --------- | ---------------------------------------- |
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1735,7 +1735,7 @@ Sets the current path to a clipping path.
}
```
![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png)
![en-us_image_0000001194032462](figures/en-us_image_0000001194032462.png)
clip(path:Path2D, fillRule?: CanvasFillRule): void
......@@ -1749,7 +1749,7 @@ Sets a closed path to a clipping path.
| path | Path2D | Yes | | A **Path2D** path to clip.|
| fillRule | CanvasFillRule | No | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1827,13 +1827,13 @@ rotate(angle: number): void
Rotates a canvas clockwise around its coordinate axes.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | ---- | ---- | ---------------------------------------- |
| angle | number | Yes | 0 | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes.
}
```
![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png)
![en-us_image_0000001238952405](figures/en-us_image_0000001238952405.png)
### scale
......@@ -1872,14 +1872,14 @@ scale(x: number, y: number): void
Scales the canvas based on scale factors.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- |
| x | number | Yes | 0 | Horizontal scale factor.|
| y | number | Yes | 0 | Vertical scale factor.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors.
}
```
![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png)
![en-us_image_0000001193872498](figures/en-us_image_0000001193872498.png)
### transform
......@@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
| e | number | Yes | 0 | X-axis translation.|
| f | number | Yes | 0 | Y-axis translation.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
}
```
![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png)
![en-us_image_0000001239032431](figures/en-us_image_0000001239032431.png)
### setTransform
......@@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri
| e | number | Yes | 0 | X-axis translation.|
| f | number | Yes | 0 | Y-axis translation.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -2031,22 +2031,20 @@ Resets the existing transformation matrix and creates a new transformation matri
![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png)
### translate
### translate
translate(x: number, y: number): void
Moves the origin of the coordinate system.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- |
| x | number | Yes | 0 | X-axis translation.|
| y | number | Yes | 0 | Y-axis translation.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -2090,7 +2088,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
Draws an image on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | ---------------------------------------- | ---- | ---- | ----------------------------- |
......@@ -2104,8 +2102,7 @@ Draws an image on the canvas.
| dw | number | No | 0 | Width of the drawing area. |
| dh | number | No | 0 | Height of the drawing area. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -2134,7 +2131,7 @@ Draws an image on the canvas.
}
```
![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png)
![en-us_image_0000001238712447](figures/en-us_image_0000001238712447.png)
### createImageData
......@@ -2143,7 +2140,7 @@ createImageData(sw: number, sh: number): ImageData
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ------------- |
......@@ -2155,7 +2152,7 @@ createImageData(imageData: ImageData): ImageData
Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| --------- | ---------------------------------------- | ---- | ---- | ---------------- |
......@@ -2173,7 +2170,7 @@ 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**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- |
......@@ -2195,7 +2192,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------- |
......@@ -2210,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
| ---------------------------------------- | ------------- |
| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
**Example**
```ts
......@@ -2254,7 +2250,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----------- | ------ | ---- | ------------ | ----------------------------- |
......@@ -2266,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
| dirtyWidth | number | No | Width of the **ImageData** object| Width of the rectangular area to crop the source image. |
| dirtyHeight | number | No | Height of the **ImageData** object| Height of the rectangular area to crop the source image. |
**Example**
**Example**
```ts
// xxx.ets
......@@ -2301,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
}
```
![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png)
![en-us_image_0000001194192464](figures/en-us_image_0000001194192464.png)
### setLineDash
......@@ -2457,7 +2453,7 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
Sets the quality of image smoothing. This API is a void API.
**Parameters**
**Parameters**
| Name | Type | Description |
| ------- | --------------------- | ---------------------------------------- |
......@@ -2476,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
| ---------------------------------------- | --------------- |
| [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -2520,7 +2515,7 @@ restore(): void
Restores the saved drawing context.
**Example**
**Example**
```ts
// xxx.ets
......@@ -2561,7 +2556,7 @@ save(): void
Saves the current drawing context.
**Example**
**Example**
```ts
// xxx.ets
......@@ -2602,7 +2597,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
Creates a linear gradient.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | -------- |
......@@ -2611,7 +2606,7 @@ Creates a linear gradient.
| x1 | number | Yes | 0 | X-coordinate of the end point.|
| y1 | number | Yes | 0 | Y-coordinate of the end point.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -2645,7 +2640,7 @@ Creates a linear gradient.
}
```
![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png)
![en-us_image_0000001194352460](figures/en-us_image_0000001194352460.png)
### createRadialGradient
......@@ -2654,7 +2649,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
Creates a linear gradient.
**Parameters**
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------------- |
......@@ -2665,7 +2660,7 @@ Creates a linear gradient.
| y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. |
| r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.|
**Example**
**Example**
```ts
// xxx.ets
......@@ -2699,7 +2694,7 @@ Creates a linear gradient.
}
```
![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png)
![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png)
## CanvasPattern
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 42d3879b
......@@ -7,16 +7,11 @@
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Attributes
| Name | Type | Default Value | Description |
| ---- | ------ | ---- | ------------------ |
| id | string | '' | Unique ID you assigned to the component.|
| Name | Type | Description |
| -----| -------- | ----------------------------- |
| id | string | Unique ID you assigned to the component.<br>Default value: **''**|
## APIs
......@@ -26,101 +21,109 @@ None
getInspectorByKey(id: string): string
Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API.
Obtains all attributes of the component with the specified ID, excluding the information about child components.
This is a system API.
**Parameters**
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- |
| id | string | Yes | - | ID of the component whose attributes are to be obtained.|
| Name | Type | Mandatory | Description |
| ---- | -------- | ---- | -------------|
| id | string | Yes | ID of the component whose attributes are to be obtained.|
- Return value
| Type | Description |
| ------ | --------------- |
| string | JSON string of the component attribute list.|
**Return value**
| Type | Description |
| -------| -------------- |
| string | JSON string of the component attribute list.|
### getInspectorTree
getInspectorTree(): string
Obtains the component tree and component attributes. This is a system API.
Obtains the component tree and component attributes.
This is a system API.
- Return value
**Return value**
| Type | Description |
| ------ | ------------------- |
| string | JSON string of the component tree and component attribute list.|
| Type | Description |
| ------ | --------------------------- |
| string | JSON string of the component tree and component attribute list.|
### sendEventByKey
sendEventByKey(id: string, action: number, params: string): boolean
Sends an event to the component with the specified ID. This is a system API.
Sends an event to the component with the specified ID.
This is a system API.
**Parameters**
| Name | Type | Mandatory | Description |
| ------ | -------| ---- | -------------------------- |
| id | string | Yes | ID of the component to which the event is to be sent. |
| action | number | Yes | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long-click event.|
| params | string | Yes | Event parameters. If there is no parameter, pass an empty string **""**. |
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| id | string | Yes | - | ID of the component to which the event is to be sent. |
| action | number | Yes | - | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long click event.|
| params | string | Yes | - | Event parameters. If there is no parameter, pass an empty string **""**. |
**Return value**
- Return value
| Type | Description |
| ------- | ------------------------------ |
| boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
| Type | Description |
| -------- | --------------------------|
| boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
### sendTouchEvent
sendTouchEvent(event: TouchObject): boolean
Sends a touch event. This is a system API.
Sends a touch event.
This is a system API.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | ----------- | ---- | ---- | ---------------------------------------- |
| event | TouchObject | Yes | - | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
| Name | Type | Mandatory | Description |
| ----- | ----------- | ---- | ------------------------------------------------------------ |
| event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
- Return value
**Return value**
| Type | Description |
| ------- | -------------------------- |
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
| Type | Description |
| ------- | ---------------------------|
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
### sendKeyEvent
sendKeyEvent(event: KeyEvent): boolean
Sends a key event. This is a system API.
Sends a key event.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | -------- | ---- | ---- | ---------------------------------------- |
| event | KeyEvent | Yes | - | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
| Name | Type | Mandatory | Description |
| ----- | -------- | ---- | ------------------------------------------------------------ |
| event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
- Return value
**Return value**
| Type | Description |
| ------- | --------------------------- |
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
| Type | Description |
| ------- | ------------------------------|
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
### sendMouseEvent
sendMouseEvent(event: MouseEvent): boolean
Sends a mouse event. This is a system API.
Sends a mouse event.
- Parameters
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ----- | ---------- | ---- | ---- | ---------------------------------------- |
| event | MouseEvent | Yes | - | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
| Name | Type | Mandatory | Description |
| ----- | ---------- | ---- | --------------------------------------- |
| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
- Return value
**Return value**
| Type | Description |
| ------- | --------------------------- |
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
| Type | Description |
| ------- | ---------------------------------- |
| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
## Example
......@@ -133,6 +136,7 @@ class Utils {
static rect_bottom;
static rect_value;
// Obtain the coordinates of the rectangular area occupied by the component.
static getComponentRect(key) {
let strJson = getInspectorByKey(key);
let obj = JSON.parse(strJson);
......@@ -172,32 +176,32 @@ struct IdExample {
console.info(getInspectorTree())
this.text = "Button 'click to start' is clicked"
setTimeout(() => {
sendEventByKey("longclick", 11, "")
sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick".
}, 2000)
}).id('click')
Button() {
Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB')
.gesture(
LongPressGesture().onActionEnd(() => {
console.info('long clicked')
this.text = "Button 'longclick' is longclicked"
this.text = "Button 'longClick' is longclicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onTouch')
let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch".
let touchPoint: TouchObject = {
id: 1,
x: rect.left + (rect.right - rect.left) / 2,
y: rect.top + (rect.bottom - rect.top) / 2,
x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
type: TouchType.Down,
screenX: rect.left + (rect.right - rect.left) / 2,
screenY: rect.left + (rect.right - rect.left) / 2,
screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center.
}
sendTouchEvent(touchPoint)
sendTouchEvent(touchPoint) // Send a touch event.
touchPoint.type = TouchType.Up
sendTouchEvent(touchPoint)
sendTouchEvent(touchPoint) // Send a touch event.
}, 2000)
})).id('longclick')
})).id('longClick')
Button() {
Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
......@@ -206,14 +210,14 @@ struct IdExample {
console.info('onTouch is clicked')
this.text = "Button 'onTouch' is clicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onMouse')
let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse".
let mouseEvent: MouseEvent = {
button: MouseButton.Left,
action: MouseAction.Press,
x: rect.left + (rect.right - rect.left) / 2,
y: rect.top + (rect.bottom - rect.top) / 2,
screenX: rect.left + (rect.right - rect.left) / 2,
screenY: rect.top + (rect.bottom - rect.top) / 2,
x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
timestamp: 1,
target: {
area: {
......@@ -231,7 +235,7 @@ struct IdExample {
},
source: SourceType.Mouse
}
sendMouseEvent(mouseEvent)
sendMouseEvent(mouseEvent) // Send a mouse event.
}, 2000)
}).id('onTouch')
......@@ -251,7 +255,7 @@ struct IdExample {
metaKey: 0,
timestamp: 0
}
sendKeyEvent(keyEvent)
sendKeyEvent(keyEvent) // Send a key event.
}, 2000)
}).id('onMouse')
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 42d3879b
......@@ -12,8 +12,8 @@
| ---------- | ---------------------------------------- | ---------------------------------------- |
| flexBasis | string \| number | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0** |
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>Default value: **1** |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | he default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto** |
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**. |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
## Example
......@@ -23,7 +23,6 @@
@Entry
@Component
struct FlexExample {
build() {
Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
......@@ -109,4 +108,4 @@ struct FlexExample {
}
```
![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
![en-us_image_0000001219744197](figures/en-us_image_0000001219744197.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 42d3879b
......@@ -12,7 +12,7 @@ You can set the opacity of a component.
| Name | Type | Description |
| ------- | ---------------------------------------- | ---------------------------------------- |
| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.<br/>**NOTE**<br/>A child component can inherit this attribute of its parent component.<br>Default value: **1** |
| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.<br>**NOTE**<br>A child component can inherit this attribute of its parent component. Default value: **1**|
## Example
......@@ -30,6 +30,10 @@ struct OpacityExample {
Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
}
.width('100%')
.padding({ top: 5 })
......@@ -37,4 +41,4 @@ struct OpacityExample {
}
```
![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif)
![opacity.png](figures/opacity.png)
en/application-dev/ui/ui-js-building-ui-layout-text.md
浏览文件 @ 42d3879b
# Adding Title and Paragraph Text
The &lt;text&gt; component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a &lt;text&gt; component and add the text to be displayed between the &lt;text&gt; and &lt;/text&gt; tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
The **\<text>** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **\<text>** component and add the text to be displayed between the **\<text>** and **\</text>** tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
```
......@@ -15,15 +13,16 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
```
```
/* xxx.css */
.container {
flex-direction: column;
margin-top: 20px;
margin-left: 30px;
font-weight: 700;
}
.title-text {
width: 95%;
color: #1a1a1a;
font-size: 50px;
margin-top: 40px;
......@@ -37,14 +36,15 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
```
```
// xxx.js
export default {
data: {
headTitle: 'Capture the Beauty in This Moment',
headTitle: 'Capture the Beauty in Moment',
paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
},
}
```
![en-us_image_0000001118642600](figures/en-us_image_0000001118642600.PNG)
en/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 42d3879b
# &lt;grid-container&gt; Development
# Grid Layout
The **&lt;grid-container&gt;** component is the root container of the grid layout. Within the root container, you can use **&lt;grid-row&gt;** and **&lt;grid-col&gt;** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md).
The **\<grid-container>** component is the root container of the grid layout. Within the root container, you can use **\<grid-row>** and **\<grid-col>** for the grid layout. For details, see [Grid-container](../reference/arkui-js/js-components-grid-container.md).
## Creating a &lt;grid-container&gt; Component
## Creating a \<grid-container> Component
Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component.
Create a **\<grid-container>** component in the .hml file under **pages/index** and add a [\<Grid-row>](../reference/arkui-js/js-components-grid-row.md) child component.
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
......@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -35,16 +35,17 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
> **NOTE**
>
> **\<grid-container>** supports only **\<grid-row>** as a child component.
## Methods
Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
Touch the **\<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
......@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -108,12 +109,12 @@ export default {
![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
## Adding &lt;grid-col&gt;
## Adding \<grid-col>
After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
After adding a **\<grid-row>** child component to **\<grid-container>**, add a **\<grid-col>** child component to **\<grid-row>** to form a layout.
```
```html
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
......@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -165,8 +166,9 @@ text{
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
> **NOTE**
>
> **\<grid-row>** supports only **\<grid-col>** as a child component. You can add content only to **\<grid-col>**.
## Example Scenario
......@@ -174,7 +176,7 @@ text{
In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
```
```html
<!-- index.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
```
```
```css
/* xxx.css */
.container{
flex-direction: column;
......@@ -211,7 +213,7 @@ text{
```
```
```js
// index.js
import prompt from '@system.prompt';
export default {
......@@ -242,9 +244,3 @@ export default {
![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
\ No newline at end of file
## Samples
The following sample is provided to help you better understand how to develop the **\<grid>** component:
[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
\ No newline at end of file
en/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 42d3879b
# OffscreenCanvas
# OffscreenCanvasRenderingContext2D
**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image.
```
```html
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
......@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
</div>
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -48,9 +47,7 @@ select{
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -75,12 +72,10 @@ export default {
this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000})
};
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap);
},
change(e){
this.offCanvas.filter = e.newValue;
this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
},
......@@ -93,10 +88,10 @@ export default {
## Determining the Position
Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path.
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
......@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
```
```
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -143,7 +140,7 @@ button{
```
```
```js
// xxx.js
export default {
data: {
......@@ -188,4 +185,4 @@ export default {
}
```
![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif)
![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或