鸿蒙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%")

  }
}

效果如下:

相关推荐
SuperHeroWu710 分钟前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩11 分钟前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢2 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4649 小时前
初识ArkUI
harmonyos
SameX10 小时前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠11 小时前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤21 小时前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20051 天前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参