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