Class (Path)

A compound geometric path consisting of line segments, arcs, quadratic Bezier curves, and cubic Bezier curves.

NOTE

The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.

This module uses the physical pixel unit, px.

The module operates under a single-threaded model. The caller needs to manage thread safety and context state transitions.

Modules to Import

import { drawing } from '@kit.ArkGraphics2D';

constructor¹²⁺

constructor()

Constructs a path.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();

constructor¹²⁺

constructor(path: Path)

Constructs a copy of an existing path.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
path	Path	Yes	Path to copy.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
path.lineTo(700, 0);
path.close();
let path1: drawing.Path =  new drawing.Path(path);

set²⁰⁺

set(src: Path): void

Updates the existing path with another path.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
src	Path	Yes	Path for the update.

Example

import { drawing } from '@kit.ArkGraphics2D';
let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
path.lineTo(700, 0);
path.close();
let path1: drawing.Path = new drawing.Path();
path1.set(path);

moveTo

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

Sets the start point of this path.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate of the start point. The value is a floating point number.
y	number	Yes	Y coordinate of the start point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);

lineTo

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

Draws a line segment from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate of the target point. The value is a floating point number.
y	number	Yes	Y coordinate of the target point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.lineTo(10, 15);

arcTo

arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void

Draws an arc to this path using angle arc mode. This mode first defines a rectangle and takes its inscribed ellipse. Then, it specifies a start angle and a sweep angle. The arc is the portion of the ellipse's circumference defined by the start angle and the sweep angle. By default, a line segment from the last point of the path to the start point of the arc is also added.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x1	number	Yes	X coordinate of the upper left corner of the rectangle. The value is a floating point number.
y1	number	Yes	Y coordinate of the upper left corner of the rectangle. The value is a floating point number.
x2	number	Yes	X coordinate of the lower right corner of the rectangle. The value is a floating point number.
y2	number	Yes	Y coordinate of the lower right corner of the rectangle. The value is a floating point number.
startDeg	number	Yes	Start angle. The start direction (0°) of the angle is the positive direction of the X axis.
sweepDeg	number	Yes	Angle to sweep, in degrees. A positive value indicates a clockwise sweep, and a negative value indicates a counterclockwise sweep. The actual swipe degree is the modulo operation result of the input parameter by 360.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.arcTo(10, 15, 10, 10, 10, 10);

quadTo

quadTo(ctrlX: number, ctrlY: number, endX: number, endY: number): void

Draws a quadratic Bezier curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
ctrlX	number	Yes	X coordinate of the control point. The value is a floating point number.
ctrlY	number	Yes	Y coordinate of the control point. The value is a floating point number.
endX	number	Yes	X coordinate of the target point. The value is a floating point number.
endY	number	Yes	Y coordinate of the target point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.quadTo(10, 15, 10, 10);

conicTo¹²⁺

conicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void

Draws a conic curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
ctrlX	number	Yes	X coordinate of the control point. The value is a floating point number.
ctrlY	number	Yes	Y coordinate of the control point. The value is a floating point number.
endX	number	Yes	X coordinate of the target point. The value is a floating point number.
endY	number	Yes	Y coordinate of the target point. The value is a floating point number.
weight	number	Yes	Weight of the curve, which determines its shape. The larger the value, the closer of the curve to the control point. If the value is less than or equal to 0, this API has the same effect as lineTo. If the value is 1, it has the same effect as quadTo. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.conicTo(200, 400, 100, 200, 0);

cubicTo

cubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void

Draws a cubic Bezier curve from the last point of this path to the target point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
ctrlX1	number	Yes	X coordinate of the first control point. The value is a floating point number.
ctrlY1	number	Yes	Y coordinate of the first control point. The value is a floating point number.
ctrlX2	number	Yes	X coordinate of the second control point. The value is a floating point number.
ctrlY2	number	Yes	Y coordinate of the second control point. The value is a floating point number.
endX	number	Yes	X coordinate of the target point. The value is a floating point number.
endY	number	Yes	Y coordinate of the target point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.cubicTo(100, 100, 80, 150, 300, 150);

rMoveTo¹²⁺

rMoveTo(dx: number, dy: number): void

Sets the start position relative to the last point of this path. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
dx	number	Yes	X offset of the start point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
dy	number	Yes	Y offset of the start point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.rMoveTo(10, 10);

rLineTo¹²⁺

