Image Formatting
Images loaded from external files are an important part of most documents.
To use an image find the path relative to your source code. Then, load the
image into a variable. Next, you can scale and format the image, and place it
into a Paragraph.
View on YouTube
Bitmap Images
Bitmap pictures are represented with an
Image
object which accepts a path to a local file. Placing
the
res
operator in front of the file name to causes the compiler to search for the path at compile
time. This causes a missing file to be a compile error, rather than a runtime error.
readonly
Image
Zombie
=
new
(
res
"Zombie.png
");
ZombieText
=
Paragraph
{
"Zombies eat brains! "
;
FitBox
(
Zombie
, 20%, 20%);
};
Zombies eat brains!
Scalable Drawings
Scalable drawings like SVG files are represented with a
Drawing
object. Whether an
Image
or
Drawing
, it is a good practice to load images into a variable with the
readonly
attribute to ensure
that the file is loaded only once.
readonly
Drawing
NytrilBug
=
new
(
res
"Figure.svg
");
ScaleFigure
=
Paragraph
{
FitBox
(
NytrilBug
, 10%);
};
Change Baseline
Use the
Baseline
property to set the baseline of the image for alignment with other text.
ChangeBaseline
=
Block
{
Paragraph
{
"No baseline adjustment: "
;
FitBox
(
NytrilBug
, 5%);
};
Paragraph
{
"Baseline at 70%: "
;
FitBox
(
NytrilBug
, 5%) {
Baseline
:
70%
};
};
};
No baseline adjustment:
Baseline at 70%:
Fit to Width
You can fit an image to a given size using the
FitBox
formatter. Here we set the width parameter
to fit an image to a given width, while scaling the height proportionately.
PictureWidth
=
FitBox
(
Zombie
,
4%
);
Fit to Height
Set the height parameter to fit an image to a given height, while scaling the width
proportionately.
PictureHeight
=
FitBox
(
Zombie
,
null
,
10%
);
Fit to Rectangle
Fit an image inside both a given width and height, while maintaining proportion.
PictureBoth
=
FitBox
(
Zombie
,
10%, 20%
);
Force Dimensions
Force an image to a given size without preserving the image aspect ratio by setting the skew
parameter to true.
PictureSkew
=
FitBox
(
Zombie
, 20%, 10%,
null
,
true
);
Out of proportion
Opacity
Use the
Opacity
property to change how opaque the contents of a formatter appear.
PictureOpacity
(
opacity
)
=
VBox
{
Opacity
:
opacity
;
HAlign
:
Center
;
TextDigits
:
0;
opacity
;
FitBox
(
Zombie
, 5%);
};
ShowPictureOpacity
=
Paragraph
{
Separator
:
Space
*
5;
PictureOpacity
(
each
(10%
..
100%
step
10%))
};
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Scaling Mode
Use the
ScalingMode
property to change how the pixels of the bitmap scale and resolve.
ImageMode
(
ScalingModes
mode
)
=
VBox
{
Margin
:
PadR
(10pt);
HAlign
:
Center
;
mode
;
FitBox
(
Zombie
, 7%) {
ScalingMode
:
mode
};
};
ShowPictureMode
=
Paragraph
{
ImageMode
(
each
ScalingModes
);
};
None
Pixelated
MediumQuality
HighQuality
Framed Drawings
Clip an image inside a border by setting the
BorderClip
property to true.
readonly
Image
Sally
=
new
(
res
"../Examples/Family Tree/SallyJones.jpg
");
FrameFigure
(
Image
image
,
w
)
=
Canvas
(
null
,
w
*
1.6,
new
Edge
(
w
*
10%, 0,
#DCBC93#
)) {
Background
:
95%;
BorderRadius
:
w
*
50%;
BorderClip
:
true
;
FitBox
(
image
,
null
,
w
*
1.4);
};
SallyFrame
=
FrameFigure
(
Sally
,
Math
.
Max
(
ExtentWidth
,
ExtentHeight
)
*
10%);
Rotated Drawings
Rotate and skew an image by setting the
Transform
property.
readonly
Image
Michael
=
new
(
res
"../Examples/Family Tree/MichaelJones.jpg
");
RotateFrame
(
Image
image
,
w
,
angle
)
=
FrameFigure
(
image
,
w
) {
Transform
:
Transform
.
Rotate
(
angle
)
Transform
.
Skew
(
angle
,
angle
);
TransformFit
:
true
;
};
Locket
=
HBox
{
VAlign
:
Top
;
var
w
=
Math
.
Max
(
ExtentWidth
,
ExtentHeight
)
*
5%;
RotateFrame
(
Sally
,
w
,
-
8
degrees
);
Canvas
(
w
*
5%,
w
*
50%) {
Margin
:
PadT
(
w
*
60%);
Background
:
#C9AC87#
};
RotateFrame
(
Michael
,
w
, 8
degrees
);
};
Icons
The
Icons
namespace has a library of common material icons.
MenuItem
=
Paragraph
{
TextHeight
:
200%;
Span
{
Icons
.
folder
;
TextColor
:
Colors
.
Gold
};
Space
;
"Open the folder"
;
};
Open the folder
Icon Drawing
Here we place the icon in a box with a hoverable tip, by applying the
Canvas
formatter with a
TipAction
property.
YouTube
(
height
,
URL
url
)
=
Canvas
(
height
*
1.4,
height
) {
TipAction
:
url
;
HAlign
:
Center
;
VAlign
:
Center
;
BorderRadius
:
height
*
20%;
Background
:
#FF0033#
;
TextColor
:
Colors
.
White
;
TextHeight
:
height
*
0.85;
TextOffset
:
4%;
Baseline
:
83%;
Icons
.
play_arrow
;
};
IconFigure
=
Paragraph
{
YouTube
(
ExtentWidth
*
3%,
new
(
"www.youtube.com/@Nytril"
));
Space
;
"Follow us on YouTube"
;
};
Follow us on YouTube
https://www.youtube.com/@Nytril
