- Qt 6.12
- Qt Quick
- QML Types
- QtQuick.Shapes
- ShapePath
- Qt 6.12.0 Reference Documentation

# ShapePath QML Type

Describes a Path and associated properties for stroking and filling. More...

Import Statement: | `import QtQuick.Shapes 1.12`
Inherits: | Path

- List of all members, including inherited members

## Properties

- capStyle : enumeration
- cosmeticStroke : bool `(since 6.11)`
- dashOffset : real
- dashPattern : list<real>
- fillColor : color
- fillGradient : ShapeGradient
- fillItem : Item `(since 6.8)`
- fillRule : enumeration
- fillTransform : matrix4x4 `(since 6.8)`
- joinStyle : enumeration
- miterLimit : int
- pathHints : PathHints `(since 6.7)`
- strokeColor : color
- strokeGradient : ShapeGradient `(since 6.12)`
- strokeStyle : enumeration
- strokeWidth : real
- trim `(since 6.10)`
  - trim.end : real `(since 6.10)`
  - trim.offset : real `(since 6.10)`
  - trim.start : real `(since 6.10)`

## Detailed Description

A Shape contains one or more ShapePath elements. At least one ShapePath is necessary in order to have a Shape output anything visible. A ShapePath itself is a Path with additional properties describing the stroking and filling parameters, such as the stroke width and color, the fill color or gradient, join and cap styles, and so on. As with ordinary Path objects, ShapePath also contains a list of path elements like PathMove, PathLine, PathCubic, PathQuad, PathArc, together with a starting position.

Any property changes in these data sets will be bubble up and change the output of the Shape. This means that it is simple and easy to change, or even animate, the starting and ending position, control points, or any stroke or fill parameters using the usual QML bindings and animation types like NumberAnimation.

In the following example the line join style changes automatically based on the value of joinStyleIndex:

     ShapePath {
         strokeColor: "black"
         strokeWidth: 16
         fillColor: "transparent"
         capStyle: ShapePath.RoundCap

         property int joinStyleIndex: 0

         property variant styles: [
             ShapePath.BevelJoin,
             ShapePath.MiterJoin,
             ShapePath.RoundJoin
         ]

         joinStyle: styles[joinStyleIndex]

         startX: 30
         startY: 30
         PathLine { x: 100; y: 100 }
         PathLine { x: 30; y: 100 }
     }

Once associated with a Shape, here is the output with a joinStyleIndex of 2 (ShapePath.RoundJoin):

See also Qt Quick Examples - Shapes, Weather Forecast Example, and Shape.

## Property Documentation

### capStyle : enumeration

This property defines how the end points of lines are drawn. The default value is `ShapePath.SquareCap`.

Constant | Description
--- | ---
`ShapePath.FlatCap` | A square line end that does not cover the end point of the line.
`ShapePath.SquareCap` | A square line end that covers the end point and extends beyond it by half the line width.
`ShapePath.RoundCap` | A rounded line end.

### cosmeticStroke : bool `[since 6.11]`

This property holds whether the stroke width remains constant despite rendering scale.

When this property is set to `true`, the outline of the shape is drawn with constant width in device-independent pixels, as specified by strokeWidth, regardless of any transformations applied to the shape, such as QtQuick::Item::scale.

The default value is `false`.

This property was introduced in Qt 6.11.

See also strokeWidth.

### dashOffset : real

This property defines the starting point on the dash pattern, measured in units used to specify the dash pattern.

The default value is `0`.

See also QPen::setDashOffset().

### dashPattern : list<real>

This property defines the dash pattern when strokeStyle is set to ShapePath.DashLine. The pattern must be specified as an even number of positive entries where the entries 1, 3, 5... are the dashes and 2, 4, 6... are the spaces. The pattern is specified in units of the pen's width.

The default value is (4, 2), meaning a dash of 4 * strokeWidth pixels followed by a space of 2 * strokeWidth pixels.

See also QPen::setDashPattern().

### fillColor : color

This property holds the fill color.

When set to `transparent`, no filling occurs.

The default value is `white`.

Note: If either fillGradient or fillItem are set to something other than `null`, these will take precedence over `fillColor`. The `fillColor` will be ignored in this case.

### fillGradient : ShapeGradient

This property defines the fill gradient. By default no gradient is enabled and the value is `null`. In this case the fill will either be based on the fillItem property if it is set, and otherwise the fillColor property will be used.

Note: The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like LinearGradient.

Note: If set to something other than `null`, the `fillGradient` will take precedence over both fillItem and fillColor.

By default, up to 256 different gradients may be displayed simultaneously. This limit may be customized with the `QT_QUICKSHAPES_MAX_GRADIENTS` environment variable.

### fillItem : Item `[since 6.8]`

This property defines another Qt Quick Item to use as fill by the shape. The item must be texture provider (such as a layered item, a ShaderEffectSource or an Image). If it is not a valid texture provider, this property will be ignored.

The visual parent of `fillItem` must be a Qt Quick Item. In particular, since `ShapePath` is not an Item, its children cannot be used as fill items. Manually setting the `fillItem`'s parent is needed when it is created as a child of the `ShapePath`.

