Path

The <Path> component is used to define a closed shape.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

Path(value?: { width?: number | string; height?: number | string; commands?: string })

Parameters

Attributes

In addition to the universal attributes, the following attributes are supported.

The supported commands are as follows:

For example, commands('M0 20 L50 50 L50 100 Z') defines a triangle that starts from position (0, 20), by drawing a line from point (0, 20) to point (50, 50), then a line from point (50, 50) to point (50, 100), and finally a line from point (50, 100) to point (0, 20).

Example

// xxx.ets
@Entry
@Component
struct PathExample {
  build() {
    Column({ space: 10 }) {
      Text('Straight line')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // Draw a straight line whose length is 900 px and width is 3 vp.
      Path()
        .width(300)
        .height(10)
        .commands('M0 0 L900 0')
        .stroke(Color.Black)
        .strokeWidth(3)

      Text('Straight line graph')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // Draw a straight line.
      Row({ space: 20 }) {
        Path()
          .width(100)
          .height(100)
          .commands('M150 0 L300 300 L0 300 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width(100)
          .height(100)
          .commands('M0 0 H300 V300 H0 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width(100)
          .height(100)
          .commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }.width('100%')

      Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // Draw an arc.
      Row({ space: 20 }) {
        Path()
          .width(100)
          .height(100)
          .commands("M0 300 S150 0 300 300 Z")
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width(100)
          .height(100)
          .commands('M0 150 C0 150 150 0 300 150 L150 300 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
        Path()
          .width(100)
          .height(100)
          .commands('M0 200 A30 20 20 0 0 250 200 Z')
          .fillOpacity(0)
          .stroke(Color.Black)
          .strokeWidth(3)
      }
    }.width('100%')
    .margin({ top: 5 })
  }
}