QtQuick.PathArc

Defines an arc with the given radius More...

Import Statement: import QtQuick 2.4

Properties

Detailed Description

PathArc provides a simple way of specifying an arc that ends at a given position and uses the specified radius. It is modeled after the SVG elliptical arc command.

The following QML produces the path shown below:

src="https://assets.ubuntu.com/v1/ccc88dac-declarative-patharc.png" alt="" />

Path {
startX: 100; startY: 0
PathArc {
x: 0; y: 100
radiusX: 100; radiusY: 100
useLargeArc: true
}
}

Note that a single PathArc cannot be used to specify a circle. Instead, you can use two PathArc elements, each specifying half of the circle.

See also Path, PathLine, PathQuad, PathCubic, PathCurve, and PathSvg.

Property Documentation

direction : enumeration

Defines the direction of the arc. Possible values are PathArc.Clockwise (default) and PathArc.Counterclockwise.

The following QML can produce either of the two illustrated arcs below by changing the value of direction.

src="https://assets.ubuntu.com/v1/98dbe9bd-declarative-arcdirection.png" alt="" />

Path {
startX: 50; startY: 50
PathArc {
x: 150; y: 50
radiusX: 75; radiusY: 50
}
}

See also useLargeArc.


radiusX : real

Defines the radius of the arc.

The following QML demonstrates how different radius values can be used to change the shape of the arc:

src="https://assets.ubuntu.com/v1/2c5da5af-declarative-arcradius.png" alt="" />

Path {
startX: 0; startY: 100
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 15
}
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 25
}
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 50
}
PathArc {
relativeX: 50; y: 100
radiusX: 50; radiusY: 100
}
}

radiusY : real

Defines the radius of the arc.

The following QML demonstrates how different radius values can be used to change the shape of the arc:

src="https://assets.ubuntu.com/v1/2c5da5af-declarative-arcradius.png" alt="" />

Path {
startX: 0; startY: 100
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 15
}
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 25
}
PathArc {
relativeX: 50; y: 100
radiusX: 25; radiusY: 50
}
PathArc {
relativeX: 50; y: 100
radiusX: 50; radiusY: 100
}
}

relativeX : real

Defines the end point of the arc relative to its start.

If both a relative and absolute end position are specified for a single axis, the relative position will be used.

Relative and absolute positions can be mixed, for example it is valid to set a relative x and an absolute y.

See also x and y.


relativeY : real

Defines the end point of the arc relative to its start.

If both a relative and absolute end position are specified for a single axis, the relative position will be used.

Relative and absolute positions can be mixed, for example it is valid to set a relative x and an absolute y.

See also x and y.


useLargeArc : bool

Whether to use a large arc as defined by the arc points.

Given fixed start and end positions, radius, and direction, there are two possible arcs that can fit the data. useLargeArc is used to distinguish between these. For example, the following QML can produce either of the two illustrated arcs below by changing the value of useLargeArc.

src="https://assets.ubuntu.com/v1/be3ceca1-declarative-largearc.png" alt="" />

Path {
startX: 0; startY: 100
PathArc {
x: 100; y: 200
radiusX: 100; radiusY: 100
direction: PathArc.Clockwise
}
}

The default value is false.


x : real

Defines the end point of the arc.

See also relativeX and relativeY.


y : real

Defines the end point of the arc.

See also relativeX and relativeY.