Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 0b79ec67 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10541 添加绘制组件示例挑单到3.1release 

Merge pull request !10541 from 田雨/OpenHarmony-3.1-Release
上级 8eab425a 7b457561
隐藏空白更改
内联 并排
Showing with 91 addition and 39 deletion
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
浏览文件 @ 0b79ec67
...@@ -36,14 +36,14 @@ Circle(options?: {width?: string | number, height?: string | number}) ...@@ -36,14 +36,14 @@ Circle(options?: {width?: string | number, height?: string | number})
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
浏览文件 @ 0b79ec67
...@@ -37,14 +37,14 @@ ellipse(options?: {width?: string | number, height?: string | number}) ...@@ -37,14 +37,14 @@ ellipse(options?: {width?: string | number, height?: string | number})
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 |设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
浏览文件 @ 0b79ec67
...@@ -48,9 +48,10 @@ Line(options?: {width?: string | number, height?: string | number}) ...@@ -48,9 +48,10 @@ Line(options?: {width?: string | number, height?: string | number})
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## 示例 ## 示例
### 示例1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -77,7 +78,15 @@ struct LineExample { ...@@ -77,7 +78,15 @@ struct LineExample {
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([100, 100]) .endPoint([100, 100])
.strokeWidth(3) .strokeWidth(3)
.strokeDashArray([1, 3]) .strokeDashArray([10, 3])
.backgroundColor('#F5F5F5')
// strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
Line({ width: 50, height: 50 })
.startPoint([0, 0])
.endPoint([100, 100])
.strokeWidth(3)
.strokeDashArray([10, 3])
.strokeDashOffset(5)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
} }
} }
...@@ -85,3 +94,46 @@ struct LineExample { ...@@ -85,3 +94,46 @@ struct LineExample {
``` ```
![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.png) ![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.png)
### 示例2
```ts
// xxx.ets
@Entry
@Component
struct LineExample1 {
build() {
Row({ space: 10 }) {
// 当LineCapStyle值为Butt时
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Butt)
.backgroundColor('#F5F5F5').margin(10)
// 当LineCapStyle值为Round时
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Round)
.backgroundColor('#F5F5F5')
// 当LineCapStyle值为Square时
Line()
.width(100)
.height(200)
.startPoint([50, 50])
.endPoint([50, 200])
.strokeWidth(20)
.strokeLineCap(LineCapStyle.Square)
.backgroundColor('#F5F5F5')
}
}
}
```
![zh-cn_image1_0000001219982725](figures/zh-cn_image1_0000001219982725.png)
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
浏览文件 @ 0b79ec67
...@@ -35,7 +35,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str ...@@ -35,7 +35,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
| commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | | commands | string | '' | 否 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
浏览文件 @ 0b79ec67
...@@ -37,14 +37,14 @@ Polygon(options?: {width?: string | number, height?: string | number}) ...@@ -37,14 +37,14 @@ Polygon(options?: {width?: string | number, height?: string | number})
| points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 | | points | Array<Point> | [] | 否 | 多边形的顶点坐标列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
## Point ## Point
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
浏览文件 @ 0b79ec67
...@@ -38,7 +38,7 @@ Polyline(options?: {width?: string | number, height?: string | number}) ...@@ -38,7 +38,7 @@ Polyline(options?: {width?: string | number, height?: string | number})
| points | Array<Point> | [] | 否 | 折线经过坐标点列表。 | | points | Array<Point> | [] | 否 | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
浏览文件 @ 0b79ec67
...@@ -44,14 +44,14 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string ...@@ -44,14 +44,14 @@ Rect(options?: {width?: string | number,height?: string | number,radius?: string
| radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 | | radius | string \| number \| Array<string \| number> | 0 | 否 | 圆角半径大小。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array<Length> | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array<Length> | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number \| string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number \| string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number \| string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number \| string \| [Resource](../../ui/ts-types.md#resource类型) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | Length | 1 | 否 | 设置线条宽度。 | | strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
浏览文件 @ 0b79ec67
...@@ -40,14 +40,14 @@ Shape(value?: PixelMap) ...@@ -40,14 +40,14 @@ Shape(value?: PixelMap)
| viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 | | viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 | | strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 | | strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 | | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 | | strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 | | strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 | | strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置线条宽度。 | | strokeWidth | number&nbsp;\|&nbsp;string | 1 | 否 | 设置边框宽度。 |
| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 | | antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
| mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 | | mesh<sup>8+</sup> | Array&lt;number&gt;,number,number | [],0,0 | 否 | 设置mesh效果。第一个参数为长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置，第二个参数为mesh矩阵列数column，第三个参数为mesh矩阵行数row。 |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或