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

  }
}

效果如下:

相关推荐
问道飞鱼8 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰1 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker16 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
DC_BLOG17 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证