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

程序员一鸣
• 阅读 180

前言

本文基于Api13

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

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

Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .borderRadius(100)

效果如下:

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

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

Column()
        .width(100)
        .height(100)
        .border({ width: 1, color: Color.Pink })
        .borderRadius(100)

效果如下:

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

除了以上的实现方式之外,我们还可以通过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的实心圆,代码如下:

      Circle()
        .width(100)
        .height(100)
        .fill(Color.Pink)

效果如下:

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

绘制空心圆

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

Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)

效果如下:

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

边框间隙

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

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

效果如下:

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

相关总结

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

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
Java 在PDF文档中绘制图形
本篇文档将介绍通过Java编程在PDF文档中绘制图形的方法。包括绘制矩形、椭圆形、不规则多边形、线条、弧线、曲线、扇形等等。针对方法中提供的思路,也可以自行变换图形设计思路,如菱形、梯形或者组合图形等。使用工具:FreeSpire.PDFforJava(免费版)(https://www.oschina.net/action/GoToLi
Stella981 Stella981
3年前
SVG 绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Easter79 Easter79
3年前
SVG 绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Easter79 Easter79
3年前
SVG 如何绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
Stella981 Stella981
3年前
SVG 如何绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。
GeorgeGcs GeorgeGcs
1星期前
【HarmonyOS 5】鸿蒙实现手写板
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言实现一个手写板功能,基本思路如下:创建一个可交互的组件,用户在屏幕上触摸并移动手指时,会根据触摸的位置动态生成路径,并使用黑色描边绘制在屏幕上。当用户按下屏幕时,记录按下点的坐标作
陈杨 陈杨
3个月前
鸿蒙原生绘图API:从基础到高阶的绘制之旅(进阶版)
家人们,还记得上次一起探索的鸿蒙绘图API基础用法吗?上手是不是特别容易!今天,咱们就接着深入,开启进阶版的学习,解锁更多复杂又炫酷的绘图技能,让你的鸿蒙应用界面直接“出圈”!我将结合实际开发场景,丰富绘制路径、圆角矩形、绘制图片、画笔与画刷、裁剪区域设置
程序员一鸣 程序员一鸣
3个月前
鸿蒙开发:使用Rect绘制矩形
几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。
程序员一鸣 程序员一鸣
4星期前
鸿蒙开发:了解@Builder装饰器
@Builder装饰是鸿蒙UI开发中,非常重要的一个装饰器,在实际的开发中,合理且正确的使用,能够让我们的代码更加的简洁,有两点需要注意,一是,是用私有还是全局,取决于当前的组件的复用机制,如果多个页面都使用了,建议以全局为主;二是传参的动态更新,有更新就使用引用参数传递,没有更新按值传递即可。
程序员一鸣 程序员一鸣
1星期前
鸿蒙元服务项目实战:备忘录UI页面开发
UI页面绘制没什么好说的,就是组件的位置摆放,和组件的显示逻辑,有很多的属性并没有文章记录,大家可以去仓库中查看即可,文章中用到了我的一个标题栏组件,如果大家不想用,可以使用自己写的即可。