专业高端网站建设_专业的建站公司服务_自己建网页_整站优化全网营销

目录

一，定义

二，绘制自定义多边形

三，作为其他组件的背景使

一，定义

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轴坐标（相对坐标）。

二，绘制自定义多边形

绘制一个五边形：

@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%")}
}

绘制多边形边框并设置宽度：

@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%")}
}

效果如下：

设置多边形的边框为虚线：

@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：

@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])}

然后在组件中使用： 

@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())}
}

效果如下：