1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
//! Image widget example demonstrating raster and SVG image support.
//!
//! Run with: cargo run --example image_example
use guido::prelude::*;
fn main() {
// Helper to create a labeled image card.
//
// The card decides the box; the image only decides how its pixels land in
// it. That is why the sizes moved here from the image calls below.
fn image_card(label: &'static str, (w, h): (f32, f32), img: Image) -> Container {
container()
.layout(Flex::column().spacing(8.0))
.child(
container()
.width(w)
.height(h)
.background(Color::rgb(0.2, 0.2, 0.25))
.corners(4.0)
.child(img),
)
.child(container().child(text(label).font_size(12.0).color(Color::rgb(0.7, 0.7, 0.7))))
}
// Helper to create a transformed image card
fn transformed_card(
label: &'static str,
(w, h): (f32, f32),
img: Image,
transform: Container,
) -> Container {
container()
.layout(Flex::column().spacing(8.0))
.child(
transform
.width(w)
.height(h)
.background(Color::rgb(0.2, 0.2, 0.25))
.corners(4.0)
.child(img),
)
.child(container().child(text(label).font_size(12.0).color(Color::rgb(0.7, 0.7, 0.7))))
}
// Panel with two columns: raster images and SVG images
let view = container()
.padding(24.0)
.layout(Flex::row().spacing(48.0))
.child(
// Left column: Raster images
container()
.layout(Flex::column().spacing(32.0))
.child(container().child(text("Raster Image").font_size(16.0).color(Color::WHITE)))
.child(
container()
.layout(Flex::row().spacing(32.0))
.child(image_card(
"Contain",
(90.0, 90.0),
image("examples/assets/photo.webp").content_fit(ContentFit::Contain),
))
.child(image_card(
"Cover",
(90.0, 90.0),
image("examples/assets/photo.webp").content_fit(ContentFit::Cover),
))
.child(image_card(
"Fill",
(90.0, 90.0),
image("examples/assets/photo.webp").content_fit(ContentFit::Fill),
)),
)
.child(
container()
.layout(Flex::row().spacing(48.0))
.child(transformed_card(
"Rotated 10°",
(90.0, 90.0),
image("examples/assets/photo.webp").content_fit(ContentFit::Cover),
container().rotate(10.0),
))
.child(transformed_card(
"Scaled 1.5x",
(90.0, 90.0),
image("examples/assets/photo.webp").content_fit(ContentFit::Cover),
container().scale(1.5),
)),
),
)
.child(
// Right column: SVG images
container()
.layout(Flex::column().spacing(32.0))
.child(container().child(text("SVG Image").font_size(16.0).color(Color::WHITE)))
.child(
container()
.layout(Flex::row().spacing(32.0))
.child(image_card(
"Normal",
(80.0, 60.0),
image("examples/assets/logo.svg"),
))
.child(transformed_card(
"Rotated 15°",
(80.0, 60.0),
image("examples/assets/logo.svg"),
container().rotate(15.0),
))
.child(transformed_card(
"Scaled 1.5x",
(80.0, 60.0),
image("examples/assets/logo.svg"),
container().scale(1.5),
)),
),
);
App::new().run(|app| {
app.add_surface(
SurfaceConfig::new()
.width(820)
.height(400)
.anchor(Anchor::TOP | Anchor::LEFT)
.layer(Layer::Top)
.namespace("image-example")
.background_color(Color::rgb(0.1, 0.1, 0.15)),
|| view,
);
});
}