rLineTo(dx: number, dy: number): void

Draws a line segment from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
dx	number	Yes	X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
dy	number	Yes	Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.rLineTo(400, 200);

rQuadTo¹²⁺

rQuadTo(dx1: number, dy1: number, dx2: number, dy2: number): void

Draws a quadratic Bezier curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
dx1	number	Yes	X offset of the control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
dy1	number	Yes	Y offset of the control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.
dx2	number	Yes	X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
dy2	number	Yes	Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.rQuadTo(100, 0, 0, 200);

rConicTo¹²⁺

rConicTo(ctrlX: number, ctrlY: number, endX: number, endY: number, weight: number): void

Draws a conic curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
ctrlX	number	Yes	X offset of the control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
ctrlY	number	Yes	Y offset of the control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.
endX	number	Yes	X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
endY	number	Yes	Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.
weight	number	Yes	Weight of the curve, which determines its shape. The larger the value, the closer of the curve to the control point. If the value is less than or equal to 0, this API is equivalent to rLineTo, that is, adding a line segment from the last point of the path to the target point. If the value is 1, this API is equivalent to rQuadTo. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.rConicTo(200, 400, 100, 200, 0);

rCubicTo¹²⁺

rCubicTo(ctrlX1: number, ctrlY1: number, ctrlX2: number, ctrlY2: number, endX: number, endY: number): void

Draws a cubic Bezier curve from the last point of this path to a point relative to the last point. If the path is empty, the start point (0, 0) is used.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
ctrlX1	number	Yes	X offset of the first control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
ctrlY1	number	Yes	Y offset of the first control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.
ctrlX2	number	Yes	X offset of the second control point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
ctrlY2	number	Yes	Y offset of the second control point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.
endX	number	Yes	X offset of the target point relative to the last point. A positive number indicates a rightward shift from the last point, and a negative number indicates a leftward shift from the last point. The value is a floating point number.
endY	number	Yes	Y offset of the target point relative to the last point. A positive number indicates an upward shift from the last point, and a negative number indicates a downward shift from the last point. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.rCubicTo(200, 0, 0, 200, -20, 0);

addArc¹²⁺

addArc(rect: common2D.Rect, startAngle: number, sweepAngle: number): void

Adds an arc to this path.

When startAngle and sweepAngle meet the following conditions, an oval instead of an arc is added:

The result of startAngle modulo 90 is close to 0.
The value of sweepAngle is not in the range of (-360, 360).

In other cases, this API adds an arc by applying the result of sweepAngle modulo 360 to the path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
rect	common2D.Rect	Yes	Rectangular boundary that encapsulates the oval including the arc.
startAngle	number	Yes	Start angle of the arc, in degrees. The value 0 indicates the positive direction of the X axis. The value is a floating point number.
sweepAngle	number	Yes	Angle to sweep, in degrees. A positive value indicates a clockwise sweep, and a negative value indicates a counterclockwise sweep. The value is a floating point number.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
path.addArc(rect, 90, 180);

addCircle¹²⁺

addCircle(x: number, y: number, radius: number, pathDirection?: PathDirection): void

Adds a circle to this path in the specified direction. The start point of the circle is (x + radius, y).

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate of the center of the circle. The value is a floating point number.
y	number	Yes	Y coordinate of the center of the circle. The value is a floating point number.
radius	number	Yes	Radius of the circle. The value is a floating point number. If the value is less than or equal to 0, there is no effect.
pathDirection	PathDirection	No	Direction of the path. The default direction is clockwise.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.

Example


import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.addCircle(100, 200, 50, drawing.PathDirection.CLOCKWISE);

addOval¹²⁺

addOval(rect: common2D.Rect, start: number, pathDirection?: PathDirection): void

Adds the inscribed ellipse of a rectangle to this path in the specified direction.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
rect	common2D.Rect	Yes	Rectangular boundary of the oval.
start	number	Yes	Start point of the oval, where 0, 1, 2, and 3 correspond to the upper, right, lower, and left points, respectively. The value is an integer greater than or equal to 0. If the value is greater than or equal to 4, the remainder of 4 is used.
pathDirection	PathDirection	No	Direction of the path. The default direction is clockwise.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
path.addOval(rect, 5, drawing.PathDirection.CLOCKWISE);

addRect¹²⁺

addRect(rect: common2D.Rect, pathDirection?: PathDirection): void

