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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
// Copyright 2019 The Druid Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//! An example of a custom drawing widget.
//! We draw an image, some text, a shape, and a curve.
// On Windows platform, don't show a console when opening the app.
#![windows_subsystem = "windows"]
use druid::kurbo::BezPath;
use druid::piet::{FontFamily, ImageFormat, InterpolationMode, Text, TextLayoutBuilder};
use druid::widget::prelude::*;
use druid::{
Affine, AppLauncher, Color, FontDescriptor, LocalizedString, Point, Rect, TextLayout,
WindowDesc,
};
struct CustomWidget;
// If this widget has any child widgets it should call its event, update and layout
// (and lifecycle) methods as well to make sure it works. Some things can be filtered,
// but a general rule is to just pass it through unless you really know you don't want it.
impl Widget<String> for CustomWidget {
fn event(&mut self, _ctx: &mut EventCtx, _event: &Event, _data: &mut String, _env: &Env) {}
fn lifecycle(
&mut self,
_ctx: &mut LifeCycleCtx,
_event: &LifeCycle,
_data: &String,
_env: &Env,
) {
}
fn update(&mut self, _ctx: &mut UpdateCtx, _old_data: &String, _data: &String, _env: &Env) {}
fn layout(
&mut self,
_layout_ctx: &mut LayoutCtx,
bc: &BoxConstraints,
_data: &String,
_env: &Env,
) -> Size {
// BoxConstraints are passed by the parent widget.
// This method can return any Size within those constraints:
// bc.constrain(my_size)
//
// To check if a dimension is infinite or not (e.g. scrolling):
// bc.is_width_bounded() / bc.is_height_bounded()
//
// bx.max() returns the maximum size of the widget. Be careful
// using this, since always make sure the widget is bounded.
// If bx.max() is used in a scrolling widget things will probably
// not work correctly.
if bc.is_width_bounded() && bc.is_height_bounded() {
bc.max()
} else {
let size = Size::new(100.0, 100.0);
bc.constrain(size)
}
}
// The paint method gets called last, after an event flow.
// It goes event -> update -> layout -> paint, and each method can influence the next.
// Basically, anything that changes the appearance of a widget causes a paint.
fn paint(&mut self, ctx: &mut PaintCtx, data: &String, env: &Env) {
// Clear the whole widget with the color of your choice
// (ctx.size() returns the size of the layout rect we're painting in)
// Note: ctx also has a `clear` method, but that clears the whole context,
// and we only want to clear this widget's area.
let size = ctx.size();
let rect = size.to_rect();
ctx.fill(rect, &Color::WHITE);
// We can paint with a Z index, this indicates that this code will be run
// after the rest of the painting. Painting with z-index is done in order,
// so first everything with z-index 1 is painted and then with z-index 2 etc.
// As you can see this(red) curve is drawn on top of the green curve
ctx.paint_with_z_index(1, move |ctx| {
let mut path = BezPath::new();
path.move_to((0.0, size.height));
path.quad_to((40.0, 50.0), (size.width, 0.0));
// Create a color
let stroke_color = Color::rgb8(128, 0, 0);
// Stroke the path with thickness 1.0
ctx.stroke(path, &stroke_color, 5.0);
});
// Create an arbitrary bezier path
let mut path = BezPath::new();
path.move_to(Point::ORIGIN);
path.quad_to((40.0, 50.0), (size.width, size.height));
// Create a color
let stroke_color = Color::rgb8(0, 128, 0);
// Stroke the path with thickness 5.0
ctx.stroke(path, &stroke_color, 5.0);
// Rectangles: the path for practical people
let rect = Rect::from_origin_size((10.0, 10.0), (100.0, 100.0));
// Note the Color:rgba8 which includes an alpha channel (7F in this case)
let fill_color = Color::rgba8(0x00, 0x00, 0x00, 0x7F);
ctx.fill(rect, &fill_color);
// Text is easy; in real use TextLayout should either be stored in the
// widget and reused, or a label child widget to manage it all.
// This is one way of doing it, you can also use a builder-style way.
let mut layout = TextLayout::<String>::from_text(data);
layout.set_font(FontDescriptor::new(FontFamily::SERIF).with_size(24.0));
layout.set_text_color(fill_color);
layout.rebuild_if_needed(ctx.text(), env);
// Let's rotate our text slightly. First we save our current (default) context:
ctx.with_save(|ctx| {
// Now we can rotate the context (or set a clip path, for instance):
// This makes it so that anything drawn after this (in the closure) is
// transformed.
// The transformation is in radians, but be aware it transforms the canvas,
// not just the part you are drawing. So we draw at (80.0, 40.0) on the rotated
// canvas, this is NOT the same position as (80.0, 40.0) on the original canvas.
ctx.transform(Affine::rotate(std::f64::consts::FRAC_PI_4));
layout.draw(ctx, (80.0, 40.0));
});
// When we exit with_save, the original context's rotation is restored
// This is the builder-style way of drawing text.
let text = ctx.text();
let layout = text
.new_text_layout(data.clone())
.font(FontFamily::SERIF, 24.0)
.text_color(Color::rgb8(128, 0, 0))
.build()
.unwrap();
ctx.draw_text(&layout, (100.0, 25.0));
// Let's burn some CPU to make a (partially transparent) image buffer
let image_data = make_image_data(256, 256);
let image = ctx
.make_image(256, 256, &image_data, ImageFormat::RgbaSeparate)
.unwrap();
// The image is automatically scaled to fit the rect you pass to draw_image
ctx.draw_image(&image, size.to_rect(), InterpolationMode::Bilinear);
}
}
pub fn main() {
let window = WindowDesc::new(CustomWidget {}).title(LocalizedString::new("Fancy Colors"));
AppLauncher::with_window(window)
.log_to_console()
.launch("Druid + Piet".to_string())
.expect("launch failed");
}
fn make_image_data(width: usize, height: usize) -> Vec<u8> {
let mut result = vec![0; width * height * 4];
for y in 0..height {
for x in 0..width {
let ix = (y * width + x) * 4;
result[ix] = x as u8;
result[ix + 1] = y as u8;
result[ix + 2] = !(x as u8);
result[ix + 3] = 127;
}
}
result
}