# 8.3:Line、Path

LinePath 都是线性类绘制组件,它们绘制时的坐标参考系是自身。左上角坐标为(0,0),右下角坐标为:(width,height)。

# 8.3.1:Line

Line 组件可以绘制一条直线、虚线。

# 8.3.1.1:Line定义介绍

interface Line extends LineAttribute<Line> {
  (): Line;
  (value?: { width?: string | number, height?: string | number }) :Line;
}
1
2
3
4
  • width:设置 Line 组件的宽度。
  • height:设置 Line 组件的高度。

简单样例如下所示:

Line()
  .width(150)
  .height(30)
Line()
  .width(150)
  .height(30)
  .backgroundColor(Color.Pink)
1
2
3
4
5
6
7

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

8_3_1

# 8.3.1.2:Line属性介绍

declare class LineAttribute<T> extends CommonShapeMethod<T> {
  startPoint(value: Array<any>): T;
  endPoint(value: Array<any>): T;
}
1
2
3
4
  • startPoint:直线起点坐标。
  • endPoint:直线终点坐标。

简单样例如下所示:

Line()
  .width(150)
  .height(30)
  .startPoint([0, 0])
  .endPoint([150, 30])
  .backgroundColor(Color.Pink)
Line()
  .width(150)
  .height(30)
  .startPoint([10, 10])
  .endPoint([120, 20])
  .strokeWidth(3)
  .fill(Color.Red)
  .backgroundColor(Color.Pink)
Line()
  .width(150)
  .height(30)
  .startPoint([-10, -10])
  .endPoint([220, 80])
  .fill(Color.Red)
  .strokeWidth(3)
  .backgroundColor(Color.Pink)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

8_3_2

📢:当起点或者终点超出 Line 的区域时,划线可以出界,针对这种情况笔者已经提 issue 了。

# 8.3.2:Path

SVG 指可伸缩矢量图形(Scalable Vector Graphics),它在放大或者尺寸改变的情况下其图形质量不会有所损失。ArkUI开发框架提供的 Path 组件支持 SVG 的路径绘制,本小节读者需要对 SVG 的语法有了解。

# 8.3.2.1:Path定义介绍

interface PathInterface {
  new (value?: { width?: number | string; height?: number | string; commands?: string }): PathAttribute;
  (value?: { width?: number | string; height?: number | string; commands?: string }): PathAttribute;
}
1
2
3
4
  • width:设置组件的宽度。

  • height:设置组件的高度。

  • commands:绘制路径的命令字符串,目前支持的绘制命令如下:

    • M:设置起点位置,格式:MX Y

      例如M0 20:表示设置路径起点X坐标是0,Y坐标是20。

    • L:设置路径经过的坐标,格式:LX Y

      例如L50 50:表示路径经过(50,50)坐标点。

    • H:设置水平连线,格式:HX

      例如H300:表示在上一个坐标点的基础上再画一条300像素长的水平线。

    • V:设置竖直连线,格式:VX

      例如V300:表示在上一个坐标点的基础上再画一条300像素长的竖直线。

    • C:二阶贝塞尔曲线,格式:CX1 Y1 X2 Y2 X3 Y3

      例如C0 10 20 30 40 50:贝塞尔曲线起点(0,10)终点(40,50)中间经过(20,30)

    • S:三阶贝塞尔曲线,格式:CX1 Y1 X2 Y2

      例如:S10 20 50 50:表示在起点(10,20)和终点(50,50)中间画曲线

    • Q:二阶贝塞尔曲线,格式:QX1 Y1 X2 YX

      例如:Q10 10 50 50,表示以(10,10)为控制点,从当前点绘制到(50,50)的二阶贝塞尔曲线。

    • T:二阶贝塞尔曲线,格式:TX1 Y1

    • A:绘制椭圆弧路径,格式:Arx ry rotate flag sweep x y

      例如:A150 150 0 0 1 150 -150表示椭圆弧所在的椭圆半轴长度都是150,对于坐标系的旋转角度为0度顺时针画取小弧部分,圆弧终点坐标为(150,-150)

    • Z:关闭路径

# 8.3.2.2:Path属性介绍

declare class PathAttribute extends CommonShapeMethod<PathAttribute> {
  commands(value: string): PathAttribute;
}
1
2
3
  • commands:同构造方法 commands 参数。

简单样例如下所示:

@Entry @Component struct Index {
  build() {
    Column({ space: 10 }) {
      Path()
        .commands("M0 0 L800 0")
        .stroke(Color.Pink)
        .strokeWidth(2)

      Path()
        .commands('M150 0 L300 300 L0 300 Z')
        .fill(Color.Pink)

      Path()
        .commands('M0 0 H300 V300 H0 Z')
        .fill(Color.Pink)

      Path()
        .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
        .fill(Color.Pink)

      Path()
        .commands("M0 300 S150 0 300 300 Z")
        .fill(Color.Pink)

      Path()
        .commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
        .fill(Color.Pink)

      Shape() {
        Path()
          .commands("M 100 350 l 150 -300")
          .stroke(Color.Red)
          .strokeWidth(3)

        Path()
          .commands("M 250 50 l 150 300")
          .stroke(Color.Red)
          .strokeWidth(3)

        Path()
          .commands("M 175 200 l 150 0")
          .stroke(Color.Green)
          .strokeWidth(3)

        Path()
          .commands("M 100 350 q 150 -300 300 0")
          .stroke(Color.Blue)
          .fill("#ffffff")
          .strokeWidth(3)
      }
    }
    .padding(10)
    .size({ width: "100%", height: '100%' })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

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

8_3_2_2_1

# 8.3.3:小结

本节简单介绍了 LinePath 的使用,对于 Path 的使用,读者了解一下路径命令即可,正常开发 Path 资源是由 UI 提供的。

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

津公网安备 12011402001367号

津ICP备2020008934号-2