8.3：Line、Path

Line 和 Path 都是线性类绘制组件，它们绘制时的坐标参考系是自身。左上角坐标为（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;
}

• width：设置 Line 组件的宽度。
• height：设置 Line 组件的高度。

简单样例如下所示：

@Entry @Component struct Index {

  build() {
    Column({space: 10}) {
      Line()
        .width(150)
        .height(30)
      Line()
        .width(150)
        .height(30)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
  }
}

@Entry @Component class MyView {

    func build() {
      Column() {
        Line()
          .width(150)
          .height(30)
        Line()
          .width(150)
          .height(30)
          .backgroundColor(0xffc0cb)
      }
      .width(100.percent)
      .height(100.percent)
    }
}

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

8.3.1.2：Line属性介绍

declare class LineAttribute<T> extends CommonShapeMethod<T> {
  startPoint(value: Array<any>): T;
  endPoint(value: Array<any>): T;
}

• startPoint：直线起点坐标。
• endPoint：直线终点坐标。

简单样例如下所示：

@Entry @Component struct Index {

  build() {
    Column({space: 10}) {
      Line()
        .width(150)
        .height(30)
        .startPoint([0, 0])
        .endPoint([150, 30])
        .stroke(Color.Black)
        .backgroundColor(Color.Pink)
      Line()
        .width(150)
        .height(30)
        .startPoint([10, 10])
        .endPoint([120, 20])
        .strokeWidth(3)
        .stroke(Color.Black)
        .backgroundColor(Color.Pink)
      Line()
        .width(150)
        .height(30)
        .startPoint([-10, -10])
        .endPoint([220, 80])
        .stroke(Color.Black)
        .strokeWidth(3)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
  }
}

@Entry @Component class MyView {

    func build() {
      Column(10) {
        Line()
          .width(150)
          .height(30)
          .startPoint((0.0, 0.0))
          .endPoint((150.0, 30.0))
          .stroke(0x000000)
          .backgroundColor(0xffc0cb)
        Line()
          .width(150)
          .height(30)
          .startPoint((10.0, 10.0))
          .endPoint((120.0, 20.0))
          .strokeWidth(3)
          .stroke(0x000000)
          .backgroundColor(0xffc0cb)
        Line()
          .width(150)
          .height(30)
          .startPoint((-10.0, -10.0))
          .endPoint((220.0, 80.0))
          .stroke(0x000000)
          .strokeWidth(3)
          .backgroundColor(0xffc0cb)
      }
      .width(100.percent)
      .height(100.percent)
    }
}

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

📢：当起点或者终点超出 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;
}

• 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;
}

• 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%' })
  }
}

@Entry @Component class MyView {

    func build() {
      Column(10) {
        Path()
          .commands("M0 0 L800 0")
          .stroke(0xffc0cb)
          .strokeWidth(2)

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

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

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

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

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

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

          Path()
            .commands("M 250 50 l 150 300")
            .stroke(0xff0000)
            .strokeWidth(3)

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

          Path()
            .commands("M 100 350 q 150 -300 300 0")
            .stroke(0xff0000)
            .fill(0xffffff)
            .strokeWidth(3)
        }
      }
      .padding(10)
      .width(100.percent)
      .height(100.percent)
    }
}

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

8.3.3：小结

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

(adsbygoogle = window.adsbygoogle || []).push({});