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