- Qt 6.10
- Qt Quick
- QML Types
- PathRectangle
- Qt 6.10.2 Reference Documentation

# PathRectangle QML Type

Defines a rectangle with optionally rounded corners. More...

Import Statement: | `import QtQuick`
Since: | QtQuick 6.8

- List of all members, including inherited members

## Properties

- bevel : bool `(since 6.10)`
- bottomLeftBevel : bool
- bottomLeftRadius : real
- bottomRightBevel : bool
- bottomRightRadius : real
- height : real
- radius : real
- relativeX : real
- relativeY : real
- strokeAdjustment : real
- topLeftBevel : bool
- topLeftRadius : real
- topRightBevel : bool
- topRightRadius : real
- width : real
- x : real
- y : real

## Detailed Description

PathRectangle provides an easy way to specify a rectangle, optionally with rounded or beveled corners. The API corresponds to that of the Rectangle item.

         Shape {
             id: rectangleShape
             width: 200
             height: 150
             anchors.centerIn: parent
             preferredRendererType: Shape.CurveRenderer

             ShapePath {
                 fillColor: "#3ad23c"

                 PathRectangle {
                     width: rectangleShape.width
                     height: rectangleShape.height
                     topLeftRadius: 30
                     bottomRightRadius: 30
                     bevel: true
                 }
             }
         }

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

## Property Documentation

x : real
y : real

Defines the top left corner of the rectangle.

Unless that corner is rounded, this will also be the start and end point of the path.

See also relativeX and relativeY.

relativeX : real
relativeY : real

Defines the top left corner of the rectangle relative to the path's start point.

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.

height : real
width : real

Defines the width and height of the rectangle.

See also x and y.

bottomLeftRadius : real
bottomRightRadius : real
topLeftRadius : real
topRightRadius : real

If set, these properties define the individual corner radii. A zero value defines that corner to be sharp, while a positive value defines it to be rounded. When unset, the value of radius is used instead.

These properties are unset by default. Assign `undefined` to them to return them to the unset state.

In the following example, radius is set to `10`, and `topLeftRadius` to `0`:

         Shape {
             id: rectangleShape
             width: 200
             height: 150
             anchors.centerIn: parent
             preferredRendererType: Shape.CurveRenderer

             ShapePath {
                 strokeColor: "black"
                 strokeWidth: 4
                 joinStyle: ShapePath.MiterJoin

                 PathRectangle {
                     width: rectangleShape.width
                     height: rectangleShape.height
                     radius: 10
                     topLeftRadius: 0
                     bottomRightBevel: true
                 }
             }
         }

See also radius.

bottomLeftBevel : bool
bottomRightBevel : bool
topLeftBevel : bool
topRightBevel : bool

If set, these properties define the individual corner bevels. Setting them to `false` results in either sharp or rounded corners, depending on the values of the individual radius properties. Setting them to `true` results in bevelled corners. When unset, the value of bevel is used instead.

These properties are unset by default. Assign `undefined` to them to return them to the unset state.

In the following example, `bottomRightBevel` is set to true:

         Shape {
             id: rectangleShape
             width: 200
             height: 150
             anchors.centerIn: parent
             preferredRendererType: Shape.CurveRenderer

             ShapePath {
                 strokeColor: "black"
                 strokeWidth: 4
                 joinStyle: ShapePath.MiterJoin

                 PathRectangle {
                     width: rectangleShape.width
                     height: rectangleShape.height
                     radius: 10
                     topLeftRadius: 0
                     bottomRightBevel: true
                 }
             }
         }

See also bevel.

bevel : bool `[since 6.10]`

This property defines whether the corners of the rectangle are beveled.

Setting it to `false` results in either sharp or rounded corners, depending on the values of the individual radius properties.

This property may be overridden by the individual bevel properties.

         Shape {
             id: rectangleShape
             width: 200
             height: 150
             anchors.centerIn: parent
             preferredRendererType: Shape.CurveRenderer

             ShapePath {
                 fillColor: "#3ad23c"

                 PathRectangle {
                     width: rectangleShape.width
                     height: rectangleShape.height
                     topLeftRadius: 30
                     bottomRightRadius: 30
                     bevel: true
                 }
             }
         }

This property was introduced in Qt 6.10.

See also topLeftBevel, topRightBevel, bottomLeftBevel, and bottomRightBevel.

radius : real

This property defines the corner radius used to define a rounded rectangle.

If radius is a positive value, the rectangle path will be defined as a rounded rectangle, otherwise it will be defined as a normal rectangle.

This property may be overridden by the individual corner radius properties.

The default value is `0`.

See also topLeftRadius, topRightRadius, bottomLeftRadius, and bottomRightRadius.

strokeAdjustment : real

This property defines the stroke width adjustment to the rectangle coordinates.

When used in a ShapePath with stroking enabled, the actual stroked rectangle will by default extend beyond the defined rectangle by half the stroke width on all sides. This is the expected behavior since the path defines the midpoint line of the stroking, and corresponds to QPainter and SVG rendering.

If one instead wants the defined rectangle to be the outer edge of the stroked rectangle, like a Rectangle item with a border, one can set strokeAdjustment to the stroke width. This will effectively shift all edges inwards by half the stroke width. Like in the following example:

     ShapePath {
         id: myRec
         fillColor: "white"
         strokeColor: "black"
         strokeWidth: 16
         joinStyle: ShapePath.MiterJoin

         PathRectangle { x: 10; y: 10; width: 200; height: 100; strokeAdjustment: myRec.strokeWidth }
     }