# 8.2:Circle、Ellipse

绘制类的公共属性和全局公共属性类似,它是绘制类组件所独有的属性,合理利用这些独有的属性,可以有效的开发出众多绚丽的UI效果,ArkUI开发框架提供了 8 种绘制类组件。本节笔者简单介绍一下 CircleEllipse 的简单使用。

# 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
  • 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

样例运行结果如下图所示:

8_2_1

# 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
  • 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

样例运行结果如下图所示:

8_2_2

# 8.2.3:小结

本节简单介绍了绘制组件 CirCleEllipse 的使用,读者可以自己在预览器上练习这俩组件其他样式。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2