920f7e24d6
... by making the references absolute. Now they should work both on github and on the homepage. Resolves #414
63 lines
2.0 KiB
Plaintext
63 lines
2.0 KiB
Plaintext
---
|
||
title: 6. (Scalable) graphics
|
||
layout: docs
|
||
---
|
||
|
||
:doctitle: 6. (Scalable) graphics
|
||
:notitle:
|
||
|
||
== (Scalable) graphics
|
||
|
||
QSkinny offers support for scalable graphics, i.e. rendering SVGs that
|
||
adapt to a specific size. This means that when a graphic is embedded in
|
||
a layout, it can change its size when the layout is growing or
|
||
shrinking, while still maintaining a correct aspect ratio.
|
||
|
||
Imagine the following code, which produces the image depicted below:
|
||
|
||
[source]
|
||
....
|
||
auto horizontalBox = new QskLinearBox( Qt::Horizontal );
|
||
horizontalBox->setPreferredSize( { 200, 75 } );
|
||
|
||
QImage image1( ":/images/cloud.svg" );
|
||
QskGraphic graphic1 = QskGraphic::fromImage( image1 );
|
||
auto* label1 = new QskGraphicLabel( graphic1, horizontalBox );
|
||
label1->setSizePolicy( QskSizePolicy::ConstrainedPreferred, QskSizePolicy::Expanding );
|
||
|
||
QImage image2( ":/images/train.svg" );
|
||
QskGraphic graphic2 = QskGraphic::fromImage( image2 );
|
||
auto* label2 = new QskGraphicLabel( graphic2, horizontalBox );
|
||
label2->setSizePolicy( QskSizePolicy::ConstrainedPreferred, QskSizePolicy::Expanding );
|
||
...
|
||
....
|
||
|
||
.graphics with preferred size
|
||
image::/doc/tutorials/images/scalable-graphics-1.png[Scalable graphics default]
|
||
|
||
When resizing the window, the graphics will scale according to the size
|
||
available in the layout:
|
||
|
||
.graphics bounded by width
|
||
image::/doc/tutorials/images/scalable-graphics-2.png[Scalable graphics bounded by width]
|
||
|
||
.graphics bounded by height
|
||
image::/doc/tutorials/images/scalable-graphics-3.png[Scalable graphics bounded by height]
|
||
|
||
Since we set the horizontal size policy of the graphics to
|
||
`ConstrainedPreferred`, the scaling is done through QskGraphic’s
|
||
`widthForHeight()` methods to maintain the correct aspect ratio. If we
|
||
had set the vertical policy to `ConstrainedPreferred` and the horizontal
|
||
one to e.g. `Expanding`, the layout would have queried the
|
||
`heightForWidth()` method instead.
|
||
|
||
Of course non-scalable graphics like PNGs and JPGs are also supported:
|
||
|
||
[source]
|
||
....
|
||
QImage image( "background.jpg" );
|
||
QskGraphic graphic = QskGraphic::fromImage( image );
|
||
...
|
||
....
|
||
|