未验证 提交 80db4da6 编写于 作者: O openharmony_ci 提交者: Gitee

!15016 修改shape组件文档stroke属性说明

Merge pull request !15016 from lanyi/shape_stroke_lanyi
...@@ -33,7 +33,7 @@ Line(value?: {width?: string | number, height?: string | number}) ...@@ -33,7 +33,7 @@ Line(value?: {width?: string | number, height?: string | number})
| endPoint | Array<Length> | [0, 0] | 直线终点坐标点(相对坐标),单位vp。 | | endPoint | Array<Length> | [0, 0] | 直线终点坐标点(相对坐标),单位vp。 |
| fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | 设置填充区域颜色。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 | | fill | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | 设置填充区域颜色。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 | | fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 1 | 设置填充区域透明度。<br/>**说明:**<br/>Line组件无法形成闭合区域,该属性设置无效。 |
| stroke | [ResourceColor](ts-types.md#resourcecolor) | Color.Black | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md) | - | 设置边框颜色,不设置时,默认没有边框线条。 |
| 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 | 设置线条端点绘制样式。 |
...@@ -58,6 +58,7 @@ struct LineExample { ...@@ -58,6 +58,7 @@ struct LineExample {
Line() Line()
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([50, 100]) .endPoint([50, 100])
.stroke(Color.Black)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
Line() Line()
.width(200) .width(200)
...@@ -72,6 +73,7 @@ struct LineExample { ...@@ -72,6 +73,7 @@ struct LineExample {
Line({ width: 50, height: 50 }) Line({ width: 50, height: 50 })
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([100, 100]) .endPoint([100, 100])
.stroke(Color.Black)
.strokeWidth(3) .strokeWidth(3)
.strokeDashArray([10, 3]) .strokeDashArray([10, 3])
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -79,6 +81,7 @@ struct LineExample { ...@@ -79,6 +81,7 @@ struct LineExample {
Line({ width: 50, height: 50 }) Line({ width: 50, height: 50 })
.startPoint([0, 0]) .startPoint([0, 0])
.endPoint([100, 100]) .endPoint([100, 100])
.stroke(Color.Black)
.strokeWidth(3) .strokeWidth(3)
.strokeDashArray([10, 3]) .strokeDashArray([10, 3])
.strokeDashOffset(5) .strokeDashOffset(5)
...@@ -105,6 +108,7 @@ struct LineExample1 { ...@@ -105,6 +108,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Butt) .strokeLineCap(LineCapStyle.Butt)
.backgroundColor('#F5F5F5').margin(10) .backgroundColor('#F5F5F5').margin(10)
...@@ -114,6 +118,7 @@ struct LineExample1 { ...@@ -114,6 +118,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Round) .strokeLineCap(LineCapStyle.Round)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -123,6 +128,7 @@ struct LineExample1 { ...@@ -123,6 +128,7 @@ struct LineExample1 {
.height(200) .height(200)
.startPoint([50, 50]) .startPoint([50, 50])
.endPoint([50, 200]) .endPoint([50, 200])
.stroke(Color.Black)
.strokeWidth(20) .strokeWidth(20)
.strokeLineCap(LineCapStyle.Square) .strokeLineCap(LineCapStyle.Square)
.backgroundColor('#F5F5F5') .backgroundColor('#F5F5F5')
...@@ -145,29 +151,34 @@ struct LineExample { ...@@ -145,29 +151,34 @@ struct LineExample {
Line() Line()
.startPoint([50, 30]) .startPoint([50, 30])
.endPoint([300, 30]) .endPoint([300, 30])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
// 设置strokeDashArray的数组间隔为 50 // 设置strokeDashArray的数组间隔为 50
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50]) .strokeDashArray([50])
// 设置strokeDashArray的数组间隔为 50, 10 // 设置strokeDashArray的数组间隔为 50, 10
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10]) .strokeDashArray([50, 10])
// 设置strokeDashArray的数组间隔为 50, 10, 20 // 设置strokeDashArray的数组间隔为 50, 10, 20
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10, 20]) .strokeDashArray([50, 10, 20])
// 设置strokeDashArray的数组间隔为 50, 10, 20, 30 // 设置strokeDashArray的数组间隔为 50, 10, 20, 30
Line() Line()
.startPoint([50, 20]) .startPoint([50, 20])
.endPoint([300, 20]) .endPoint([300, 20])
.stroke(Color.Black)
.strokeWidth(10) .strokeWidth(10)
.strokeDashArray([50, 10, 20, 30]) .strokeDashArray([50, 10, 20, 30])
......
...@@ -32,7 +32,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str ...@@ -32,7 +32,7 @@ Path(value?: { width?: number | string; height?: number | string; commands?: str
| commands | string | '' | 路径绘制的命令字符串,单位为px。像素单位转换方法请参考[像素单位转换](ts-pixel-units.md)。 | | commands | string | '' | 路径绘制的命令字符串,单位为px。像素单位转换方法请参考[像素单位转换](ts-pixel-units.md)。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md) | 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) | - | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md) | - |设置边框颜色,不设置时,默认没有边框。 |
| 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 | 设置线条端点绘制样式。 |
......
...@@ -65,7 +65,6 @@ struct PolygonExample { ...@@ -65,7 +65,6 @@ struct PolygonExample {
Polygon({ width: 100, height: 100 }) Polygon({ width: 100, height: 100 })
.points([[0, 0], [50, 100], [100, 0]]) .points([[0, 0], [50, 100], [100, 0]])
.fill(Color.Green) .fill(Color.Green)
.stroke(Color.Transparent)
// 在 100 * 100 的矩形框中绘制一个四边形,起点(0, 0),经过(0, 100)和(100, 100),终点(100, 0) // 在 100 * 100 的矩形框中绘制一个四边形,起点(0, 0),经过(0, 100)和(100, 100),终点(100, 0)
Polygon().width(100).height(100) Polygon().width(100).height(100)
.points([[0, 0], [0, 100], [100, 100], [100, 0]]) .points([[0, 0], [0, 100], [100, 100], [100, 0]])
...@@ -77,7 +76,6 @@ struct PolygonExample { ...@@ -77,7 +76,6 @@ struct PolygonExample {
.points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
.fill(Color.Red) .fill(Color.Red)
.fillOpacity(0.6) .fillOpacity(0.6)
.stroke(Color.Transparent)
}.width('100%').margin({ top: 10 }) }.width('100%').margin({ top: 10 })
} }
} }
......
...@@ -33,7 +33,7 @@ Polyline(value?: {width?: string | number, height?: string | number}) ...@@ -33,7 +33,7 @@ Polyline(value?: {width?: string | number, height?: string | number})
| points | Array&lt;Point&gt; | [] | 折线经过坐标点列表。 | | points | Array&lt;Point&gt; | [] | 折线经过坐标点列表。 |
| fill | [ResourceColor](ts-types.md) | Color.Black | 设置填充区域颜色。 | | fill | [ResourceColor](ts-types.md) | 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) | - | 设置线条颜色。 | | stroke | [ResourceColor](ts-types.md) | - | 设置边框颜色,不设置时,默认没有边框线条。 |
| 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 | 设置线条端点绘制样式。 |
......
...@@ -66,7 +66,6 @@ struct RectExample { ...@@ -66,7 +66,6 @@ struct RectExample {
// 绘制90% * 50矩形 // 绘制90% * 50矩形
Rect({ width: '90%', height: 50 }) Rect({ width: '90%', height: 50 })
.fill(Color.Pink) .fill(Color.Pink)
.stroke(Color.Transparent)
// 绘制90% * 50的矩形框 // 绘制90% * 50的矩形框
Rect() Rect()
.width('90%') .width('90%')
...@@ -81,7 +80,6 @@ struct RectExample { ...@@ -81,7 +80,6 @@ struct RectExample {
.radiusHeight(20) .radiusHeight(20)
.radiusWidth(40) .radiusWidth(40)
.fill(Color.Pink) .fill(Color.Pink)
.stroke(Color.Transparent)
// 绘制90% * 80的矩形, 圆角宽高为20 // 绘制90% * 80的矩形, 圆角宽高为20
Rect({ width: '90%', height: 80 }) Rect({ width: '90%', height: 80 })
.radius(20) .radius(20)
...@@ -92,7 +90,6 @@ struct RectExample { ...@@ -92,7 +90,6 @@ struct RectExample {
Rect({ width: '90%', height: 80 }) Rect({ width: '90%', height: 80 })
.radius([[40, 40], [20, 20], [40, 40], [20, 20]]) .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
.fill(Color.Pink) .fill(Color.Pink)
.stroke(Color.Transparent)
}.width('100%').margin({ top: 5 }) }.width('100%').margin({ top: 5 })
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册