Components / ZoomPanView
ZoomPanView
Zoom and pan with pinch, wheel, drag, keys and inertia, within limits.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn zoom_pan_view() -> impl View {
let view = State::new(ZoomView::fit());
let content = Size::new(1200.0, 800.0);
let picture = |frame: ZoomPanPaint, scene: &mut Scene| {
// ravenrs-lint: allow(raw_color) the stand-in photograph being zoomed: its colors are the content
scene.push_quad(Quad::new(frame.placed, Color::rgb(0.16, 0.3, 0.5)));
let side = 120.0 * frame.scale;
// ravenrs-lint: allow(raw_color) the stand-in photograph being zoomed: its colors are the content
for (i, color) in [Color::rgb(0.9, 0.45, 0.3), Color::rgb(0.95, 0.8, 0.3)].into_iter().enumerate() {
let x = frame.placed.x() + frame.placed.width() * (0.2 + 0.4 * i as f32);
let y = frame.placed.y() + frame.placed.height() * 0.35;
scene.push_quad(Quad::new(Rect::new(x, y, side, side), color).radius(side / 2.0));
}
};
VStack::new((
ZoomControl::new(view.binding()),
ZoomPanView::custom(view.binding(), content, picture).size(420.0, 200.0).label("Sample picture"),
))
.spacing(8.0)
}