Adds a rectangle to a path in the specified direction. The start point is the upper left corner of the rectangle.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
rect	common2D.Rect	Yes	Rectangle.
pathDirection	PathDirection	No	Direction of the path. The default direction is clockwise.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
path.addRect(rect, drawing.PathDirection.CLOCKWISE);

addRoundRect¹²⁺

addRoundRect(roundRect: RoundRect, pathDirection?: PathDirection): void

Adds a rounded rectangle to a path in the specified direction. When the path direction is clockwise, the start point is at the intersection of the rounded rectangle's left boundary and its lower left corner. When the path direction is counterclockwise, the start point is at the intersection point between the left boundary and the upper left corner.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
roundRect	RoundRect	Yes	Rounded rectangle.
pathDirection	PathDirection	No	Direction of the path. The default direction is clockwise.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
let roundRect = new drawing.RoundRect(rect, 50, 50);
path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE);

addPath¹²⁺

addPath(path: Path, matrix?: Matrix|null): void

Transforms the points in a path by a matrix and stores the resulting path in the current Path object.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
path	Path	Yes	Source Path object.
matrix	Matrix\|null	No	Matrix object. The default value is an identity matrix.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
let matrix = new drawing.Matrix();
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
let roundRect = new drawing.RoundRect(rect, 50, 50);
path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE);
let dstPath = new drawing.Path();
dstPath.addPath(path, matrix);

transform¹²⁺

transform(matrix: Matrix): void

Transforms the points in a path by matrix.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
matrix	Matrix	Yes	Matrix object.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
let matrix = new drawing.Matrix();
matrix.setScale(1.5, 1.5, 10, 10);
const rect: common2D.Rect = {left:100, top:100, right:500, bottom:500};
let roundRect = new drawing.RoundRect(rect, 50, 50);
path.addRoundRect(roundRect, drawing.PathDirection.CLOCKWISE);
path.transform(matrix);

contains¹²⁺

contains(x: number, y: number): boolean

Checks whether a coordinate point is included in this path. For details, see PathFillType.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate. The value is a floating point number.
y	number	Yes	Y coordinate. The value is a floating point number.

Returns

Type	Description
boolean	Check result. The value true means that the coordinate point is included in the path, and false means the opposite.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
let rect : common2D.Rect = {left: 50, top: 50, right: 250, bottom: 250};
path.addRect(rect, drawing.PathDirection.CLOCKWISE);
console.info("test contains: " + path.contains(0, 0));
console.info("test contains: " + path.contains(60, 60));

setLastPoint²⁰⁺

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

Sets the last point of a path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate of a point. The value is a floating point number. 0 indicates the coordinate origin. A positive value places the point to the right of the coordinate origin, while a negative value places the point to the left.
y	number	Yes	Y coordinate of a point. The value is a floating point number. 0 indicates the coordinate origin. A positive value places the point below the coordinate origin, while a negative value places the point above the coordinate origin.

Example

import { drawing } from '@kit.ArkGraphics2D';
const path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
let isEmpty = path.isEmpty();
console.info('isEmpty:', isEmpty);
path.reset();
isEmpty = path.isEmpty();
console.info('isEmpty:', isEmpty);
path.setLastPoint(50, 50);
isEmpty = path.isEmpty();
console.info('isEmpty:', isEmpty);

setFillType¹²⁺

setFillType(pathFillType: PathFillType): void

Sets the fill type of this path. The fill type determines how "inside" of the path is drawn. For example, when the fill type Winding is used, "inside" of the path is determined by a non-zero sum of signed edge crossings. When EvenOdd is used, "inside" of the path is determined by an odd number of edge crossings.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
pathFillType	PathFillType	Yes	Fill type of the path.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: 1. Mandatory parameters are left unspecified;2. Incorrect parameter types; 3. Parameter verification failed.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.setFillType(drawing.PathFillType.WINDING);

getFillType²⁰⁺

getFillType(): PathFillType

Obtains the fill type of a path.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
PathFillType	Fill type of a path.

Example

import { drawing } from '@kit.ArkGraphics2D';
const path = new drawing.Path();
path.setFillType(drawing.PathFillType.WINDING);
let type = path.getFillType();
console.info("type :" + type);

getBounds¹²⁺

getBounds(): common2D.Rect

