Components / Eyedropper
Eyedropper
An armed button that takes the color of the point clicked, supplied by the caller.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn eyedropper() -> impl View {
let shown = State::new(Color::rgb(0.5, 0.5, 0.5));
let told = shown.clone();
let dropper = EyedropperState::new().on_pick(move |color| told.set(color));
let ramp = |x: f32, y: f32| Color::rgb(x / 300.0, y / 130.0, 0.5);
let picture = Canvas::new(move |frame, scene| {
for i in 0..30 {
let x = i as f32 * 10.0;
let band = Rect::new(frame.x() + x, frame.y(), 10.0, frame.height());
scene.push_quad(Quad::new(band, ramp(x, 65.0)));
}
})
.size(300.0, 130.0);
let swatch = Canvas::new(move |frame, scene| {
scene.push_quad(Quad::new(frame, shown.get()).radius(4.0));
})
.size(28.0, 28.0);
VStack::new((
HStack::new((Eyedropper::new(&dropper), swatch)).spacing(8.0),
EyedropperArea::new(&dropper, move |at| Some(ramp(at.x, at.y))).stage(picture),
))
.spacing(8.0)
}