# 8.2：Circle、Ellipse
绘制类的公共属性和全局公共属性类似，它是绘制类组件所独有的属性，合理利用这些独有的属性，可以有效的开发出众多绚丽的UI效果，ArkUI开发框架提供了 8 种绘制类组件。本节笔者简单介绍一下 Circle 和 Ellipse 的简单使用。
# 8.2.1：Circle
Circle 组件表示绘制一个圆形组件。
# 8.2.1.1：Circle定义介绍
interface Circle extends CircleAttribute<Circle> {
new (value?: { width?: string | number, height?: string | number }): Circle;
(value?: { width?: string | number, height?: string | number }): Circle;
}
declare class CircleAttribute<T> extends CommonShapeMethod<T> {
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- width：设置圆的宽度。
- height：设置圆的高度。
简单样例如下所示：
Circle()
.width(80)
.height(80)
.strokeWidth(3)
.stroke(Color.Red)
Circle()
.width(80)
.height(80)
.strokeWidth(3)
.stroke(Color.Red)
.strokeMiterLimit(5)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeLineCap(LineCapStyle.Butt)
.strokeDashArray([0, 1, 2, 3, 4, 5])
.fill(Color.Gray)
.fillOpacity(0.3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
样例运行结果如下图所示：
# 8.2.2：Ellipse
Ellipse 组件表示绘制椭圆组件。
# 8.2.2.1：Ellipse定义介绍
interface Ellipse extends EllipseAttribute<Ellipse> {
new(value?: { width?: string | number, height?: string | number }): Ellipse;
(value?: { width?: string | number, height?: string | number }): Ellipse;
}
declare class EllipseAttribute<T> extends CommonShapeMethod<T> {
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- width：设置椭圆的宽度。
- height：设置椭圆的高度。
简单样例如下所示：
Ellipse()
.width(130)
.height(80)
.strokeWidth(3)
.stroke(Color.Red)
Ellipse()
.width(130)
.height(80)
.strokeWidth(3)
.stroke(Color.Red)
.strokeMiterLimit(5)
.strokeLineJoin(LineJoinStyle.Miter)
.strokeLineCap(LineCapStyle.Butt)
.strokeDashArray([0, 1, 2, 3, 4, 5])
.fill(Color.Gray)
.fillOpacity(0.3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
样例运行结果如下图所示：
# 8.2.3：小结
本节简单介绍了绘制组件 CirCle 和 Ellipse 的使用，读者可以自己在预览器上练习这俩组件其他样式。
请作者喝杯咖啡
©arkui.club版权所有，禁止私自转发、克隆网站。
