1# Polyline 2 3折线绘制组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Polyline(value?: {width?: string | number, height?: string | number}) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| -------- | -------- | -------- | -------- | 27| value | {width?: string \| number, height?: string \| number} | 否 | width：宽度，取值范围≥0。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。<br/>height：高度，取值范围≥0。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。| 28 29## 属性 30 31除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 32 33### points 34 35points(value: Array<any>) 36 37设置折线经过坐标点列表。异常值按照默认值处理。 38 39**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 40 41**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 42 43**系统能力：** SystemCapability.ArkUI.ArkUI.Full 44 45**参数：** 46 47| 参数名 | 类型 | 必填 | 说明 | 48| ------ | ------------------------------------------------------------ | ---- | ----------------------------------- | 49| value | Array<[Point](ts-drawing-components-polyline.md#point)> | 是 | 折线经过坐标点列表。<br/>默认值：[]<br/>默认单位：vp | 50 51### fill 52 53fill(value: ResourceColor) 54 55设置填充区域的颜色，异常值按照默认值处理。与通用属性foregroundColor同时设置时，后设置的属性生效。 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ------ | ------------------------------------------ | ---- | -------------------------------------- | 67| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 填充区域颜色。<br/>默认值：Color.Black | 68 69### fillOpacity 70 71fillOpacity(value: number | string | Resource) 72 73设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------------------------------------------------------------ | ---- | ------------------------------ | 85| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 填充区域透明度。<br/>默认值：1 | 86 87### stroke 88 89stroke(value: ResourceColor) 90 91设置边框颜色，不设置时，默认没有边框线条。异常值不会绘制边框线条。 92 93**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 94 95**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ------------------------------------------ | ---- | ---------- | 103| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 边框颜色。 | 104 105### strokeDashArray 106 107strokeDashArray(value: Array<any>) 108 109设置线条间隙。线段相交时可能会出现重叠现象。异常值按照默认值处理。 110 111**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 112 113**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ---------------- | ---- | ------------------------- | 121| value | Array<any> | 是 | 线条间隙，取值范围≥0。<br/>默认值：[]<br/>默认单位：vp | 122 123### strokeDashOffset 124 125strokeDashOffset(value: number | string) 126 127设置线条绘制起点的偏移量。异常值按照默认值处理。 128 129**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 130 131**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135**参数：** 136 137| 参数名 | 类型 | 必填 | 说明 | 138| ------ | -------------------------- | ---- | ------------------------------------ | 139| value | number \| string | 是 | 线条绘制起点的偏移量。<br/>默认值：0<br/>默认单位：vp | 140 141### strokeLineCap 142 143strokeLineCap(value: LineCapStyle) 144 145设置线条端点绘制样式。 146 147**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 148 149**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ | 157| value | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是 | 线条端点绘制样式。<br/>默认值：LineCapStyle.Butt | 158 159### strokeLineJoin 160 161strokeLineJoin(value: LineJoinStyle) 162 163设置线条拐角绘制样式。 164 165**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 166 167**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Full 170 171**参数：** 172 173| 参数名 | 类型 | 必填 | 说明 | 174| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- | 175| value | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 是 | 线条拐角绘制样式。<br/>默认值：LineJoinStyle.Miter | 176 177### strokeMiterLimit 178 179strokeMiterLimit(value: number | string) 180 181设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 182 183该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。 184 185**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 186 187**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**参数：** 192 193| 参数名 | 类型 | 必填 | 说明 | 194| ------ | -------------------------- | ---- | ---------------------------------------------- | 195| value | number \| string | 是 | 斜接长度与边框宽度比值的极限值。<br/>默认值：4 | 196 197### strokeOpacity 198 199strokeOpacity(value: number | string | Resource) 200 201设置线条透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。 202 203**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 204 205**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 206 207**系统能力：** SystemCapability.ArkUI.ArkUI.Full 208 209**参数：** 210 211| 参数名 | 类型 | 必填 | 说明 | 212| ------ | ------------------------------------------------------------ | ---- | -------------------------- | 213| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 线条透明度。<br/>默认值：1 | 214 215### strokeWidth 216 217strokeWidth(value: Length) 218 219设置线条宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。 220 221**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 222 223**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 224 225**系统能力：** SystemCapability.ArkUI.ArkUI.Full 226 227**参数：** 228 229| 参数名 | 类型 | 必填 | 说明 | 230| ------ | ---------------------------- | ---- | ------------------------ | 231| value | [Length](ts-types.md#length) | 是 | 线条宽度，取值范围≥0。<br/>默认值：1<br/>默认单位：vp | 232 233### antiAlias 234 235antiAlias(value: boolean) 236 237设置是否开启抗锯齿效果。 238 239**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 240 241**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 242 243**系统能力：** SystemCapability.ArkUI.ArkUI.Full 244 245**参数：** 246 247| 参数名 | 类型 | 必填 | 说明 | 248| ------ | ------- | ---- | ------------------------------------- | 249| value | boolean | 是 | 是否开启抗锯齿效果。<br/>默认值：true | 250 251## Point 252 253点坐标类型。 254 255**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 256 257| 名称 | 类型定义 | 描述 | 258| --------- | -------------------- | ------------------------------------------------------------ | 259| Point | [number, number] | 第一个参数为x轴坐标，第二个参数为y轴坐标（相对坐标）。 | 260 261## 示例 262 263使用points、fillOpacity、stroke、strokeLineJoin、strokeLineCap属性分别绘制折线的经过坐标、透明度、边框颜色、拐角样式、端点样式。 264 265```ts 266// xxx.ets 267@Entry 268@Component 269struct PolylineExample { 270 build() { 271 Column({ space: 10 }) { 272 // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(20,60)，到达终点(100, 100) 273 Polyline({ width: 100, height: 100 }) 274 .points([[0, 0], [20, 60], [100, 100]]) 275 .fillOpacity(0) 276 .stroke(Color.Blue) 277 .strokeWidth(3) 278 // 在 100 * 100 的矩形框中绘制一段折线，起点(20, 0)，经过(0,100)，到达终点(100, 90) 279 Polyline() 280 .width(100) 281 .height(100) 282 .fillOpacity(0) 283 .stroke(Color.Red) 284 .strokeWidth(8) 285 .points([[20, 0], [0, 100], [100, 90]]) 286 // 设置折线拐角处为圆弧 287 .strokeLineJoin(LineJoinStyle.Round) 288 // 设置折线两端为半圆 289 .strokeLineCap(LineCapStyle.Round) 290 }.width('100%') 291 } 292} 293``` 294 295 296