Obtains the minimum bounding rectangle that encloses this path.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
common2D.Rect	Minimum bounding rectangle.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.lineTo(50, 40)
let rect : common2D.Rect = {left: 0, top: 0, right: 0, bottom: 0};
rect = path.getBounds();
console.info("test rect.left: " + rect.left);
console.info("test rect.top: " + rect.top);
console.info("test rect.right: " + rect.right);
console.info("test rect.bottom: " + rect.bottom);

addPolygon¹²⁺

addPolygon(points: Array<common2D.Point>, close: boolean): void

Adds a polygon to this path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
points	Array<common2D.Point>	Yes	Array that holds the vertex coordinates of the polygon.
close	boolean	Yes	Whether to close the path, that is, whether to add a line segment from the start point to the end point of the path. The value true means to close the path, and false means the opposite.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let pointsArray = new Array<common2D.Point>();
const point1: common2D.Point = { x: 200, y: 200 };
const point2: common2D.Point = { x: 400, y: 200 };
const point3: common2D.Point = { x: 100, y: 400 };
const point4: common2D.Point = { x: 300, y: 400 };
pointsArray.push(point1);
pointsArray.push(point2);
pointsArray.push(point3);
pointsArray.push(point4);
const path = new drawing.Path();
path.addPolygon(pointsArray, false);

offset¹²⁺

offset(dx: number, dy: number): Path

Offsets this path by specified distances along the X axis and Y axis and stores the resulting path in the Path object returned.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
dx	number	Yes	X offset. A positive number indicates an offset towards the positive direction of the X axis, and a negative number indicates an offset towards the negative direction of the X axis. The value is a floating point number.
dy	number	Yes	Y offset. A positive number indicates an offset towards the positive direction of the Y axis, and a negative number indicates an offset towards the negative direction of the Y axis. The value is a floating point number.

Returns

Type	Description
Path	New path generated.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
path.moveTo(200, 200);
path.lineTo(300, 300);
const dst = path.offset(200, 200);

op¹²⁺

op(path: Path, pathOp: PathOp): boolean

Combines this path with the passed-in path based on the specified operation mode.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
path	Path	Yes	Path object, which will be combined with the current path.
pathOp	PathOp	Yes	Defines an enum for the operation modes available for a path.

Returns

Type	Description
boolean	Result of the path combination result. The value true means that the path combination is successful, and false means the opposite.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed.

Example

import { drawing } from '@kit.ArkGraphics2D';

const path = new drawing.Path();
const path2 = new drawing.Path();
path.addCircle(100, 200, 100, drawing.PathDirection.CLOCKWISE);
console.info("get pathOp: ", path2.op(path, drawing.PathOp.DIFFERENCE));

close

close(): void

Closes this path by adding a line segment from the start point to the last point of the path.

System capability: SystemCapability.Graphics.Drawing

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.cubicTo(10, 10, 10, 10, 15, 15);
path.close();

reset

reset(): void

Resets the path data.

System capability: SystemCapability.Graphics.Drawing

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.cubicTo(10, 10, 10, 10, 15, 15);
path.reset();

rewind²⁰⁺

rewind(): void

Rewinds a path by clearing all its points and lines but reserves the memory space.

System capability: SystemCapability.Graphics.Drawing

Example

import { drawing } from '@kit.ArkGraphics2D';
let path = new drawing.Path();
path.moveTo(10,10);
path.lineTo(20,20);
path.rewind();
let empty = path.isEmpty();
console.info('empty : ', empty);

isEmpty²⁰⁺

isEmpty(): boolean

Checks whether a path is empty.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
boolean	Whether a path is empty. true means yes; false otherwise.

Example

import { drawing } from '@kit.ArkGraphics2D';
let path = new drawing.Path();
path.moveTo(10,10);
path.lineTo(20,20);
let isEmpty = path.isEmpty();
console.info('isEmpty:', isEmpty);

isRect²⁰⁺

isRect(rect: common2D.Rect|null): boolean

Checks whether a path forms a rectangle.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
rect	common2D.Rect\|null	Yes	Rectangle object, which is used as an output parameter. If the path forms a rectangle, the rectangle object is overwritten with the rectangle represented by the path. Otherwise, the rectangle object remains unchanged. The value can be null, indicating that the rectangle represented by the path does not need to be obtained.

Returns

