Wt provides a vector graphics painting system, which depending on the browser support, uses inline SVG, inline VML, HTML5 <canvas> or a raster image to paint the graphics.
The Wt API provides different classes that provide support for vector
graphics painting. To use the paint system, you need to specialize
WPaintedWidget and use a WPainter to paint the
contents of the widget inside its
In addition, a PDF backend is included in the library, which can be used
To use inline SVG, you need to enable XHTML support in your configuration
wt_config.xml) by enabling send-xhtml-mimetype .
A typical use is to instantiate a
WPainter from within a
WPaintedWidget::paintEvent() implementation, to
paint on the given paint device, but you can also use a painter to paint
directly to a particular paint device of choice, for example to create
SVG, PDF or PNG images (as resources). A painted widget can dynamically
be updated as shown in the following example.
The painter maintains the state such a...
save()and later restored using
The painting system distinguishes between different coordinate types:
device->width().toPixels(), device->height().toPixels()for the bottom right corner.
The device coordinates are defined in terms of pixels. Even though most
underlying devices are actual vector graphics formats, when used in
conjunction with a
WPaintedWidget, these vector graphics are
rendered by the browser onto a pixel-based canvas (like the rest of the
user-interface). The coordinates are defined such that integer values
correspond to an imaginary raster which separates the individual pixels,
as in the figure below.
The device coordinate system for a 6x5 pixel device
As a consequence, to avoid anti-aliasing effects when drawing straight lines of width one pixel, you will need to use vertices that indicate the middle of a pixel to get a crisp one-pixel wide line, as shown in the above picture.
You can map logical coordinates onto device coordinates by setting a
viewPort() and a
window(); this defines a viewPort
You can define how the current local coordinates map onto
logical coordinates by changing the world transformation using
Besides the different transformation methods which you can apply to a drawing (i.e. translate, rotate, and scale), there are also two other methods which are indispensable once you start generating more complex drawings:
WPainter::save()to save the current painter state on a stack, and
WPainter::restore()to restore a painter state from the stack.
WPainter::translate() translates the origin of the
logical coordinate system to a new location relative to the current
logical coordinate system. It's a good practice to save the painter
state before doing any transformations because usually, it's easier to
restore() compared to a reverse translation to return to
the original state. In addition, if you're translating in a loop you might
end up missing a part of your drawing because it was drawn outside the
paint device's edge.
WPainter::rotate() rotates the logical coordinate
system around its origin by an angle. The angle is specified in degrees,
and positive values are clockwise. Use this method to rotate an object
around its origin before it is drawn on the paint device.
WPainter::scale() scales the logical coordinate
system around its origin, by a factor in the X and Y directions.
Use this method to scale what you draw on the paint device.
Use the method
WPainter::resetTransform() to reset the current
transformation to the identity transformation matrix, so that the logical
coordinate system coincides with the device coordinate system.
A clipping path is like a normal WPainterPath but it acts as mask to hide unwanted parts of shapes. The path is specified in local coordinates.
You can set a clipping path with the method
To apply clipping you still have to enable clipping using
Until now we used a limited number of line and fill styles. Now we will explore other options to make a drawing more attractive by examples.
PenCapStyle(flat, square or round)
PenJoinStyle(miter, bevel or round)
One of the more fun features of WPainter is that you can
render one or more images on a painting using the method
drawImage(). Images can be used for dynamic photo compositing or
as a background for a drawing (e.g. with shapes, graphs, etc.).
An image is specified in terms of a URL, and the width and height.
An image can be drawn in different ways:
In order to avoid server round-trips, it's possible to change some of the properties of a WPaintedWidget and redraw it entirely on the client side. The interactive features of WCartesianChart use this functionality, for example.