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

程序员一鸣
• 阅读 17

前言

本文基于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轴的半径。
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Ellipse绘制椭圆
除了使用Ellipse组件可以一个椭圆之外,我们还可以使用Canvas来绘制一个椭圆,但是相对来说,还是没有Ellipse组件高效,所以,如果说Ellipse组件能够满足需求,还是以Ellipse组件为主。
少湖说 少湖说
4个月前
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha
少湖说 少湖说
4个月前
鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙
鸿蒙Flutter实战:现有Flutter项目支持鸿蒙背景原来使用Flutter开发的项目,需要适配鸿蒙。环境搭建见文章[鸿蒙Flutter适配指南],搭建开发环境,使用fvm管理多版本SDK。模块化原有项目保持模块化,拆分为apps/common/com
陈杨 陈杨
1星期前
鸿蒙原生绘图API:从基础到高阶的绘制之旅(进阶版)
家人们,还记得上次一起探索的鸿蒙绘图API基础用法吗?上手是不是特别容易!今天,咱们就接着深入,开启进阶版的学习,解锁更多复杂又炫酷的绘图技能,让你的鸿蒙应用界面直接“出圈”!我将结合实际开发场景,丰富绘制路径、圆角矩形、绘制图片、画笔与画刷、裁剪区域设置
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Rect绘制矩形
几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。