Type	Description
boolean	Whether a path forms a rectangle. true means yes; false otherwise.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.moveTo(10,10);
path.lineTo(20,10);
let isRect = path.isRect(null);
console.info("isRect: ", isRect);
let rect: common2D.Rect = { left : 100, top : 100, right : 400, bottom : 500 };
path.lineTo(20, 20);
path.lineTo(10, 20);
path.lineTo(10, 10);
isRect = path.isRect(rect);
console.info('isRect: ', isRect);

getLength¹²⁺

getLength(forceClosed: boolean): number

Obtains the path length.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
forceClosed	boolean	Yes	Whether the path is measured as a closed path. The value true means that the path is considered closed during measurement, and false means that the path is measured based on the actual closed status.

Returns

Type	Description
number	Path length.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path = new drawing.Path();
path.arcTo(20, 20, 180, 180, 180, 90);
let len = path.getLength(false);
console.info("path length = " + len);

getPositionAndTangent¹²⁺

getPositionAndTangent(forceClosed: boolean, distance: number, position: common2D.Point, tangent: common2D.Point): boolean

Obtains the coordinates and tangent at a distance from the start point of this path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
forceClosed	boolean	Yes	Whether the path is measured as a closed path. The value true means that the path is considered closed during measurement, and false means that the path is measured based on the actual closed status.
distance	number	Yes	Distance from the start point. If a negative number is passed in, the value 0 is used. If a value greater than the path length is passed in, the path length is used. The value is a floating point number.
position	common2D.Point	Yes	Coordinates obtained.
tangent	common2D.Point	Yes	Tangent obtained, where tangent.x and tangent.y represent the cosine and sine of the tangent of the point, respectively.

Returns

Type	Description
boolean	Check result. The value true means that they are obtained, and false means the opposite. The values of position and tangent are not changed.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types.

Example

import { common2D, drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
path.lineTo(700, 0);
let position: common2D.Point = { x: 0.0, y: 0.0 };
let tangent: common2D.Point = { x: 0.0, y: 0.0 };
if (path.getPositionAndTangent(false, 0.1, position, tangent)) {
  console.info("getPositionAndTangent-----position:  "+ position.x);
  console.info("getPositionAndTangent-----position:  "+ position.y);
  console.info("getPositionAndTangent-----tangent:  "+ tangent.x);
  console.info("getPositionAndTangent-----tangent:  "+ tangent.y);
}

getSegment¹⁸⁺

getSegment(forceClosed: boolean, start: number, stop: number, startWithMoveTo: boolean, dst: Path): boolean

Extracts a segment of a path and appends it to a destination path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
forceClosed	boolean	Yes	Whether the path is measured as a closed path. The value true means that the path is considered closed during measurement, and false means that the path is measured based on the actual closed status.
start	number	Yes	Distance from the start point of the path to the start point of the segment. If it is less than 0, it defaults to 0. If it is greater than or equal to stop, the extraction fails. The value is a floating point number.
stop	number	Yes	Distance from the start point of the path to the end point of the segment. If it is less than or equal to start, the extraction fails. If it is greater than the path length, it defaults to the path length. The value is a floating point number.
startWithMoveTo	boolean	Yes	Whether to execute moveTo in the destination path to move to its start point. The value true means to move to the start point, and false means the opposite.
dst	Path	Yes	Destination path. If the extraction succeeds, the segment is appended to the path. If the extraction fails, nothing changes.

Returns

Type	Description
boolean	Extraction result. The value true means that the extraction is successful, and false means the opposite.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
path.lineTo(700, 0);
let dstPath: drawing.Path = new drawing.Path();
console.info("getSegment-----result:  "+ path.getSegment(true, 10.0, 20.0, true, dstPath));

isClosed¹²⁺

isClosed(): boolean

Checks whether a path is closed.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
boolean	Check result. The value true means that the path is closed, and false means the opposite.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(0, 700);
if (path.isClosed()) {
  console.info("path is closed.");
} else {
  console.info("path is not closed.");
}

getMatrix¹²⁺

getMatrix(forceClosed: boolean, distance: number, matrix: Matrix, flags: PathMeasureMatrixFlags): boolean

Obtains a transformation matrix at a specific position along the path, which represents the coordinates and orientation of that point.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
forceClosed	boolean	Yes	Whether the path is measured as a closed path. The value true means that the path is considered closed during measurement, and false means that the path is measured based on the actual closed status.
distance	number	Yes	Distance from the start point. If a negative number is passed in, the value 0 is used. If a value greater than the path length is passed in, the path length is used. The value is a floating point number.
matrix	Matrix	Yes	Matrix object used to store the matrix obtained.
flags	PathMeasureMatrixFlags	Yes	Type of the matrix information obtained.

Returns

Type	Description
boolean	Whether the transformation matrix is obtained. The value true indicates that the operation is successful, and false indicates the opposite.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: Mandatory parameters are left unspecified.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
let matrix = new drawing.Matrix();
if(path.getMatrix(false, 10, matrix, drawing.PathMeasureMatrixFlags.GET_TANGENT_MATRIX)) {
  console.info("path.getMatrix return true");
} else {
  console.info("path.getMatrix return false");
}

buildFromSvgString¹²⁺

buildFromSvgString(str: string): boolean

Parses the path represented by an SVG string.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
str	string	Yes	String in SVG format, which is used to describe the path.

Returns

Type	Description
boolean	Result of the parsing operation. The value true means that the operation is successful, and false means the opposite.

Error codes

For details about the error codes, see Universal Error Codes.

ID	Error Message
401	Parameter error. Possible causes: Mandatory parameters are left unspecified.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
let svgStr: string =  "M150 100 L75 300 L225 300 Z";
if(path.buildFromSvgString(svgStr)) {
  console.info("buildFromSvgString return true");
} else {
  console.info("buildFromSvgString return false");
}

getPathIterator¹⁸⁺

getPathIterator(): PathIterator

Obtains the operation iterator of this path.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
PathIterator	Iterator object of the path.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
let iter = path.getPathIterator();

approximate²⁰⁺

approximate(acceptableError: number): Array<number>

Converts the existing path into an approximate path consisting of consecutive line segments.

NOTE

Avoid setting acceptableError to 0 as it heavily divides the curve path, significantly impacting performance and memory usage.

Setting a high acceptableError simplifies the path greatly by keeping only essential points, potentially distorting the original shape.

When you set a high acceptableError for curves such as ellipses, the fitting process often simplifies them to polygons by keeping just the start and end points of their Bezier curve segments.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
acceptableError	number	Yes	Acceptable error of each line segment on a path. The value is a floating point number. If the value is less than 0, an error is reported.

Returns

Type	Description
Array<number>	An array of points in the approximate path, which contains at least two points. Each point consists of three values: 1. Length ratio of the point to the start point of the path. The value range is [0.0, 1.0]. 2. X coordinate of a point. 3. Y coordinate of a point.

Error codes

For details about the following error code, see Drawing and Display Error Codes.

ID	Error Message
25900001	Parameter error.Possible causes: Incorrect parameter range.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(100, 100);
path.lineTo(500, 500);
let points: number[] = path.approximate(0.5);
for (let i = 0; i < points.length; i += 3) {
  console.info("PathApproximate Fraction =" + points[i] + ", X =" + points[i + 1] + ", Y =" + points[i + 2] + "\n");
}

interpolate²⁰⁺

interpolate(other: Path, weight: number, interpolatedPath: Path): boolean

Interpolates between the existing path and another path based on the given weight and stores the result in the target path object. Interpolation is achievable if the two paths have the same number of points. The target path is created based on the structure of the existing path.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
other	Path	Yes	Another path object.
weight	number	Yes	Interpolation weight, which must be within the range of [0.0, 1.0]. The value is a floating point number.
interpolatedPath	Path	Yes	Target path object used to store the interpolation result.

Returns

Type	Description
boolean	Whether interpolation is successful. true means yes; false otherwise.

Error codes

For details about the following error code, see Drawing and Display Error Codes.

ID	Error Message
25900001	Parameter error.Possible causes: Incorrect parameter range.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(50, 50);
path.lineTo(100, 100);
path.lineTo(200, 200);
let other: drawing.Path = new drawing.Path();
other.moveTo(80, 80);
other.lineTo(300, 300);
let interpolatedPath: drawing.Path = new drawing.Path();
if (path.interpolate(other, 0.0, interpolatedPath)) {
  console.info('interpolate return true');
} else {
  console.info('interpolate return false');
}

isInterpolate²⁰⁺

isInterpolate(other: Path): boolean

Checks whether the existing path and another path are compatible for interpolation in terms of structure and operation sequence. If the paths contain conic operations, the weight values of the operations must be the same.

System capability: SystemCapability.Graphics.Drawing

Parameters

Name	Type	Mandatory	Description
other	Path	Yes	Another path object.

Returns

Type	Description
boolean	Whether the existing path and another path are compatible for interpolation. true means yes; false otherwise.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.moveTo(0, 0);
path.lineTo(100, 100);
let other: drawing.Path = new drawing.Path();
other.moveTo(0, 1);
other.lineTo(200, 200);
if (path.isInterpolate(other)) {
  console.info('isInterpolate return true');
} else {
  console.info('isInterpolate return false');
}

isInverseFillType²³⁺

isInverseFillType(): boolean

Checks whether the current path fill type is the inverse fill type. For example, the fill types Winding and EvenOdd are not inverse types, while InverseWinding and InverseEvenOdd are inverse types.

System capability: SystemCapability.Graphics.Drawing

Returns

Type	Description
boolean	Whether the current path fill type is the inverse fill type. true means yes; false otherwise.

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.setFillType(drawing.PathFillType.WINDING);
if (path.isInverseFillType()) {
  console.info("path is inverse FillType.");
} else {
  console.info("path is not inverse FillType.");
}

toggleInverseFillType²³⁺

toggleInverseFillType(): void

Toggles the fill type of the path to the inverse type. For example, if the Winding fill type is used, the fill type after inversion is InverseWinding. If the EvenOdd fill type is used, the fill type after inversion is InverseEvenOdd. The same applies to the other two types.

System capability: SystemCapability.Graphics.Drawing

Example

import { drawing } from '@kit.ArkGraphics2D';

let path: drawing.Path = new drawing.Path();
path.setFillType(drawing.PathFillType.WINDING);
path.toggleInverseFillType();
console.info("path fillType = ", path.getFillType());

你可能感兴趣的鸿蒙文章

openharmony 鸿蒙 capi-drawing-gpu-context-h

openharmony 鸿蒙 capi-drawing-nativepixelmap-

openharmony 鸿蒙 capi-nativevsync-oh-nativevsync-expectedraterange

openharmony 鸿蒙 capi-drawing-oh-drawing-brush

openharmony 鸿蒙 capi-drawing-oh-drawing-image-info

openharmony 鸿蒙 capi-drawing-text-linetypography-h

openharmony 鸿蒙 capi-oh-nativeimage-oh-nativeimage

openharmony 鸿蒙 capi-drawing-typeface-h

openharmony 鸿蒙 capi-drawing-brush-h

openharmony 鸿蒙 capi-nativewindow

Class (Path)

Modules to Import

constructor12+

constructor12+

set20+

moveTo

lineTo

arcTo

quadTo

conicTo12+

cubicTo

rMoveTo12+

rLineTo12+

rQuadTo12+

rConicTo12+

rCubicTo12+

addArc12+

addCircle12+

addOval12+

addRect12+

addRoundRect12+

addPath12+

transform12+

contains12+

setLastPoint20+

setFillType12+

getFillType20+

getBounds12+

addPolygon12+

offset12+

op12+

close

reset

rewind20+

isEmpty20+

isRect20+

getLength12+

getPositionAndTangent12+

getSegment18+

isClosed12+

getMatrix12+

buildFromSvgString12+

getPathIterator18+

approximate20+

interpolate20+

isInterpolate20+

isInverseFillType23+

toggleInverseFillType23+

你可能感兴趣的鸿蒙文章

标签云

最热博客

最新博客

constructor¹²⁺

constructor¹²⁺

set²⁰⁺

conicTo¹²⁺

rMoveTo¹²⁺

rLineTo¹²⁺

rQuadTo¹²⁺

rConicTo¹²⁺

rCubicTo¹²⁺

addArc¹²⁺

addCircle¹²⁺

addOval¹²⁺

addRect¹²⁺

addRoundRect¹²⁺

addPath¹²⁺

transform¹²⁺

contains¹²⁺

setLastPoint²⁰⁺

setFillType¹²⁺

getFillType²⁰⁺

getBounds¹²⁺

addPolygon¹²⁺

offset¹²⁺

op¹²⁺

rewind²⁰⁺

isEmpty²⁰⁺

isRect²⁰⁺

getLength¹²⁺

getPositionAndTangent¹²⁺

getSegment¹⁸⁺

isClosed¹²⁺

getMatrix¹²⁺

buildFromSvgString¹²⁺

getPathIterator¹⁸⁺

approximate²⁰⁺

interpolate²⁰⁺

isInterpolate²⁰⁺

isInverseFillType²³⁺

toggleInverseFillType²³⁺