For instance, creating an Image object directly in the `fillItem` property assignment will make it a child of the `ShapePath`. In this case, its parent must be set manually. In the following example we use the window's contentItem as the parent.

     fillItem: Image {
         visible: false
         source: "contents.png"
         parent: window.contentItem
     }

Note: When using a layered item as a `fillItem`, you may see pixelation effects when transforming the fill. Setting the layer.smooth property to true will give better visual results in this case.

By default no fill item is set and the value is `null`.

Note: If set to something other than `null`, the `fillItem` property takes precedence over fillColor. The fillGradient property in turn takes precedence over both `fillItem` and fillColor.

This property was introduced in Qt 6.8.

### fillRule : enumeration

This property holds the fill rule. The default value is `ShapePath.OddEvenFill`. For an explanation on fill rules, see QPainterPath::setFillRule().

Constant | Description
--- | ---
`ShapePath.OddEvenFill` | Odd-even fill rule.
`ShapePath.WindingFill` | Non-zero winding fill rule.

### fillTransform : matrix4x4 `[since 6.8]`

This property defines a transform to be applied to the path's fill pattern (fillGradient or fillItem). It has no effect if the fill is a solid color or transparent. By default no fill transform is enabled and the value of this property is the `identity` matrix.

This example displays a rectangle filled with the contents of `myImageItem` rotated 45 degrees around the center point of `myShape`:

     ShapePath {
         fillItem: myImageItem
         fillTransform: PlanarTransform.fromRotate(45, myShape.width / 2, myShape.height / 2)
         PathRectangle { x: 10; y: 10; width: myShape.width - 20; height: myShape.height - 20 }
     }

This property was introduced in Qt 6.8.

### joinStyle : enumeration

This property defines how joins between two connected lines are drawn. The default value is `ShapePath.BevelJoin`.

Constant | Description
--- | ---
`ShapePath.MiterJoin` | The outer edges of the lines are extended to meet at an angle, and this area is filled.
`ShapePath.BevelJoin` | The triangular notch between the two lines is filled.
`ShapePath.RoundJoin` | A circular arc between the two lines is filled.

### miterLimit : int

When joinStyle is set to `ShapePath.MiterJoin`, this property specifies how far the miter join can extend from the join point.

The default value is 2.

### pathHints : PathHints `[since 6.7]`

This property describes characteristics of the shape. If set, these hints may allow optimized rendering. By default, no hints are set. It can be a combination of the following values:

Constant | Description
--- | ---
`ShapePath.PathLinear` | The path only has straight lines, no curves.
`ShapePath.PathQuadratic` | The path does not have any cubic curves: only lines and quadratic Bezier curves.
`ShapePath.PathConvex` | The path does not have any dents or holes. All straight lines between two points inside the shape will be completely inside the shape.
`ShapePath.PathFillOnRight` | The path follows the TrueType convention where outlines around solid fill have their control points ordered clockwise, and outlines around holes in the shape have their control points ordered counter-clockwise.
`ShapePath.PathSolid` | The path has no holes, or mathematically speaking it is simply connected.
`ShapePath.PathNonIntersecting` | The path outline does not cross itself.
`ShapePath.PathNonOverlappingControlPointTriangles` | The triangles defined by the curve control points do not overlap with each other, or with any of the line segments. Also, no line segments intersect. This implies `PathNonIntersecting`.

Not all hints are logically independent, but the dependencies are not enforced. For example, `PathLinear` implies `PathQuadratic`, but it is valid to have `PathLinear` without `PathQuadratic`.

The pathHints property describes a set of statements known to be true; the absence of a hint does not necessarily mean that the corresponding statement is false.

This property was introduced in Qt 6.7.

### strokeColor : color

This property holds the stroking color.

When set to `transparent`, no stroking occurs. If the strokeGradient property is set, it will take precedence over `strokeColor`.

The default value is `white`.

### strokeGradient : ShapeGradient `[since 6.12]`

This property defines the stroke gradient. By default no gradient is enabled and the value is `null`. In this case the stroke will be based strokeColor property.

Note: The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like LinearGradient.

Note: If set to something other than `null`, the `strokeGradient` will take precedence over strokeColor.

By default, up to 256 different gradients may be displayed simultaneously. This limit may be customized with the `QT_QUICKSHAPES_MAX_GRADIENTS` environment variable.

This property was introduced in Qt 6.12.

### strokeStyle : enumeration

This property defines the style of stroking. The default value is ShapePath.SolidLine.

Constant | Description
--- | ---
`ShapePath.SolidLine` | A plain line.
`ShapePath.DashLine` | Dashes separated by a few pixels.

### strokeWidth : real

This property holds the stroke width.

When set to a negative value, no stroking occurs.

The default value is 1.

See also cosmeticStroke.

### trim group

### trim.end : real `[since 6.10]`

### trim.offset : real `[since 6.10]`

### trim.start : real `[since 6.10]`

Specifies the section of this path that will be displayed.

The section is defined by the path length fractions `start` and `end`. By default, `start` is 0 (denoting the start of the path) and `end` is 1 (denoting the end of the path), so the entire path is displayed.

The value of `offset` is added to `start` and `end`. If that causes over- or underrun of the [0, 1] range, the values will be wrapped around, as will the resulting path section. The effective range of `offset` is between -1 and 1. The default value is 0.

These properties were introduced in Qt 6.10.