鸿蒙开发:使用Ellipse绘制椭圆

程序员一鸣
• 阅读 16

前言

本文基于Api13

前边两篇文章,我们概述了几何图形矩形和圆形,分别使用Rect和Circle两个组件来实现,本篇文章,我们介绍另一个几何图形组件Ellipse,来实现一个椭圆图形。

Ellipse是ArkUI框架中用于绘制椭圆的图形组件,支持填充、描边、透明度调节等基础功能,其核心特性包括,灵活布局,可单独使用或嵌套于Shape父组件中实现复杂矢量图形(类似SVG效果),也支持动态属性,通过状态变量实现动画效果,如颜色渐变、尺寸变化等。

当然了,实现椭圆,我们也可以通过Canvas来绘制,Ellipse组件并不是唯一的选择。

简单案例

实现一个宽200,高100的椭圆,代码如下:

Ellipse({ width: 200, height: 100 })

效果如下:

鸿蒙开发:使用Ellipse绘制椭圆

属性详解

首先呢,Ellipse组件支持通用属性,比如宽width,高height等,当然了也支持通用事件,比如点击事件,触摸事件等等,除此之外,也有着自身的属性,比较常见的属性如下:

方法 参数 概述
fill ResourceColor 设置填充区域的颜色
fillOpacity number /string/ Resource 设置填充区域透明度
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 是否开启抗锯齿效果

代码案例

实心椭圆

默认情况下就是实心椭圆,比如,实现一个宽200,高100,背景颜色为粉色的实心椭圆。

Ellipse({ width: 200, height: 100 })
        .fill(Color.Pink)

效果如下:

鸿蒙开发:使用Ellipse绘制椭圆

空心椭圆

空心椭圆需要注意,需要把背景颜色设置为透明,也就是fillOpacity属性设置为0。

Ellipse({ width: 200, height: 100 })
        .fillOpacity(0)
        .stroke(Color.Pink)

效果如下:

鸿蒙开发:使用Ellipse绘制椭圆

以上,你可以使用strokeWidth来设置边框的粗细。

结合Shape组件(矢量效果)

可以通过结合Shape组件实现一些其他的效果,比如通过viewport,来设置形状的视口。

Shape() {
  Ellipse({ width: 200, height: 100 })
    .fillOpacity(0)
    .stroke(Color.Pink)
    .strokeWidth(5)
}
.viewPort({
  x: 0,
  y: 0,
  width: 100,
  height: 50
})

注意事项

Ellipse是一个非常简单的椭圆组件,具体的注意事项到没有什么,但是还有有几个需要注意的,第一个就是版本兼容性,比如,你想在元服务中使用,那么必须在API11及以上,还有就是,在使用strokeDashArray属性的时候,一定要确保参数为数值数组,否则可能报错。

第二个可能就是在性能方面的注意,尽量避免在高频更新的回调中频繁修改Ellipse属性,优先使用@State状态变量驱动变化,针对那些复杂图形建议使用Shape组合多个绘制组件,而非嵌套多层Ellipse。

第三个就是在使用边框的时候,需要把填充的透明度设置为0,方便边框能够展示出来。

相关总结

除了使用Ellipse组件可以一个椭圆之外,我们还可以使用Canvas来绘制一个椭圆,但是相对来说,还是没有Ellipse组件高效,所以,如果说Ellipse组件能够满足需求,还是以Ellipse组件为主。

点赞
收藏
评论区
推荐文章
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轴的半径。
Stella981 Stella981
3年前
OpenCV基础(五)
图形绘制OpenCV提供了直线,矩形,圆,椭圆的绘制函数,下面介绍用法直线绘制:line()函数原型: voidline(InputOutputArrayimg,Pointpt1,Pointpt2,constScalar&color,intth
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轴的半径。
Stella981 Stella981
3年前
Lightning Web Components html_templates(三)
LightningWebComponents强大之处在于模版系统,使用了虚拟dom进行智能高效的组件渲染。使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据数据绑定我们可以使用{property}绑定组件模版属性到一个组件js类中的属性一个简单的例子组件class
京东云开发者 京东云开发者
7个月前
鸿蒙跨端实践-ArkTS和CAPI的混合开发实现
一、背景在文章中,讲述了动态化适配鸿蒙的方案实现,当在鸿蒙系统进行UI渲染的时候,我们使用了系统的组件进行递归渲染。在iOS和Android也是借助各自系统组件进行的渲染,但是在鸿蒙系统会存在以下4个严重问题:1.UI层级过多以金融APP理财频道页中的一个
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Rect绘制矩形
几何矩形,在实际的开发中,有多种的实现方式,并非一定需要Rect组件,但是,如果有需要用到矩形的场景,建议还是使用Rect组件,因为Rect组件自身携带了很多样式属性,可以满足我们日常的不同的需求。
程序员一鸣 程序员一鸣
23小时前
鸿蒙开发:使用Circle绘制圆形
绘制矩形也好,圆形也好,大家做为一个了解即可,在有需要用到的场景中,合理的使用即可,毕竟现成的组件,要比自己用别的方式实现要简单的多。