鸿蒙Harmony-多边形绘制组件Polygon使用详解

目录

一，定义

二，绘制自定义多边形

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

一，定义

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

  }
}

效果如下：