目录
一,定义
Polygon是鸿蒙提供的多边形绘制组件,利用该组件可以绘制多边形背景,多边形图案等
官方提供的参数和属性:
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
width | string | number | 否 | 0 | 宽度。 说明: 异常值按照默认值处理。 |
height | string | number | 否 | 0 | 高度。 说明: 异常值按照默认值处理。 |
属性:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
points | Array<Point> | [] | 多边形的顶点坐标列表。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 异常值按照默认值处理。 |
fill | ResourceColor | Color.Black | 设置填充区域颜色。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 异常值按照默认值处理。 |
fillOpacity | Length | 1 | 设置填充区域透明度。 取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0,其余异常值按1.0处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
stroke | ResourceColor | - | 设置边框颜色,不设置时,默认没有边框线条。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 异常值不会绘制边框线条。 |
strokeDashArray | Array<Length> | [] | 设置边框间隙。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 线段相交时可能会出现重叠现象。异常值按照默认值处理。 |
strokeDashOffset | number | string | 0 | 边框绘制起点的偏移量。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 异常值按照默认值处理。 |
strokeLineCap | LineCapStyle | LineCapStyle.Butt | 设置边框端点绘制样式。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | 设置边框拐角绘制样式。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
strokeMiterLimit | number | string | 4 | 设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离,边框宽度即strokeWidth属性的值。 说明: 该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 该属性的合法值范围应当大于等于1.0,当取值范围在[0,1)时按1.0处理,其余异常值按默认值处理。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
strokeOpacity | Length | 1 | 设置边框透明度。 说明: 该属性的取值范围是[0.0, 1.0],若给定值小于0.0,则取值为0.0;若给定值大于1.0,则取值为1.0,其余异常值按1.0处理 。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
strokeWidth | Length | 1 | 设置边框宽度。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 该属性若为string类型, 暂不支持百分比,百分比按照1px处理。 |
antiAlias | boolean | true | 是否开启抗锯齿效果。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
Point:
名称 | 类型定义 | 描述 |
---|---|---|
Point | [number, number] | 第一个参数为x轴坐标,第二个参数为y轴坐标(相对坐标)。 |
二,绘制自定义多边形
绘制一个五边形:
TypeScript
@Entry
@Component
struct Index {
build() {
Stack({alignContent: Alignment.Center}) {
Polygon({width: 200, height: 200})
.points([[100, 0], [0, 100], [40, 200], [160, 200], [200, 100]])
.fill("#ff1122")
}
.width("100%")
.height("100%")
}
}
绘制多边形边框并设置宽度:
TypeScript
@Entry
@Component
struct Index {
build() {
Stack({alignContent: Alignment.Center}) {
Polygon({width: 200, height: 200})
.points([[100, 0], [0, 100], [40, 200], [160, 200], [200, 100]])
.fill("#ff1122")
.stroke("#000000")
.strokeWidth(10)
}
.width("100%")
.height("100%")
}
}
效果如下:
设置多边形的边框为虚线:
TypeScript
@Entry
@Component
struct Index {
build() {
Stack({alignContent: Alignment.Center}) {
Polygon({width: 200, height: 200})
.points([[100, 0], [0, 100], [40, 200], [160, 200], [200, 100]])
.fill("#ff1122")
.stroke("#000000")
.strokeWidth(10)
.strokeDashArray([1,2])
}
.width("100%")
.height("100%")
}
}
效果如下:
三,作为其他组件的背景使用
在安卓中,可以自定义drawable-xml来作为其他组件的背景,在鸿蒙中,可以将Polygon作为其他组件的背景使用。
首先自定义Builder:
TypeScript
@Builder bg() {
Polygon({width: "100%", height: "100%"})
.points([[100, 0], [0, 100], [40, 200], [160, 200], [200, 100]])
.fill("#ff1122")
.stroke("#000000")
.strokeWidth(10)
.strokeDashArray([1,2])
}
然后在组件中使用:
TypeScript
@Entry
@Component
struct Index {
@Builder bg() {
Polygon({width: "100%", height: "100%"})
.points([[100, 0], [0, 100], [40, 200], [160, 200], [200, 100]])
.fill("#ff1122")
.stroke("#000000")
.strokeWidth(10)
.strokeDashArray([1,2])
}
build() {
Stack({alignContent: Alignment.Center}) {
Image($r('app.media.pic_bed_nurse_in'))
.width(60)
.height(60)
}
.width(200)
.height(200)
.background(this.bg())
}
}
效果如下: