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 WPaintedWidget::paintEvent().
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 file (wt_config.xml) by enabling send-xhtml-mimetype .
A typical use is to instantiate a WPainter from within a specialized 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...
The painting system distinguishes between different coordinate types:
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 transformation.
You can define how the current local coordinates map onto logical coordinates by changing the world transformation using translate(), rotate(), scale() and setWorldTransform() operations.
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:
The method 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 call restore() compared to a reverse translation to return to the oiginal 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 the paint device's edge.
The method 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.
The method 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 setClipPath(). To apply clipping you still have to enable clipping using setClipping(true).
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.
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 roundtrips, 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.