前言
本文基于Api13
前边两篇文章,我们概述了几何图形矩形和圆形,分别使用Rect和Circle两个组件来实现,本篇文章,我们介绍另一个几何图形组件Ellipse,来实现一个椭圆图形。
Ellipse是ArkUI框架中用于绘制椭圆的图形组件,支持填充、描边、透明度调节等基础功能,其核心特性包括,灵活布局,可单独使用或嵌套于Shape父组件中实现复杂矢量图形(类似SVG效果),也支持动态属性,通过状态变量实现动画效果,如颜色渐变、尺寸变化等。
当然了,实现椭圆,我们也可以通过Canvas来绘制,Ellipse组件并不是唯一的选择。
简单案例
实现一个宽200,高100的椭圆,代码如下:
TypeScript
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,背景颜色为粉色的实心椭圆。
TypeScript
Ellipse({ width: 200, height: 100 })
.fill(Color.Pink)
效果如下:
空心椭圆
空心椭圆需要注意,需要把背景颜色设置为透明,也就是fillOpacity属性设置为0。
TypeScript
Ellipse({ width: 200, height: 100 })
.fillOpacity(0)
.stroke(Color.Pink)
效果如下:
以上,你可以使用strokeWidth来设置边框的粗细。
结合Shape组件(矢量效果)
可以通过结合Shape组件实现一些其他的效果,比如通过viewport,来设置形状的视口。
TypeScript
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组件为主。