鸿蒙开发:使用Circle绘制圆形

前言

本文基于Api13

上篇文章,我们使用Rect组件实现了矩形效果,本篇文章,我们继续探究几何图形的中圆形,实现矩形有多种形式,同样,圆形,也是有多种形式,在上篇的文章中也简单的做了几个案例,比如,我们要实现一个半径50的实心圆形,如何实现呢?

很简单,我们可以通过borderRadius属性来实现,搭配backgroundColor,代码案例如下:

TypeScript 复制代码
Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .borderRadius(100)

效果如下:

以上是一个实心的填充,如果要实现边框轮廓,也就是圆环效果呢,只需要把backgroundColor改为border即可。

TypeScript 复制代码
Column()
        .width(100)
        .height(100)
        .border({ width: 1, color: Color.Pink })
        .borderRadius(100)

效果如下:

除了以上的实现方式之外,我们还可以通过Canvas来绘制,不过本篇文章采取另一种的实现方式,那就是Circle圆形组件。

Circle圆形组件

Circle,是用于绘制圆形的组件,和Rect组件一样,也是提供了很多了属性和方法,可以实现不同的效果。

名称 类型 必填 说明
width string /number 宽度,取值范围≥0。
height string /number 高度,取值范围≥0。

除了属性之外,也支持以下的方法:

方法 参数 概述
fill ResourceColor 填充区域颜色。默认值:Color.Black
fillOpacity number /string/ Resource 填充区域透明度。默认值:1
stroke ResourceColor 边框颜色。
strokeDashArray Array<any> 设置边框间隙。取值范围≥0
strokeDashOffset number/string 边框绘制起点的偏移量
strokeLineCap LineCapStyle 边框端点绘制样式
strokeLineJoin LineJoinStyle 边框拐角绘制样式
strokeMiterLimit number/string 斜接长度与边框宽度比值的极限值
strokeOpacity number/string/Resource 边框透明度
strokeWidth Length 边框宽度,取值范围≥0
antiAlias boolean 是否开启抗锯齿效果

绘制实心圆

绘制一个实心圆,通过fill属性设置,比如,实现一个直径为100的实心圆,代码如下:

TypeScript 复制代码
      Circle()
        .width(100)
        .height(100)
        .fill(Color.Pink)

效果如下:

绘制空心圆

空心圆,需要注意,必须要设置fillOpacity属性,否则不生效;比如,设置一个半径为100,边框为5的圆环:

TypeScript 复制代码
Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)

效果如下:

边框间隙

我们可以通过属性strokeDashArray设置我们的绘制间隙,代码案例如下:

TypeScript 复制代码
 Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)
        .strokeDashArray([1, 2])

效果如下:

相关总结

绘制矩形也好,圆形也好,大家做为一个了解即可,在有需要用到的场景中,合理的使用即可,毕竟现成的组件,要比自己用别的方式实现要简单的多。

相关推荐
万少5 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划39 分钟前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
还鮟1 小时前
CTF Web的数组巧用
android
点金石游戏出海2 小时前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
HMS Core3 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡3 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说3 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
小蜜蜂嗡嗡3 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi003 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体
90后的晨仔4 小时前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios