鸿蒙Harmony-圆形绘制组件Circle使用详解

目录

一，定义

二，使用案例

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

一，定义

Circle是鸿蒙提供的圆形绘制组件，利用该组件可以绘制圆形背景，圆形图案等

官方提供的参数和属性：

参数：

参数名	参数类型	必填	参数描述
width	string \| number	否	宽度。默认值：0 说明：异常值按照默认值处理。
height	string \| number	否	高度。默认值：0 说明：异常值按照默认值处理。

属性：

名称	类型	默认值	描述
fill	ResourceColor	Color.Black	设置填充区域颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
fillOpacity	number \| string \| Resource	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<any>	\[\]	设置边框间隙。从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卡片中使用。说明： Circle组件无法形成拐角，该属性设置无效。
strokeMiterLimit	number \| string	4	设置斜接长度与边框宽度比值的极限值。从API version 9开始，该接口支持在ArkTS卡片中使用。说明： Circle组件无法设置尖角图形，该属性设置无效。
strokeOpacity	number \| string \| Resource	1	设置边框透明度。默认值：1 从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性的取值范围是 $0.0, 1.0$ ，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。
strokeWidth	Length	1	设置边框宽度。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性若为string类型, 暂不支持百分比，百分比按照1px处理。
antiAlias	boolean	true	是否开启抗锯齿效果。从API version 9开始，该接口支持在ArkTS卡片中使用。

二，使用案例

绘制基本圆形：

TypeScript 复制代码

@Entry
@Component
struct Index {

  build() {
      Stack({alignContent: Alignment.Center}) {
        Circle({width: 60, height: 60})
          .fill("#ff00ff")
      }
      .width("100%")
      .height("100%")

  }
}

效果如下：

添加圆形边框并且设置边框宽度：

TypeScript 复制代码

@Entry
@Component
struct Index {
  build() {
      Stack({alignContent: Alignment.Center}) {
      
        Circle({width: 100, height: 100})
          .fill("#ff00ff")
          .stroke("#000000")
          .strokeWidth(3)
      }
      .width("100%")
      .height("100%")

  }
}

效果如下：

设置边框为虚线：

TypeScript 复制代码

@Entry
@Component
struct Index {

  build() {
      Stack({alignContent: Alignment.Center}) {
       
        Circle({width: 100, height: 100})//设置圆形直径
          .fill("#ff00ff")//设置填充颜色
          .stroke("#000000")//设置边框颜色
          .strokeWidth(3)//设置边框宽度
          .strokeDashArray([1,2])//设置边框虚线
      }
      .width("100%")
      .height("100%")

  }
}

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

在安卓中，可以自定义drawable-xml来作为其他组件的背景，在鸿蒙中，可以将Circle作为其他组件的背景使用。

首先自定义Builder：

TypeScript 复制代码

@Builder bg() {
    Circle({width: "100%", height: "100%"})
      .fill("#ff00ff")
      .stroke("#000000")
      .strokeWidth(3)
      .strokeDashArray([1,2])
  }

然后在组件中使用：

TypeScript 复制代码

@Entry
@Component
struct Index {

  @Builder bg() {
    Circle({width: "100%", height: "100%"})
      .fill("#ff00ff")
      .stroke("#000000")
      .strokeWidth(3)
      .strokeDashArray([1,2])
  }



  build() {
      Stack({alignContent: Alignment.Center}) {
        Image($r('app.media.pic_bed_nurse_in'))
          .width(60)
          .height(60)
          .background(this.bg())//使用背景
      }
      .width("100%")
      .height("100%")

  }
}

效果如下：