Shapes

Qt Design Studio is a UI design tool rather than a generic drawing tool, and therefore, the focus is on providing ready-made UI controls that you can modify according to your needs. The values of some properties of the controls are specified by using styling, and therefore you cannot change them.

However, you can use some of the components in Library to draw basic shapes, such as rectangles. In addition, Qt Design Studio comes with a set of more powerful and flexible graphical primitives, that allow creating more complex shapes, such as borders, triangles, arcs, and pies in Form Editor.

"Shapes in Form Editor"

Most visual types in Library are based on the Item type. Even though it has no visual appearance itself (similarly to a mouse area, for example), it defines all the properties that are common across visual types, such as position, size, and visibility. For more information, see Specifying Basic Item Properties.

In addition, each type has a set of properties that specify its visual appearance and behavior. You can modify the property values to set fill and border colors, stroke width, and other characteristics of the shapes.

The following sections describe the available shapes and their properties in more detail. You can modify the values of the properties in the Properties view.

Rectangle

The basic Rectangle QML type is used for drawing shapes with four sides and corners, as well as a solid border.

"A rectangle and its properties"

Rectangles can be filled either with a solid fill color or a linear gradient that you set in the Color field. You can also use a color picker to select colors and a gradient picker to select gradients from a predefined set of WebGradients.

An optional solid border can be added to a rectangle with its own color and thickness by setting the values of the Border Color and Border fields. To create a border without a fill color, select the button that sets the color to transparent.

By setting the value of the Radius field, you can create shapes with rounded corners. With the right combination of the values of the rectangle width, height, and radius properties, you can create oval and circular shapes. For example, to draw a full circle, first draw a rectangle with all four sides equal, and then set its radius to half the side length.

When drawing curved edges, consider enabling the Antialiasing check box in the Advanced tab of the Properties view to improve the appearance of your shape.

Studio Rectangle

If you want to modify each corner of the rectangle independently or use a dashed border, select the Rectangle type in the Studio Components tab of Library instead of the basic rectangle type.

By setting the values of properties in the Corner Radiuses group, you can draw each corner independently. By using radius values in combination with the values in the Corner Bevel group, you can create shapes with cut corners.

"A studio rectangle with cut corners"

In addition to linear gradients, you can specify conical and radial gradients in the Fill Color field.

In the Stroke Details group, you can specify the border mode, line style, and dash pattern for dashed and dotted lines. For more information, see Strokes.

Border

The Border type is used to create borders out of four segments: left, top, right, and bottom. By selecting the Draw top, Draw right, Draw bottom, and Draw left check boxes, you can determine whether each of the segments is visible. This enables you to draw solid or dashed lines with specified dash patterns and joint and cap styles.

"Border properties"

Strokes

In the Stroke Details group, you can specify the border mode, line style, and dash pattern for dashed and dotted lines.

"Stroke properties"

In the Stroke width field, you can set the thickness of the line.

In the Border mode field, you can specify whether the border is drawn along the inside or outside edge of the item, or on top of the edge.

If you select a dashed or dotted pattern in the Stroke style field, you can specify the dash pattern as the dashes and the gaps between them in the Dash pattern field. The dash pattern is specified in units of the stroke width. That is, a dash with the length 5 and width 10 is 50 pixels long.

The value of the Dash offset field specifies the starting point of the dash pattern for a line. It is measured in terms of the units used to specify the dash pattern. For example, a pattern where each stroke is four units long, followed by a gap of two units, will begin with the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of the gap.

In the Joint style field, select Miter join to extend the outer edges of the lines to meet at an angle and to fill the area between them. Select Bevel join to fill the triangular notch between the two lines. Select Round join to fill a circular arc between the two lines.

The value of the Cap style property specifies whether line ends are square or rounded.

Triangle

The Triangle type can be used to draw triangles with different dimensions and shapes. The type is enclosed in an invisible rectangle that determines its size. The dimensions of the triangle can be changed to make it elongated or squatter with space around it by setting the left, right, top, and bottom margins in the Margins group. The margins are set between the triangle and the edges of the parent rectangle.

"Triangle properties"

The fill color property values are set in the same way as for a rectangle. The border property values are described in Strokes.

Arc

An arc is specified by setting values in degrees in the Begin and End fields. The arc can be just a line or a filled outline. The properties of the line or outline are described in Strokes.

"Arc properties"

The area between the arc's start and end points or the area inside the outline are painted using either a solid fill color or a gradient.

To create an arc with an outline, select the Full outline check box. The Arc outline width field sets the width of the arc outline, including the stroke. The Arc outline begin and Arc outline end fields set the width of the start and end points of the outline separately. The width of the outline between them is calculated automatically. You can adjust the inner and outer curves of the outline in the Radius inner adjust and Radius outer adjust fields.

The Round outline, Round begin outline, and Round end outline properties specify whether the end points of the arc outline have rounded caps. For an arc that does not have an outline, the Cap style property specifies whether the line ends are square or rounded.

Pie

The Pie type is used to create a pie slice, a pie that is missing slices, or just the pie rind (similar to an arc), depending on the values of the Begin, End, and Hide line properties.

"Pie properties"

The filling of the pie is painted using either a solid fill color or a gradient. The fill color property values are set in the same way as for a rectangle. The border property values are described in Strokes.

Summary of Shapes

The following table lists the QML types that you can use to draw shapes. The Location column contains the tab name where you can find the type in Library. The MCU column indicates which types are supported on MCUs.

IconNameLocationMCUPurpose
ArcStudio ComponentsAn arc that begins and ends at given positions.
BorderStudio ComponentsA line with four segments that you can show and shape individually.
PieStudio ComponentsA pie slice or a pie with a slice missing from it.
RectangleQt Quick - BasicA rectangle that is painted with a solid fill color or linear gradient and an optional border. You can use the radius property to draw circles.
RectangleStudio ComponentsAn extended rectangle that is painted with a solid fill color or linear, conical, or radial gradients, and corners that you can shape independently of each other.
TriangleStudio ComponentsA triangle with different dimensions and shapes that is enclosed in an invisible rectangle.

Available under certain Qt licenses.
Find out more.