Path

The Path element allows rendering a generic shape, composed of different geometric commands. A path shape can be filled and outlined.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

A path can be defined in two different ways:

• Using SVG path commands as a string
• Using path command elements in .slint markup.

The coordinates used in the geometric commands are within the imaginary coordinate system of the path. When rendering on the screen, the shape is drawn relative to the x and y properties. If the width and height properties are non-zero, then the entire shape is fit into these bounds - by scaling accordingly.

Properties

fill

brushdefault: a transparent brush

The color for filling the shape of the path.

fill-rule

enum FillRuledefault: nonzero

The fill rule to use for the path.

FillRule

This enum describes the different ways of deciding what the inside of a shape described by a path shall be.

• nonzero: The “nonzero” fill rule as defined in SVG ↗.
• evenodd: The “evenodd” fill rule as defined in SVG ↗

stroke

brushdefault: a transparent brush

The color for drawing the outline of the path.

stroke-width

lengthdefault: 0px

The width of the outline.

stroke-line-cap

enum LineCapdefault: butt

The appearance of the ends of the path’s outline.

LineCap

This enum describes the appearance of the ends of stroked paths.

• butt: The stroke ends with a flat edge that is perpendicular to the path.
• round: The stroke ends with a rounded edge.
• square: The stroke ends with a square projection beyond the path.

stroke-line-join

enum LineJoindefault: miter

The appearance of the joins between segments of stroked paths.

LineJoin

This enum describes the appearance of the joins between segments of stroked paths.

• miter: The stroke joins with a sharp corner or a clipped corner, depending on the miter limit.
• round: The stroke joins with a smooth, rounded corner.
• bevel: The stroke joins with a beveled (flattened) corner.

stroke-miter-limit

floatdefault: 4

The limit on the ratio of the miter length to the stroke width when stroke-line-join is set to miter. When the limit is exceeded, the join is rendered as a bevel instead.

width

lengthdefault: 0px

If non-zero, the path will be scaled to fit into the specified width.

height

lengthdefault: 0px

If non-zero, the path will be scaled to fit into the specified height.

Viewbox Properties

viewbox-x

floatdefault: 0.0

viewbox-y

floatdefault: 0.0

viewbox-width

floatdefault: 0.0

viewbox-height

floatdefault: 0.0

These four properties allow defining the position and size of the viewport of the path in path coordinates.

If the viewbox-width or viewbox-height is less or equal than zero, the viewbox properties are ignored and instead the bounding rectangle of all path elements is used to define the view port.

fit

enum ImageFitdefault: contain

Defines how the path’s view box is scaled to fit the element’s width and height. If no view box is defined, the implicit bounding rectangle is used.

ImageFit

This enum defines how the source image or path shall fit into an Image or Path element.

• fill: Scales and stretches the source to fit the width and height of the element.
• contain: The source is scaled to fit into the element’s dimensions while preserving the aspect ratio.
• cover: The source is scaled to cover the element’s dimensions while preserving the aspect ratio. If the aspect ratios don’t match, the source will be clipped to fit.
• preserve: Preserves the size of the source in logical pixels. The source will still be scaled by the scale factor that applies to all elements in the window. Any extra space will be left blank.

clip

booldefault: false

By default, when a path has a view box defined and the elements render outside of it, they are still rendered. When this property is set to true, then rendering will be clipped at the boundaries of the view box.

anti-alias

booldefault: true

By default, the fill and stroke of a path is rendered with anti-aliasing, for best quality. Some GPUs have performance issues when rendering with anti-aliasing and animation. Setting the value to false might improve the frame-rate at the expense of a smoother looking path.

Path Using SVG Commands

SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG paths are composed using commands ↗, which in turn are written in a string. In .slint the path commands are provided to the commands property. The following example renders a shape consists of an arc and a rectangle, composed of line-to, move-to and arc commands:

export component Example inherits Path {
    width: 100px;
    height: 100px;
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    stroke: red;
    stroke-width: 1px;
}

slint

The commands are provided in a property:

Commands

stringdefault: ""

A string providing the commands according to the SVG path specification. This property can only be set in a binding and cannot be accessed in an expression.

Path Using SVG Path Elements

The shape of the path can also be described using elements that resemble the SVG path commands but use the .slint markup syntax. The earlier example using SVG commands can also be written like that:

export component Example inherits Path {
    width: 100px;
    height: 100px;
    stroke: blue;
    stroke-width: 1px;

    MoveTo {
        x: 0;
        y: 0;
    }
    LineTo {
        x: 0;
        y: 100;
    }
    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: 100;
        y: 100;
    }
    LineTo {
        x: 100;
        y: 0;
    }
    Close {
    }
}

slint

Note how the coordinates of the path elements don’t use units - they operate within the imaginary coordinate system of the scalable path.

QuadraticTo

The QuadraticTo sub-element describes a smooth Bézier from the path’s current position to the location specified by the x and y properties, using the control points specified by the control-x and control-y properties.

control-x

floatdefault: 0.0

The x coordinate of the curve’s control point.

control-y

floatdefault: 0.0

The y coordinate of the curve’s control point.

x

floatdefault: 0.0

The target x position of the curve.

y

floatdefault: 0.0

The target y position of the curve.

CubicTo

The CubicTo sub-element describes a smooth Bézier from the path’s current position to the location specified by the x and y properties, using two control points specified by their respective properties.

control-1-x

floatdefault: 0.0

The x coordinate of the curve’s first control point.

control-1-y

floatdefault: 0.0

The y coordinate of the curve’s first control point.

control-2-x

floatdefault: 0.0

The x coordinate of the curve’s second control point.

control-2-y

floatdefault: 0.0

The y coordinate of the curve’s second control point.

x

floatdefault: 0.0

The target x position of the curve.

y

floatdefault: 0.0

The target y position of the curve.

MoveTo

The MoveTo sub-element closes the current sub-path, if present, and moves the current point to the location specified by the x and y properties. Subsequent elements such as LineTo will use this new position as their starting point, therefore this starts a new sub-path.

x

floatdefault: 0.0

The x position of the new current point.

y

floatdefault: 0.0

The y position of the new current point.

LineTo

The LineTo sub-element describes a line from the path’s current position to the location specified by the x and y properties.

x

floatdefault: 0.0

The target x position of the line.

y

floatdefault: 0.0

The target y position of the line.

Close

The Close element closes the current sub-path and draws a straight line from the current position to the beginning of the path.

ArcTo

The ArcTo sub-element describes the portion of an ellipse. The arc is drawn from the path’s current position to the location specified by the x and y properties. The remaining properties are modelled after the SVG specification and allow tuning visual features such as the direction or angle.

large-arc

booldefault: false

Out of the two arcs of a closed ellipse, this flag selects that the larger arc is to be rendered. If the property is false, the shorter arc is rendered instead.

radius-x

floatdefault: 0.0

The x-radius of the ellipse.

radius-y

floatdefault: 0.0

The y-radius of the ellipse.

sweep

booldefault: false

If the property is true, the arc will be drawn as a clockwise turning arc; anti-clockwise otherwise.

x-rotation

floatdefault: 0.0

The x-axis of the ellipse will be rotated by the value of this properties, specified in as angle in degrees from 0 to 360.

x

floatdefault: 0.0

The target x position of the line.

y

floatdefault: 0.0

The target y position of the line.