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

myzbx 2025-04-26 19:41 4 浏览

前言

本文基于Api13

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

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

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

简单案例

实现一个宽200，高100的椭圆，代码如下：

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

效果如下：

属性详解

首先呢，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)

效果如下：

空心椭圆

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

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

效果如下：

以上，你可以使用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绘制椭圆

前言

简单案例

属性详解

代码案例

实心椭圆

空心椭圆

结合Shape组件（矢量效果）

注意事项

相关总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」