Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 623f3218 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11794 翻译完成 10613/10026/10065/10413/10238 

Merge pull request !11794 from ester.zhou/TR-10613
上级 b1438eae 0cf86ab8
隐藏空白更改
内联 并排
Showing with 575 addition and 221 deletion
en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 623f3218
......@@ -16,29 +16,30 @@ Not supported
Circle(options?: {width?: string | number, height?: string | number})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width of the circle.|
| height | string \| number | No| 0 | Height of the circle.|
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| width | string \| number | No| Width of the circle.<br>Default value: **0**|
| height | string \| number | No| Height of the circle.<br>Default value: **0**|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Description|
| -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color of the fill area.<br>Default value: **Color.Black**|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| Opacity of the fill area.<br>Default value: **1**|
| stroke | [ResourceColor](ts-types.md) | Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]** |
| strokeDashOffset | number \| string | Offset of the start point for drawing the stroke.<br>Default value: **0**|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
| strokeMiterLimit | number \| string | Limit value when the sharp angle is drawn as a miter.<br>Default value: **4**<br>**NOTE**<br>This attribute does not take effect because the **\<Circle>** component cannot be used to draw a shape with a sharp angle.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | Stroke width.<br>Default value: **1**|
| antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**|
## Example
......@@ -49,14 +50,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component
struct CircleExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Column({ space: 10 }) {
// Draw a circle whose diameter is 150.
Circle({ width: 150, height: 150 })
// Draw a circle whose diameter is 150.
Circle().width(150).height(150)
}.width('100%').margin({ top: 5 })
// Draw a circle with the diameter of 150 and red dashes. (If the width and height are different, the shorter value is used as the diameter.)
Circle()
.width(150)
.height(200)
.fillOpacity(0)
.strokeWidth(3)
.stroke(Color.Red)
.strokeDashArray([1, 2])
}.width('100%')
}
}
```
![en-us_image_0000001256978353](figures/en-us_image_0000001256978353.png)
![en-us_image_0000001219744191](figures/en-us_image_0000001219744191.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 623f3218
......@@ -14,7 +14,7 @@ Not supported
## APIs
ellipse(options?: {width?: string | number, height?: string | number})
Ellipse(options?: {width?: string | number, height?: string | number})
**Parameters**
......@@ -27,19 +27,19 @@ ellipse(options?: {width?: string | number, height?: string | number})
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No|Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md) | - |Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes. |
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Stroke width.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
## Example
......@@ -50,14 +50,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component
struct EllipseExample {
build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// Draw an ellipse in a 150 x 80 rectangle.
Column({ space: 10 }) {
// Draw a 150 x 80 ellipse.
Ellipse({ width: 150, height: 80 })
// Draw an ellipse in a 150 x 80 rectangle.
Ellipse().width(150).height(80)
}.width('100%').margin({ top: 5 })
// Draw a 150 x 100 ellipse with blue strokes.
Ellipse()
.width(150)
.height(100)
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
}.width('100%')
}
}
```
![en-us_image_0000001212058488](figures/en-us_image_0000001212058488.png)
![en-us_image_0000001174104394](figures/en-us_image_0000001174104394.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 623f3218
......@@ -5,8 +5,7 @@ The **\<Line>** component is used to draw a straight line.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -22,36 +21,126 @@ Not supported
Line(value?: {width?: string | number, height?: string | number})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
| height | string \| number | No| 0 | Height.|
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
| height | string \| number | No| 0 | Height.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| startPoint | Array&lt;Length&gt; | [0, 0] | No | Coordinates (relative coordinates) of the start point of the line, in vp.|
| endPoint | Array&lt;Length&gt; | [0, 0] | No | Coordinates (relative coordinates) of the end point of the line, in vp.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| startPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the start point of the line, in vp.|
| endPoint | Array&lt;Length&gt; | [0, 0] | Coordinates (relative coordinates) of the end point of the line, in vp.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Color of the fill area.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Stroke width.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct LineExample {
build() {
Column({ space: 10 }) {
// The coordinates of the start and end points of the line are determined relative to the coordinates of the drawing area of the <Line> component.
Line()
.startPoint([0, 0])
.endPoint([50, 100])
.backgroundColor('#F5F5F5')
Line()
.width(200)
.height(200)
.startPoint([50, 50])
.endPoint([150, 150])
.strokeWidth(5)
.stroke(Color.Orange)
.strokeOpacity(0.5)
.backgroundColor('#F5F5F5')
// If the coordinates of a point are beyond the width and height range of the <Line> component, the line will exceed the drawing area.
Line({ width: 50, height: 50 })
.startPoint([0, 0])
.endPoint([100, 100])
.strokeWidth(3)
.strokeDashArray([10, 3])
.backgroundColor('#F5F5F5')
// strokeDashOffset is used to define the offset when the associated strokeDashArray array is rendered.
Line({ width: 50, height: 50 })
.startPoint([0, 0])
.endPoint([100, 100])
.strokeWidth(3)
.strokeDashArray([10, 3])
.strokeDashOffset(5)
.backgroundColor('#F5F5F5')
}
}
}
```
![en-us_image_0000001219982725](figures/en-us_image_0000001219982725.png)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct LineExample1 {
build() {
Row({ space: 10 }) {
// Set LineCapStyle to Butt.
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Butt)
.backgroundColor('#F5F5F5').margin(10)
// Set LineCapStyle to Round.
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Round)
.backgroundColor('#F5F5F5')
// Set LineCapStyle to Square.
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Square)
.backgroundColor('#F5F5F5')
}
}
}
```
![en-us_image1_0000001219982725](figures/en-us_image1_0000001219982725.png)
### Example 3
```ts
// xxx.ets
@Entry
......@@ -59,12 +148,38 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
struct LineExample {
build() {
Column() {
Line().startPoint([0, 0]).endPoint([50, 100])
Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 100])
Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150])
}.margin({ top: 5 })
Line()
.startPoint([50, 30])
.endPoint([300, 30])
.strokeWidth(10)
// Set the interval for strokeDashArray to 50.
Line()
.startPoint([50, 20])
.endPoint([300, 20])
.strokeWidth(10)
.strokeDashArray([50])
// Set the interval for strokeDashArray to 50, 10.
Line()
.startPoint([50, 20])
.endPoint([300, 20])
.strokeWidth(10)
.strokeDashArray([50, 10])
// Set the interval for strokeDashArray to 50, 10, 20.
Line()
.startPoint([50, 20])
.endPoint([300, 20])
.strokeWidth(10)
.strokeDashArray([50, 10, 20])
// Set the interval for strokeDashArray to 50, 10, 20, 30.
Line()
.startPoint([50, 20])
.endPoint([300, 20])
.strokeWidth(10)
.strokeDashArray([50, 10, 20, 30])
}
}
}
```
![en-us_image_0000001256858387](figures/en-us_image_0000001256858387.jpg)
![en-us_image2_0000001219982725](figures/en-us_image2_0000001219982725.PNG)
en/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 623f3218
......@@ -27,24 +27,24 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
| commands | string | '' | No | Command for drawing the path. The unit is px. For details about how to convert the pixel units, see [Pixel Unit Conversion](../../ui/ts-pixel-units.md).|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the stroke.|
| strokeWidth | Length | 1 | No| Width of the stroke.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name | Type | Default Value | Description |
| -------- | ----------------------------------- | ---- | ---------------------------------------- |
| commands | string | '' | Command for drawing the path. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the stroke.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Width of the stroke.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
The supported commands are as follows:
| Command | Attribute | Parameter | Description |
| Command | Name | Parameter | Description |
| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
| M | moveto | (x y) | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0).|
| L | lineto | (x y) | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath.|
......@@ -52,12 +52,12 @@ The supported commands are as follows:
| V | vertical lineto | y | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath.|
| C | curveto | (x1 y1 x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath.|
| S | smooth curveto | (x2 y2 x y) | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point.|
| Q | quadratic Belzier curve | (x1 y1 x y) | Use (x1, y1) as the control point to draw a quadratic Bessel curve from the current point to (x, y). For example, Q400 50 600 300 indicates that a quadratic Bessel curve from the current point to the (600, 300) point is drawn, and the (600, 300) point is used as the starting point of the new subpath.|
| T | smooth quadratic Belzier curveto | (x y) | Draw a quadratic Bessel curve from the current point to (x, y). If the previous command is Q or T, the control point is the mapping of the end point control point of the previous command relative to the start point. For example, a control point of the second Bessel curve segment of the Q400 50 600 300 T1000 300 is (800, 350). If there is no previous command or the previous command is not Q or T, the first control point coincides with the current point.|
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to (x, y). The size and direction of an ellipse are defined by two radiuses (rx, ry) and x-axis-rotation, indicating how the entire ellipse rotates relative to the current coordinate system (in degrees). large-arc-flag and sweep-flag determine an arc drawing manner.|
| Q | quadratic Belzier curve | (x1 y1 x y) | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point. For example, `Q400 50 600 300` draws a quadratic Bezier curve from the current point to point (600, 300), which is the start point of the new subpath.|
| T | smooth quadratic Belzier curveto | (x y) | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates. If the previous command is **Q** or **T**, the control point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `Q400 50 600 300 T1000 300`, the second segment of the quadratic Bezier curve uses point (800, 350) as the control point. If there is no previous command or the previous command is not **Q** or **T**, the control point of the curve start point coincides with the current point.|
| A | elliptical Arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to the point specified by the given (x, y) coordinates. **(rx, ry)** and **x-axis-rotation** define the size and direction of the arc, indicating how the arc rotates relative to the current coordinate system (in degrees). **large-arc-flag** and **sweep-flag** define how the arc is drawn.|
| Z | closepath | none | Closes the current subpath by connecting the current path back to the initial point of the current subpath. |
For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), draws a straight line from point (0, 20) to point (50, 50), draws a straight line from point (50, 50) to point (50, 100), and draws a closed path from point (50, 100) to point (0, 20) to form a closed triangle.
For example, **commands('M0 20 L50 50 L50 100 Z')** defines a triangle that starts from position (0, 20), by drawing a line from point (0, 20) to point (50, 50), then a line from point (50, 50) to point (50, 100), and finally a line from point (50, 100) to point (0, 20).
## Example
......@@ -67,24 +67,75 @@ For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts f
@Component
struct PathExample {
build() {
Column({ space: 5 }) {
Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a straight line with a length of 900px and a width of 3vp.
Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3)
Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z')
Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z')
Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
Column({ space: 10 }) {
Text('Straight line')
.fontSize(11)
.fontColor(0xCCCCCC)
.width('90%')
// Draw a straight line whose length is 900 px and width is 3 vp.
Path()
.width(300)
.height(10)
.commands('M0 0 L900 0')
.stroke(Color.Black)
.strokeWidth(3)
Text('Straight line graph')
.fontSize(11)
.fontColor(0xCCCCCC)
.width('90%')
// Draw a straight line.
Row({ space: 20 }) {
Path()
.width(100)
.height(100)
.commands('M150 0 L300 300 L0 300 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 0 H300 V300 H0 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}.width('100%')
Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ justifyContent: FlexAlign.SpaceAround }) {
Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z")
Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
// Draw an arc.
Row({ space: 20 }) {
Path()
.width(100)
.height(100)
.commands("M0 300 S150 0 300 300 Z")
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
Path()
.width(100)
.height(100)
.commands('M0 200 A30 20 20 0 0 250 200 Z')
.fillOpacity(0)
.stroke(Color.Black)
.strokeWidth(3)
}
}.width('100%').margin({ top: 5 })
}.width('100%')
.margin({ top: 5 })
}
}
```
......
en/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 623f3218
......@@ -17,6 +17,7 @@ Not supported
Polygon(value?: {width?: string | number, height?: string | number})
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
......@@ -27,20 +28,20 @@ Polygon(value?: {width?: string | number, height?: string | number})
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | No| Vertex coordinates of the polygon.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | Vertex coordinates of the polygon.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes. |
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Stroke width.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
## Point
......@@ -59,18 +60,25 @@ Describes the coordinates of a point.
@Component
struct PolygonExample {
build() {
Column({ space: 5 }) {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100).
Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]])
// Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100).
Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]])
// Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100).
Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
}.width('100%')
}.margin({ top: 5 })
Column({ space: 10 }) {
// Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100).
Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green)
// Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100).
Polygon().width(100).height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]])
.fillOpacity(0)
.strokeWidth(5)
.stroke(Color.Blue)
// Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100).
Polygon().width(100).height(100)
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red)
.fillOpacity(0.6)
}.width('100%').margin({ top: 10 })
}
}
```
![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.gif)
![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 623f3218
......@@ -17,6 +17,7 @@ Not supported
Polyline(value?: {width?: string | number, height?: string | number})
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | string \| number | No| 0 | Width.|
......@@ -27,20 +28,20 @@ Polyline(value?: {width?: string | number, height?: string | number})
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | No| List of coordinates that the polyline passes through.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dashes.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| points | Array&lt;Point&gt; | [] | List of coordinates that the polyline passes through.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.|
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Stroke width.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
## Point
......@@ -58,16 +59,28 @@ Describes the coordinates of a point.
@Component
struct PolylineExample {
build() {
Column({ space: 5 }) {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
// Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (20,60).
Polyline({ width: 100, height: 100 }).points([[0, 0], [20, 60], [100, 100]])
// Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (0,100).
Polyline().width(100).height(100).points([[0, 0], [0, 100], [100, 100]])
}.width('100%')
}.margin({ top: 5 })
Column({ space: 10 }) {
// Draw a polyline in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 100), and the passing point is (20,60).
Polyline({ width: 100, height: 100 })
.points([[0, 0], [20, 60], [100, 100]])
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
// Draw a polyline in a 100 x 100 rectangle. The start point is (20, 0), the end point is (100, 90), and the passing point is (0,100).
Polyline()
.width(100)
.height(100)
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(8)
.points([[20, 0], [0, 100], [100, 90]])
// Set the join style of the stroke to a round corner.
.strokeLineJoin(LineJoinStyle.Round)
// Set the cap style of the stroke to a half circle.
.strokeLineCap(LineCapStyle.Round)
}.width('100%')
}
}
```
![en-us_image_0000001212218432](figures/en-us_image_0000001212218432.gif)
![en-us_image_0000001219744185](figures/en-us_image_0000001219744185.png)
en/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 623f3218
......@@ -32,22 +32,22 @@ Rect(value?: {width?: string | number,height?: string | number,radius?: string |
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| radiusWidth | string \| number | 0 | No| Width of the rounded corner. The width and height are the same when only the width is set.|
| radiusHeight | string \| number | 0 | No| Height of the rounded corner. The width and height are the same only when the height is set.|
| radius | string \| number \| Array&lt;string \| number&gt; | 0 | No| Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | No| Stroke color.|
| strokeDashArray | Array&lt;Length&gt; | [] | No| Stroke dash.|
| strokeDashOffset | number \| string | 0 | No| Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | No| Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | No| Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | No| Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | No| Stroke opacity.|
| strokeWidth | Length | 1 | No| Stroke width.|
| antiAlias | boolean | true | No| Whether anti-aliasing is enabled.|
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.|
| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.|
| radius | string \| number \| Array&lt;string \| number&gt; | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.|
| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.|
| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.|
| strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes. |
| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.|
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.|
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.|
| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
| strokeWidth | Length | 1 | Stroke width.|
| antiAlias | boolean | true | Whether anti-aliasing is enabled.|
## Example
......@@ -58,21 +58,40 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component
struct RectExample {
build() {
Column({ space: 5 }) {
Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle.
Rect({ width: '90%', height: 50 })
Column({ space: 10 }) {
Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle.
Rect().width('90%').height(50)
Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20.
Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20)
// Draw a 90% x 50 rectangle with the width and height of the rounded corner being 20.
Rect({ width: '90%', height: 50 }).radius(20)
Column({ space: 5 }) {
Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 50 rectangle.
Rect({ width: '90%', height: 50 })
.fill(Color.Pink)
// Draw a 90% x 50 rectangle.
Rect()
.width('90%')
.height(50)
.fillOpacity(0)
.stroke(Color.Red)
.strokeWidth(3)
Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
// Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively.
Rect({ width: '90%', height: 80 })
.radiusHeight(20)
.radiusWidth(40)
.fill(Color.Pink)
// Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20.
Rect({ width: '90%', height: 80 })
.radius(20)
.fill(Color.Pink)
}.width('100%').margin({ top: 10 })
// Draw a 90% x 50 rectangle, with the width and height of its rounded corners as follows: 40 for the upper left rounded corner, 20 for the upper right rounded corner, 40 for the lower right rounded corner, and 20 for the lower left rounded corner.
Rect({ width: '90%', height: 80 })
.radius([[40, 40], [20, 20], [40, 40], [20, 20]])
.fill(Color.Pink)
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001212218454](figures/en-us_image_0000001212218454.png)
![en-us_image_0000001174264386](figures/en-us_image_0000001174264386.png)
en/application-dev/reference/arkui-ts/ts-pixel-units.md 0 → 100644
浏览文件 @ 623f3218
# Pixel Units
The framework provides four pixel units, with vp as the reference data unit.
| Name| Description |
| ---- | ------------------------------------------------------------ |
| px | Physical pixel unit of the screen. |
| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.|
| fp | Font pixel, which is similar to vp and varies according to the system font size.|
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **[designWidth](../../quick-start/package-structure.md)**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.|
## Pixel Unit Conversion
Conversion between px and other pixel units is supported.
| API | Description |
| ---------------------------------------- | ---------------------- |
| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. |
| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. |
| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. |
| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. |
| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.|
| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct Example {
build() {
Column() {
Flex({ wrap: FlexWrap.Wrap }) {
Column() {
Text("width(220)")
.width(220).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width('220px')")
.width('220px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
}.margin(5)
Column() {
Text("width('220vp')")
.width('220vp').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width('220lpx') designWidth:720")
.width('220lpx').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("width(vp2px(220) + 'px')")
.width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
}.margin(5)
Column() {
Text("fontSize('12fp')")
.width(220).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp')
}.margin(5)
}.width('100%')
}
}
}
```
![en-us_image_0000001169582302](figures/en-us_image_0000001169582302.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 623f3218
......@@ -13,11 +13,11 @@ The border attributes are used to set border styles for components.
| Name | Type | Description |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {<br>width?: [Length](ts-types.md#length) \| EdgeWidths<sup>9+</sup>,<br>color?: [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors<sup>9+</sup>,<br>radius?: [Length](ts-types.md#length) \| BorderRadiuses<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.|
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | Border style of an element.<br>Default value: **BorderStyle.Solid** |
| borderWidth | [Length](ts-types.md#length) \| EdgeWidths<sup>9+</sup> | Border width. The percentage format is not supported. |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors<sup>9+</sup> | Border color of an element. |
| borderRadius | [Length](ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | Border radius. The percentage format is not supported. |
| border | {<br>width?: [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup>,<br>color?: [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup>,<br>radius?: [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup>,<br>style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup><br>} | Unified border style.<br>- **width**: border width.<br>- **color**: border color.<br>- **radius**: radius of the rounded corner of the border.<br>- **style**: border style.|
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9)<sup>9+</sup> | Border style.<br>Default value: **BorderStyle.Solid** |
| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | Border width. The percentage format is not supported. |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | Border color.<br>Default value: **Color.Black** |
| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | Border radius. The percentage format is not supported. |
## EdgeWidths<sup>9+</sup>
......@@ -70,19 +70,19 @@ To reference this object, at least one parameter must be passed.
@Entry
@Component
struct BorderExample {
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
// Dashed border
Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
// Dotted border
Text('dotted')
.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
}.width('100%').height(150)
Text('.border')
.fontSize(50)
.width(300)
......@@ -92,12 +92,12 @@ struct BorderExample {
color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
style: {
left: BorderStyle.Dotted,
right: BorderStyle.Dotted,
top: BorderStyle.Solid,
bottom: BorderStyle.Dashed
left: BorderStyle.Dotted,
right: BorderStyle.Dotted,
top: BorderStyle.Solid,
bottom: BorderStyle.Dashed
}
}).textAlign(TextAlign.Center)
}).textAlign(TextAlign.Center)
}
}
}
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 623f3218
......@@ -126,19 +126,19 @@ Sends a mouse event.
```ts
// xxx.ets
class Utils {
static rect_left;
static rect_top;
static rect_right;
static rect_bottom;
static rect_value;
static rect_left
static rect_top
static rect_right
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);
console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
let strJson = getInspectorByKey(key)
let obj = JSON.parse(strJson)
console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))
let rectInfo = JSON.parse('[' + obj.$rect + ']')
console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
console.info("[getInspectorByKey] rectInfo is: " + rectInfo)
this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
......@@ -229,7 +229,11 @@ struct IdExample {
}
}
},
source: SourceType.Mouse
source: SourceType.Mouse,
pressure: 1,
tiltX: 1,
tiltY: 1,
sourceTool: SourceTool.Unknown
}
sendMouseEvent(mouseEvent) // Send a mouse event.
}, 2000)
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 623f3218
......@@ -4,22 +4,17 @@ Create a more gorgeous look for a component by applying a gradient color effect
> **NOTE**
>
> This attribute is 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.
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Linear gradient.<br>**angle**: angle of the linear gradient.<br>**direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Angle gradient.<br>**center**: center point of the angle gradient.<br>**start**: start point of the angle gradient.<br>**end**: end point of the angle gradient.<br>**rotation**: rotation angle of the angle gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
| radialGradient | {<br>center: Point,<br>radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | - | Radial gradient.<br>**center**: center point of the radial gradient.<br>**radius**: radius of the radial gradient.<br>**colors**: description of the gradient colors.<br>**repeating**: whether the colors are repeated.|
| Name | Type | Description |
| -------------- | -------------------------------------------- | ----------------------------------- |
| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: colors of the linear gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**|
| sweepGradient | {<br>center: Point,<br>start?: number \| string,<br>end?: number \| string,<br>rotation?: number\|string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Angle gradient.<br>- **center**: center point of the angle gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the angle gradient.<br> Default value: **0**<br>- **end**: end point of the angle gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the angle gradient.<br> Default value: **0**<br>- **colors**: colors of the angle gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**|
| radialGradient | {<br>center: Point,<br> radius: number \| string,<br>colors: Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br>repeating?: boolean<br>} | Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br>- **colors**: colors of the radial gradient.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**|
## Example
......@@ -29,7 +24,6 @@ None
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
......@@ -38,8 +32,32 @@ struct ColorGradientExample {
.height(50)
.linearGradient({
angle: 90,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width('90%')
.height(50)
.linearGradient({
direction: GradientDirection.Left, // Gradient direction.
repeating: true, // Whether the gradient colors are repeated.
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
})
}
.width('100%')
.padding({ top: 5 })
}
}
```
![en-us_image_0000001219864149](figures/gradientColor1.png)
```ts
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
......@@ -48,8 +66,37 @@ struct ColorGradientExample {
center: [50, 50],
start: 0,
end: 359,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
.height(100)
.sweepGradient({
center: [50, 50],
start: 0,
end: 359,
rotation: 45, // Rotation angle.
repeating: true, // Whether the gradient colors are repeated.
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
})
}
.width('100%')
.padding({ top: 5 })
}
}
```
![en-us_image_0000001219864149](figures/gradientColor2.png)
```ts
// xxx.ets
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
......@@ -57,7 +104,17 @@ struct ColorGradientExample {
.radialGradient({
center: [50, 50],
radius: 60,
colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
.height(100)
.radialGradient({
center: [50, 50],
radius: 60,
repeating: true,
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
})
}
.width('100%')
......@@ -66,4 +123,4 @@ struct ColorGradientExample {
}
```
![en-us_image_0000001212218484](figures/en-us_image_0000001212218484.png)
![en-us_image_0000001219864149](figures/gradientColor3.png)
en/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md
浏览文件 @ 623f3218
# Hit Test Control
Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that needs to respond to the touch event, and then distributes the touch event based on the hit test result. The **hitTestBehavior** attribute sets the behavior during hit testing. The settings will affect the hit test result of the component and thereby the subsequent touch event distribution. For details, see **HitTestMode**.
Hit test control allows you to configure hit testing for components. When processing a touch event, ArkUI performs hit testing on the touch points and component area before the touch event is triggered, in order to determine the component that needs to respond to the touch event, and then distributes the touch event based on the hit test result. The **hitTestBehavior** attribute sets how the component behaves during hit testing. The settings will affect the hit test result and thereby the subsequent touch event distribution. For details, see **[HitTestMode](#hittestmode)**.
> **NOTE**
>
> - The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
> - When the touch areas of nodes, for example, two nodes, in the **\<Stack>** component overlap, hit testing is performed only on the node displayed at the top layer by default. To perform hit testing on the node at the lower layer, set **hitTestBehavior** to **HitTestMode.Transparent** for the upper-layer node.
......@@ -11,7 +12,7 @@ Hit test control allows you to configure hit testing for components. When proces
| Name | Type | Description |
| -------------------- | -------- | ---------------------------------------- |
| hitTestBehavior | HitTestMode | How the component behaves during hit testing.<br>Default value: **HitTestMode.Default**|
| hitTestBehavior | [HitTestMode](#hittestmode) | How the component behaves during hit testing.<br>Default value: **HitTestMode.Default**|
## HitTestMode
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或