Path2D

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

Path2D allows you to describe a path through an existing path. This path can be drawn through the stroke API of Canvas.

addPath

addPath(path: Object): void

Adds a path to this path.

Parameters

Name	Type	Mandatory	Default Value	Description
path	Object	Yes	null	Path to be added to this path.

Example

@Entry
@Component
struct AddPath {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.addPath(this.path2Da)
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001211898520

closePath

closePath(): void

Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.

Example

@Entry
@Component
struct ClosePath {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.moveTo(200, 100)
          this.path2Db.lineTo(300, 100)
          this.path2Db.lineTo(200, 200)
          this.path2Db.closePath()
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001212218482

moveTo

moveTo(x: number, y: number): void

Moves the current coordinate point of the path to the target point, without drawing a line during the movement.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X-coordinate of the target point.
y	number	Yes	0	Y-coordinate of the target point.

Example

@Entry
@Component
struct MoveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.moveTo(50, 100)
          this.path2Db.lineTo(250, 100)
          this.path2Db.lineTo(150, 200)
          this.path2Db.closePath()
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001257138389

lineTo

lineTo(x: number, y: number): void

Draws a straight line from the current point to the target point.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X-coordinate of the target point.
y	number	Yes	0	Y-coordinate of the target point.

Example

@Entry
@Component
struct LineTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.moveTo(100, 100)
          this.path2Db.lineTo(100, 200)
          this.path2Db.lineTo(200, 200)
          this.path2Db.lineTo(200, 100)
          this.path2Db.closePath()
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001256858435

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

Draws a cubic bezier curve on the canvas.

Parameters

Name	Type	Mandatory	Description
cp1x	number	Yes	X-coordinate of the first parameter of the bezier curve.
cp1y	number	Yes	Y-coordinate of the first parameter of the bezier curve.
cp2x	number	Yes	X-coordinate of the second parameter of the bezier curve.
cp2y	number	Yes	Y-coordinate of the second parameter of the bezier curve.
x	number	Yes	X-coordinate of the end point on the bezier curve.
y	number	Yes	Y-coordinate of the end point on the bezier curve.

Example

@Entry
@Component
struct BezierCurveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.moveTo(10, 10)
          this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001257058445

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void

Draws a quadratic curve on the canvas.

Parameters

Name	Type	Mandatory	Description
cpx	number	Yes	X-coordinate of the bezier curve parameter.
cpy	number	Yes	Y-coordinate of the bezier curve parameter.
x	number	Yes	X-coordinate of the end point on the bezier curve.
y	number	Yes	Y-coordinate of the end point on the bezier curve.

Example

@Entry
@Component
struct QuadraticCurveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.moveTo(10, 10)
          this.path2Db.quadraticCurveTo(100, 100, 200, 20)
          this.context.stroke(this.path2Db)
      })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001212058512

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void

Draws an arc on the canvas.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X-coordinate of the center point of the arc.
y	number	Yes	0	Y-coordinate of the center point of the arc.
radius	number	Yes	0	Radius of the arc.
startAngle	number	Yes	0	Start radian of the arc.
endAngle	number	Yes	0	End radian of the arc.
anticlockwise	boolean	No	false	Whether to draw the arc counterclockwise.

Example

@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001212378446

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

Draws an arc based on the radius and points on the arc.

Parameters

Name	Type	Mandatory	Description
x1	number	Yes	X-coordinate of the first point on the arc.
y1	number	Yes	Y-coordinate of the first point on the arc.
x2	number	Yes	X-coordinate of the second point on the arc.
y2	number	Yes	Y-coordinate of the second point on the arc.
radius	number	Yes	Radius of the arc.

Example

@Entry
@Component
struct ArcTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.arcTo(150, 20, 150, 70, 50)
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001212058510

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void

Draws an ellipse in the specified rectangular region.

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X-coordinate of the ellipse center.
y	number	Yes	Y-coordinate of the ellipse center.
radiusX	number	Yes	Ellipse radius on the x-axis.
radiusY	number	Yes	Ellipse radius on the y-axis.
rotation	number	Yes	Rotation angle of the ellipse, in radians.
startAngle	number	Yes	Angle of the start point for drawing the ellipse, in radians.
endAngle	number	Yes	Angle of the end point for drawing the ellipse, in radians.
anticlockwise	number	No	Whether to draw the ellipse in the counterclockwise direction. The value 0 means to draw the ellipse in the clockwise direction, and 1 means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is 0.

Example

@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001257138391

rect

rect(x: number, y: number, width: number, height: number): void

Creates a rectangle.

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X-coordinate of the upper left corner of the rectangle.
y	number	Yes	Y-coordinate of the upper left corner of the rectangle.
width	number	Yes	Width of the rectangle.
height	number	Yes	Height of the rectangle.

Example

@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path2Db: Path2D = new Path2D()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001256978385