Files
gtk/docs/reference/gsk/paths.md
Matthias Clasen 486674927a Make sure stroke bounds are big enough
Our standard 'empty path' in gtk4-node-editor
was getting its pointy corners cut off.
2023-08-21 23:59:08 -04:00

4.4 KiB

Title: Paths Slug: paths

GSK provides a path object that can be used to render more complex shapes than lines or rounded rectangles. It is comparable to cairos path API, with some notable differences.

In general, a path consists of one or more connected contours, each of which may have multiple segments, and may or may not be closed.

A path with multiple contours
A path with one closed, and one open contour

The central object of the GSK path api is the immutable [struct@Gsk.Path] struct, which contains path data in compact form suitable for rendering.

Creating Paths

Since GskPath is immutable, the auxiliary [struct@Gsk.PathBuilder] struct can be used to construct a path piece by piece. The GskPathBuilder API has three distinct groups of functions:

When you are done with building a path, you can convert the accumulated path data into a GskPath struct with [method@Gsk.PathBuilder.free_to_path].

A sometimes convenient alternative is to create a path from a serialized form, with [func@Gsk.Path.parse]. This function interprets strings in SVG path syntax, such as:

M 100 100 C 100 200 200 200 200 100 Z

Rendering with Paths

There are two main ways to render with paths. The first is to fill the interior of a path with a color or more complex content, such as a gradient. GSK currently supports two different ways of determining what part of the plane are interior to the path, which can be selected with a [enum@Gsk.FillRule] value.

A filled path
A path filled with GSK_FILL_RULE_WINDING
A filled path
The same path, filled with GSK_FILL_RULE_EVEN_ODD

Alternatively, a path can be stroked, which means to emulate drawing with an idealized pen along the path. The result of stroking a path is another path (the stroke path), which is then filled.

The stroke operation can be influenced with the [struct@Gsk.Stroke] struct that collects various stroke parameters, such as the line width, the style of line joins and line caps to use, and a dash pattern.

A stroked path
The same path, stroked with GSK_LINE_JOIN_MITER
A stroked path
The same path, stroked with GSK_LINE_JOIN_ROUND

GSK provides render nodes for these path rendering operations: [class@Gsk.FillNode] and [class@Gsk.StrokeNode], and GTK has convenience API to use them with [class@Gtk.Snapshot].

Other Path APIs

Beyond rendering, paths can be used e.g. as trajectories in animations. In such uses, it is often important to access properties of paths, such as their tangents at certain points. GSK provides an abstract representation for points on a path in the form of the [struct@Gsk.PathPoint] struct. You can query properties of a path at certain point once you have a GskPathPoint representing that point.

GskPathPoint structs can be compared for equality with [method@Gsk.PathPoint.equal] and ordered wrt. to which one comes first, using [method@Gsk.PathPoint.compare].

To obtain a GskPathPoint, use [method@Gsk.Path.get_closest_point], [method@Gsk.Path.get_start_point] or [method@Gsk.Path.get_end_point].

To query properties of the path at a point, use [method@Gsk.PathPoint.get_position], [method@Gsk.PathPoint.get_tangent], [method@Gsk.PathPoint.get_rotation] and [method@Gsk.PathPoint.get_curvature].