Merge pull request #193 from hecrj/feature/canvas

Canvas widget for 2D graphics
This commit is contained in:
Héctor Ramón 2020-02-20 05:51:18 +01:00 committed by GitHub
commit 17271eae67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 2096 additions and 211 deletions

View File

@ -16,6 +16,8 @@ categories = ["gui"]
image = ["iced_wgpu/image"]
# Enables the `Svg` widget
svg = ["iced_wgpu/svg"]
# Enables the `Canvas` widget
canvas = ["iced_wgpu/canvas"]
# Enables a debug view in native platforms (press F12)
debug = ["iced_winit/debug"]
# Enables `tokio` as the `executor::Default` on native platforms
@ -36,6 +38,7 @@ members = [
"wgpu",
"winit",
"examples/bezier_tool",
"examples/clock",
"examples/counter",
"examples/custom_widget",
"examples/events",
@ -43,6 +46,7 @@ members = [
"examples/integration",
"examples/pokedex",
"examples/progress_bar",
"examples/solar_system",
"examples/stopwatch",
"examples/styling",
"examples/svg",

View File

@ -44,11 +44,18 @@ impl Color {
///
/// [`Color`]: struct.Color.html
pub fn from_rgb8(r: u8, g: u8, b: u8) -> Color {
Color::from_rgba8(r, g, b, 1.0)
}
/// Creates a [`Color`] from its RGB8 components and an alpha value.
///
/// [`Color`]: struct.Color.html
pub fn from_rgba8(r: u8, g: u8, b: u8, a: f32) -> Color {
Color {
r: f32::from(r) / 255.0,
g: f32::from(g) / 255.0,
b: f32::from(b) / 255.0,
a: 1.0,
a,
}
}

View File

@ -22,6 +22,7 @@ mod font;
mod length;
mod point;
mod rectangle;
mod size;
mod vector;
pub use align::{Align, HorizontalAlignment, VerticalAlignment};
@ -31,4 +32,5 @@ pub use font::Font;
pub use length::Length;
pub use point::Point;
pub use rectangle::Rectangle;
pub use size::Size;
pub use vector::Vector;

View File

@ -11,10 +11,15 @@ pub struct Point {
}
impl Point {
/// The origin (i.e. a [`Point`] with both X=0 and Y=0).
///
/// [`Point`]: struct.Point.html
pub const ORIGIN: Point = Point::new(0.0, 0.0);
/// Creates a new [`Point`] with the given coordinates.
///
/// [`Point`]: struct.Point.html
pub fn new(x: f32, y: f32) -> Self {
pub const fn new(x: f32, y: f32) -> Self {
Self { x, y }
}
}

View File

@ -94,7 +94,7 @@ mod bezier {
layout: Layout<'_>,
cursor_position: Point,
) -> (Primitive, MouseCursor) {
let mut buffer: VertexBuffers<Vertex2D, u16> = VertexBuffers::new();
let mut buffer: VertexBuffers<Vertex2D, u32> = VertexBuffers::new();
let mut path_builder = lyon::path::Path::builder();
let bounds = layout.bounds();
@ -102,7 +102,7 @@ mod bezier {
// Draw rectangle border with lyon.
basic_shapes::stroke_rectangle(
&lyon::math::Rect::new(
lyon::math::Point::new(bounds.x + 0.5, bounds.y + 0.5),
lyon::math::Point::new(0.5, 0.5),
lyon::math::Size::new(
bounds.width - 1.0,
bounds.height - 1.0,
@ -121,48 +121,35 @@ mod bezier {
for curve in self.curves {
path_builder.move_to(lyon::math::Point::new(
curve.from.x + bounds.x,
curve.from.y + bounds.y,
curve.from.x,
curve.from.y,
));
path_builder.quadratic_bezier_to(
lyon::math::Point::new(
curve.control.x + bounds.x,
curve.control.y + bounds.y,
),
lyon::math::Point::new(
curve.to.x + bounds.x,
curve.to.y + bounds.y,
),
lyon::math::Point::new(curve.control.x, curve.control.y),
lyon::math::Point::new(curve.to.x, curve.to.y),
);
}
match self.state.pending {
None => {}
Some(Pending::One { from }) => {
path_builder.move_to(lyon::math::Point::new(
from.x + bounds.x,
from.y + bounds.y,
));
path_builder
.move_to(lyon::math::Point::new(from.x, from.y));
path_builder.line_to(lyon::math::Point::new(
cursor_position.x,
cursor_position.y,
cursor_position.x - bounds.x,
cursor_position.y - bounds.y,
));
}
Some(Pending::Two { from, to }) => {
path_builder.move_to(lyon::math::Point::new(
from.x + bounds.x,
from.y + bounds.y,
));
path_builder
.move_to(lyon::math::Point::new(from.x, from.y));
path_builder.quadratic_bezier_to(
lyon::math::Point::new(
cursor_position.x,
cursor_position.y,
),
lyon::math::Point::new(
to.x + bounds.x,
to.y + bounds.y,
cursor_position.x - bounds.x,
cursor_position.y - bounds.y,
),
lyon::math::Point::new(to.x, to.y),
);
}
}
@ -186,10 +173,13 @@ mod bezier {
)
.unwrap();
let mesh = Primitive::Mesh2D(Arc::new(Mesh2D {
vertices: buffer.vertices,
indices: buffer.indices,
}));
let mesh = Primitive::Mesh2D {
origin: Point::new(bounds.x, bounds.y),
buffers: Arc::new(Mesh2D {
vertices: buffer.vertices,
indices: buffer.indices,
}),
};
(
Primitive::Clip {
@ -296,7 +286,10 @@ use iced::{
};
pub fn main() {
Example::run(Settings::default())
Example::run(Settings {
antialiasing: true,
..Settings::default()
});
}
#[derive(Default)]

15
examples/clock/Cargo.toml Normal file
View File

@ -0,0 +1,15 @@
[package]
name = "clock"
version = "0.1.0"
authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
edition = "2018"
publish = false
[features]
canvas = []
[dependencies]
iced = { path = "../..", features = ["canvas", "async-std", "debug"] }
iced_native = { path = "../../native" }
chrono = "0.4"
async-std = { version = "1.0", features = ["unstable"] }

193
examples/clock/src/main.rs Normal file
View File

@ -0,0 +1,193 @@
use iced::{
canvas, executor, Application, Canvas, Color, Command, Container, Element,
Length, Point, Settings, Subscription, Vector,
};
pub fn main() {
Clock::run(Settings {
antialiasing: true,
..Settings::default()
})
}
struct Clock {
now: LocalTime,
clock: canvas::layer::Cache<LocalTime>,
}
#[derive(Debug, Clone, Copy)]
enum Message {
Tick(chrono::DateTime<chrono::Local>),
}
impl Application for Clock {
type Executor = executor::Default;
type Message = Message;
fn new() -> (Self, Command<Message>) {
(
Clock {
now: chrono::Local::now().into(),
clock: canvas::layer::Cache::new(),
},
Command::none(),
)
}
fn title(&self) -> String {
String::from("Clock - Iced")
}
fn update(&mut self, message: Message) -> Command<Message> {
match message {
Message::Tick(local_time) => {
let now = local_time.into();
if now != self.now {
self.now = now;
self.clock.clear();
}
}
}
Command::none()
}
fn subscription(&self) -> Subscription<Message> {
time::every(std::time::Duration::from_millis(500)).map(Message::Tick)
}
fn view(&mut self) -> Element<Message> {
let canvas = Canvas::new()
.width(Length::Units(400))
.height(Length::Units(400))
.push(self.clock.with(&self.now));
Container::new(canvas)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.into()
}
}
#[derive(Debug, PartialEq, Eq)]
struct LocalTime {
hour: u32,
minute: u32,
second: u32,
}
impl From<chrono::DateTime<chrono::Local>> for LocalTime {
fn from(date_time: chrono::DateTime<chrono::Local>) -> LocalTime {
use chrono::Timelike;
LocalTime {
hour: date_time.hour(),
minute: date_time.minute(),
second: date_time.second(),
}
}
}
impl canvas::Drawable for LocalTime {
fn draw(&self, frame: &mut canvas::Frame) {
let center = frame.center();
let radius = frame.width().min(frame.height()) / 2.0;
let offset = Vector::new(center.x, center.y);
let clock = canvas::Path::new(|path| path.circle(center, radius));
frame.fill(
&clock,
canvas::Fill::Color(Color::from_rgb8(0x12, 0x93, 0xD8)),
);
fn draw_hand(
n: u32,
total: u32,
length: f32,
offset: Vector,
path: &mut canvas::path::Builder,
) {
let turns = n as f32 / total as f32;
let t = 2.0 * std::f32::consts::PI * (turns - 0.25);
let x = length * t.cos();
let y = length * t.sin();
path.line_to(Point::new(x, y) + offset);
}
let hour_and_minute_hands = canvas::Path::new(|path| {
path.move_to(center);
draw_hand(self.hour, 12, 0.5 * radius, offset, path);
path.move_to(center);
draw_hand(self.minute, 60, 0.8 * radius, offset, path)
});
frame.stroke(
&hour_and_minute_hands,
canvas::Stroke {
width: 6.0,
color: Color::WHITE,
line_cap: canvas::LineCap::Round,
..canvas::Stroke::default()
},
);
let second_hand = canvas::Path::new(|path| {
path.move_to(center);
draw_hand(self.second, 60, 0.8 * radius, offset, path)
});
frame.stroke(
&second_hand,
canvas::Stroke {
width: 3.0,
color: Color::WHITE,
line_cap: canvas::LineCap::Round,
..canvas::Stroke::default()
},
);
}
}
mod time {
use iced::futures;
pub fn every(
duration: std::time::Duration,
) -> iced::Subscription<chrono::DateTime<chrono::Local>> {
iced::Subscription::from_recipe(Every(duration))
}
struct Every(std::time::Duration);
impl<H, I> iced_native::subscription::Recipe<H, I> for Every
where
H: std::hash::Hasher,
{
type Output = chrono::DateTime<chrono::Local>;
fn hash(&self, state: &mut H) {
use std::hash::Hash;
std::any::TypeId::of::<Self>().hash(state);
self.0.hash(state);
}
fn stream(
self: Box<Self>,
_input: futures::stream::BoxStream<'static, I>,
) -> futures::stream::BoxStream<'static, Self::Output> {
use futures::stream::StreamExt;
async_std::stream::interval(self.0)
.map(|_| chrono::Local::now())
.boxed()
}
}
}

View File

@ -69,72 +69,75 @@ mod rainbow {
let posn_center = {
if b.contains(cursor_position) {
[cursor_position.x, cursor_position.y]
[cursor_position.x - b.x, cursor_position.y - b.y]
} else {
[b.x + (b.width / 2.0), b.y + (b.height / 2.0)]
[b.width / 2.0, b.height / 2.0]
}
};
let posn_tl = [b.x, b.y];
let posn_t = [b.x + (b.width / 2.0), b.y];
let posn_tr = [b.x + b.width, b.y];
let posn_r = [b.x + b.width, b.y + (b.height / 2.0)];
let posn_br = [b.x + b.width, b.y + b.height];
let posn_b = [b.x + (b.width / 2.0), b.y + b.height];
let posn_bl = [b.x, b.y + b.height];
let posn_l = [b.x, b.y + (b.height / 2.0)];
let posn_tl = [0.0, 0.0];
let posn_t = [b.width / 2.0, 0.0];
let posn_tr = [b.width, 0.0];
let posn_r = [b.width, b.height / 2.0];
let posn_br = [b.width, b.height];
let posn_b = [(b.width / 2.0), b.height];
let posn_bl = [0.0, b.height];
let posn_l = [0.0, b.height / 2.0];
(
Primitive::Mesh2D(std::sync::Arc::new(Mesh2D {
vertices: vec![
Vertex2D {
position: posn_center,
color: [1.0, 1.0, 1.0, 1.0],
},
Vertex2D {
position: posn_tl,
color: color_r,
},
Vertex2D {
position: posn_t,
color: color_o,
},
Vertex2D {
position: posn_tr,
color: color_y,
},
Vertex2D {
position: posn_r,
color: color_g,
},
Vertex2D {
position: posn_br,
color: color_gb,
},
Vertex2D {
position: posn_b,
color: color_b,
},
Vertex2D {
position: posn_bl,
color: color_i,
},
Vertex2D {
position: posn_l,
color: color_v,
},
],
indices: vec![
0, 1, 2, // TL
0, 2, 3, // T
0, 3, 4, // TR
0, 4, 5, // R
0, 5, 6, // BR
0, 6, 7, // B
0, 7, 8, // BL
0, 8, 1, // L
],
})),
Primitive::Mesh2D {
origin: Point::new(b.x, b.y),
buffers: std::sync::Arc::new(Mesh2D {
vertices: vec![
Vertex2D {
position: posn_center,
color: [1.0, 1.0, 1.0, 1.0],
},
Vertex2D {
position: posn_tl,
color: color_r,
},
Vertex2D {
position: posn_t,
color: color_o,
},
Vertex2D {
position: posn_tr,
color: color_y,
},
Vertex2D {
position: posn_r,
color: color_g,
},
Vertex2D {
position: posn_br,
color: color_gb,
},
Vertex2D {
position: posn_b,
color: color_b,
},
Vertex2D {
position: posn_bl,
color: color_i,
},
Vertex2D {
position: posn_l,
color: color_v,
},
],
indices: vec![
0, 1, 2, // TL
0, 2, 3, // T
0, 3, 4, // TR
0, 4, 5, // R
0, 5, 6, // BR
0, 6, 7, // B
0, 7, 8, // BL
0, 8, 1, // L
],
}),
},
MouseCursor::OutOfBounds,
)
}

View File

@ -0,0 +1,15 @@
[package]
name = "solar_system"
version = "0.1.0"
authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
edition = "2018"
publish = false
[features]
canvas = []
[dependencies]
iced = { path = "../..", features = ["canvas", "async-std", "debug"] }
iced_native = { path = "../../native" }
async-std = { version = "1.0", features = ["unstable"] }
rand = "0.7"

View File

@ -0,0 +1,247 @@
//! An animated solar system.
//!
//! This example showcases how to use a `Canvas` widget with transforms to draw
//! using different coordinate systems.
//!
//! Inspired by the example found in the MDN docs[1].
//!
//! [1]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_solar_system
use iced::{
canvas, executor, Application, Canvas, Color, Command, Container, Element,
Length, Point, Settings, Size, Subscription, Vector,
};
use std::time::Instant;
pub fn main() {
SolarSystem::run(Settings {
antialiasing: true,
..Settings::default()
})
}
struct SolarSystem {
state: State,
solar_system: canvas::layer::Cache<State>,
}
#[derive(Debug, Clone, Copy)]
enum Message {
Tick(Instant),
}
impl Application for SolarSystem {
type Executor = executor::Default;
type Message = Message;
fn new() -> (Self, Command<Message>) {
(
SolarSystem {
state: State::new(),
solar_system: canvas::layer::Cache::new(),
},
Command::none(),
)
}
fn title(&self) -> String {
String::from("Solar system - Iced")
}
fn update(&mut self, message: Message) -> Command<Message> {
match message {
Message::Tick(instant) => {
self.state.update(instant);
self.solar_system.clear();
}
}
Command::none()
}
fn subscription(&self) -> Subscription<Message> {
time::every(std::time::Duration::from_millis(10))
.map(|instant| Message::Tick(instant))
}
fn view(&mut self) -> Element<Message> {
let canvas = Canvas::new()
.width(Length::Fill)
.height(Length::Fill)
.push(self.solar_system.with(&self.state));
Container::new(canvas)
.width(Length::Fill)
.height(Length::Fill)
.center_x()
.center_y()
.into()
}
}
#[derive(Debug)]
struct State {
start: Instant,
current: Instant,
stars: Vec<(Point, f32)>,
}
impl State {
const SUN_RADIUS: f32 = 70.0;
const ORBIT_RADIUS: f32 = 150.0;
const EARTH_RADIUS: f32 = 12.0;
const MOON_RADIUS: f32 = 4.0;
const MOON_DISTANCE: f32 = 28.0;
pub fn new() -> State {
let now = Instant::now();
let (width, height) = Settings::default().window.size;
State {
start: now,
current: now,
stars: {
use rand::Rng;
let mut rng = rand::thread_rng();
(0..100)
.map(|_| {
(
Point::new(
rng.gen_range(0.0, width as f32),
rng.gen_range(0.0, height as f32),
),
rng.gen_range(0.5, 1.0),
)
})
.collect()
},
}
}
pub fn update(&mut self, now: Instant) {
self.current = now;
}
}
impl canvas::Drawable for State {
fn draw(&self, frame: &mut canvas::Frame) {
use canvas::{Fill, Path, Stroke};
use std::f32::consts::PI;
let center = frame.center();
let space = Path::new(|path| {
path.rectangle(Point::new(0.0, 0.0), frame.size())
});
let stars = Path::new(|path| {
for (p, size) in &self.stars {
path.rectangle(*p, Size::new(*size, *size));
}
});
let sun = Path::new(|path| path.circle(center, Self::SUN_RADIUS));
let orbit = Path::new(|path| path.circle(center, Self::ORBIT_RADIUS));
frame.fill(&space, Fill::Color(Color::BLACK));
frame.fill(&stars, Fill::Color(Color::WHITE));
frame.fill(&sun, Fill::Color(Color::from_rgb8(0xF9, 0xD7, 0x1C)));
frame.stroke(
&orbit,
Stroke {
width: 1.0,
color: Color::from_rgba8(0, 153, 255, 0.1),
..Stroke::default()
},
);
let elapsed = self.current - self.start;
let elapsed_seconds = elapsed.as_secs() as f32;
let elapsed_millis = elapsed.subsec_millis() as f32;
frame.with_save(|frame| {
frame.translate(Vector::new(center.x, center.y));
frame.rotate(
(2.0 * PI / 60.0) * elapsed_seconds
+ (2.0 * PI / 60_000.0) * elapsed_millis,
);
frame.translate(Vector::new(Self::ORBIT_RADIUS, 0.0));
let earth = Path::new(|path| {
path.circle(Point::ORIGIN, Self::EARTH_RADIUS)
});
let shadow = Path::new(|path| {
path.rectangle(
Point::new(0.0, -Self::EARTH_RADIUS),
Size::new(
Self::EARTH_RADIUS * 4.0,
Self::EARTH_RADIUS * 2.0,
),
)
});
frame.fill(&earth, Fill::Color(Color::from_rgb8(0x6B, 0x93, 0xD6)));
frame.with_save(|frame| {
frame.rotate(
((2.0 * PI) / 6.0) * elapsed_seconds
+ ((2.0 * PI) / 6_000.0) * elapsed_millis,
);
frame.translate(Vector::new(0.0, Self::MOON_DISTANCE));
let moon = Path::new(|path| {
path.circle(Point::ORIGIN, Self::MOON_RADIUS)
});
frame.fill(&moon, Fill::Color(Color::WHITE));
});
frame.fill(
&shadow,
Fill::Color(Color {
a: 0.7,
..Color::BLACK
}),
);
});
}
}
mod time {
use iced::futures;
use std::time::Instant;
pub fn every(duration: std::time::Duration) -> iced::Subscription<Instant> {
iced::Subscription::from_recipe(Every(duration))
}
struct Every(std::time::Duration);
impl<H, I> iced_native::subscription::Recipe<H, I> for Every
where
H: std::hash::Hasher,
{
type Output = Instant;
fn hash(&self, state: &mut H) {
use std::hash::Hash;
std::any::TypeId::of::<Self>().hash(state);
self.0.hash(state);
}
fn stream(
self: Box<Self>,
_input: futures::stream::BoxStream<'static, I>,
) -> futures::stream::BoxStream<'static, Self::Output> {
use futures::stream::StreamExt;
async_std::stream::interval(self.0)
.map(|_| Instant::now())
.boxed()
}
}
}

View File

@ -52,12 +52,11 @@ mod event;
mod hasher;
mod mouse_cursor;
mod runtime;
mod size;
mod user_interface;
pub use iced_core::{
Align, Background, Color, Font, HorizontalAlignment, Length, Point,
Rectangle, Vector, VerticalAlignment,
Rectangle, Size, Vector, VerticalAlignment,
};
pub use iced_futures::{executor, futures, Command};
@ -72,7 +71,6 @@ pub use layout::Layout;
pub use mouse_cursor::MouseCursor;
pub use renderer::Renderer;
pub use runtime::Runtime;
pub use size::Size;
pub use subscription::Subscription;
pub use user_interface::{Cache, UserInterface};
pub use widget::*;

View File

@ -178,6 +178,11 @@ pub trait Application: Sized {
_settings.into(),
iced_wgpu::Settings {
default_font: _settings.default_font,
antialiasing: if _settings.antialiasing {
Some(iced_wgpu::settings::Antialiasing::MSAAx4)
} else {
None
},
},
);

View File

@ -204,5 +204,5 @@ use iced_web as common;
pub use common::{
futures, Align, Background, Color, Command, Font, HorizontalAlignment,
Length, Space, Subscription, Vector, VerticalAlignment,
Length, Point, Size, Space, Subscription, Vector, VerticalAlignment,
};

View File

@ -16,6 +16,15 @@ pub struct Settings {
/// If `None` is provided, a default system font will be chosen.
// TODO: Add `name` for web compatibility
pub default_font: Option<&'static [u8]>,
/// If set to true, the renderer will try to perform antialiasing for some
/// primitives.
///
/// Enabling it can produce a smoother result in some widgets, like the
/// `Canvas`, at a performance cost.
///
/// By default, it is disabled.
pub antialiasing: bool,
}
#[cfg(not(target_arch = "wasm32"))]

View File

@ -73,8 +73,8 @@ pub use dodrio;
pub use element::Element;
pub use hasher::Hasher;
pub use iced_core::{
Align, Background, Color, Font, HorizontalAlignment, Length, Vector,
VerticalAlignment,
Align, Background, Color, Font, HorizontalAlignment, Length, Point, Size,
Vector, VerticalAlignment,
};
pub use iced_futures::{executor, futures, Command};
pub use subscription::Subscription;

View File

@ -9,6 +9,7 @@ repository = "https://github.com/hecrj/iced"
[features]
svg = ["resvg"]
canvas = ["lyon"]
[dependencies]
iced_native = { version = "0.1.0", path = "../native" }
@ -20,5 +21,16 @@ raw-window-handle = "0.3"
glam = "0.8"
font-kit = "0.4"
log = "0.4"
resvg = { version = "0.8", features = ["raqote-backend"], optional = true }
image = { version = "0.22", optional = true }
[dependencies.image]
version = "0.22"
optional = true
[dependencies.resvg]
version = "0.8"
features = ["raqote-backend"]
optional = true
[dependencies.lyon]
version = "0.15"
optional = true

View File

@ -25,6 +25,7 @@
#![forbid(unsafe_code)]
#![forbid(rust_2018_idioms)]
pub mod defaults;
pub mod settings;
pub mod triangle;
pub mod widget;
pub mod window;
@ -33,7 +34,6 @@ mod image;
mod primitive;
mod quad;
mod renderer;
mod settings;
mod target;
mod text;
mod transformation;

View File

@ -1,5 +1,5 @@
use iced_native::{
image, svg, Background, Color, Font, HorizontalAlignment, Rectangle,
image, svg, Background, Color, Font, HorizontalAlignment, Point, Rectangle,
Vector, VerticalAlignment,
};
@ -73,7 +73,13 @@ pub enum Primitive {
/// A low-level primitive to render a mesh of triangles.
///
/// It can be used to render many kinds of geometry freely.
Mesh2D(Arc<triangle::Mesh2D>),
Mesh2D {
/// The top-left coordinate of the mesh
origin: Point,
/// The vertex and index buffers of the mesh
buffers: Arc<triangle::Mesh2D>,
},
}
impl Default for Primitive {

View File

@ -26,7 +26,7 @@ struct Layer<'a> {
offset: Vector<u32>,
quads: Vec<Quad>,
images: Vec<Image>,
meshes: Vec<Arc<triangle::Mesh2D>>,
meshes: Vec<(Point, Arc<triangle::Mesh2D>)>,
text: Vec<wgpu_glyph::Section<'a>>,
}
@ -51,7 +51,8 @@ impl Renderer {
let text_pipeline = text::Pipeline::new(device, settings.default_font);
let quad_pipeline = quad::Pipeline::new(device);
let image_pipeline = crate::image::Pipeline::new(device);
let triangle_pipeline = triangle::Pipeline::new(device);
let triangle_pipeline =
triangle::Pipeline::new(device, settings.antialiasing);
Self {
quad_pipeline,
@ -105,6 +106,8 @@ impl Renderer {
&layer,
encoder,
target.texture,
width,
height,
);
}
@ -229,8 +232,8 @@ impl Renderer {
scale: [bounds.width, bounds.height],
});
}
Primitive::Mesh2D(mesh) => {
layer.meshes.push(mesh.clone());
Primitive::Mesh2D { origin, buffers } => {
layer.meshes.push((*origin, buffers.clone()));
}
Primitive::Clip {
bounds,
@ -308,22 +311,26 @@ impl Renderer {
layer: &Layer<'_>,
encoder: &mut wgpu::CommandEncoder,
target: &wgpu::TextureView,
target_width: u32,
target_height: u32,
) {
let bounds = layer.bounds * scale_factor;
if layer.meshes.len() > 0 {
let translated = transformation
* Transformation::scale(scale_factor, scale_factor)
* Transformation::translate(
-(layer.offset.x as f32) * scale_factor,
-(layer.offset.y as f32) * scale_factor,
-(layer.offset.x as f32),
-(layer.offset.y as f32),
);
self.triangle_pipeline.draw(
device,
encoder,
target,
target_width,
target_height,
translated,
scale_factor,
&layer.meshes,
bounds,
);

View File

@ -1,10 +1,41 @@
//! Configure a [`Renderer`].
//!
//! [`Renderer`]: struct.Renderer.html
/// The settings of a [`Renderer`].
///
/// [`Renderer`]: struct.Renderer.html
/// [`Renderer`]: ../struct.Renderer.html
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub struct Settings {
/// The bytes of the font that will be used by default.
///
/// If `None` is provided, a default system font will be chosen.
pub default_font: Option<&'static [u8]>,
/// The antialiasing strategy that will be used for triangle primitives.
pub antialiasing: Option<Antialiasing>,
}
/// An antialiasing strategy.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Antialiasing {
/// Multisample AA with 2 samples
MSAAx2,
/// Multisample AA with 4 samples
MSAAx4,
/// Multisample AA with 8 samples
MSAAx8,
/// Multisample AA with 16 samples
MSAAx16,
}
impl Antialiasing {
pub(crate) fn sample_count(&self) -> u32 {
match self {
Antialiasing::MSAAx2 => 2,
Antialiasing::MSAAx4 => 4,
Antialiasing::MSAAx8 => 8,
Antialiasing::MSAAx16 => 16,
}
}
}

12
wgpu/src/shader/blit.frag Normal file
View File

@ -0,0 +1,12 @@
#version 450
layout(location = 0) in vec2 v_Uv;
layout(set = 0, binding = 0) uniform sampler u_Sampler;
layout(set = 1, binding = 0) uniform texture2D u_Texture;
layout(location = 0) out vec4 o_Color;
void main() {
o_Color = texture(sampler2D(u_Texture, u_Sampler), v_Uv);
}

Binary file not shown.

26
wgpu/src/shader/blit.vert Normal file
View File

@ -0,0 +1,26 @@
#version 450
layout(location = 0) out vec2 o_Uv;
const vec2 positions[6] = vec2[6](
vec2(-1.0, -1.0),
vec2(-1.0, 1.0),
vec2(1.0, 1.0),
vec2(-1.0, -1.0),
vec2(1.0, -1.0),
vec2(1.0, 1.0)
);
const vec2 uvs[6] = vec2[6](
vec2(0.0, 0.0),
vec2(0.0, 1.0),
vec2(1.0, 1.0),
vec2(0.0, 0.0),
vec2(1.0, 0.0),
vec2(1.0, 1.0)
);
void main() {
o_Uv = uvs[gl_VertexIndex];
gl_Position = vec4(positions[gl_VertexIndex], 0.0, 1.0);
}

Binary file not shown.

View File

@ -1,24 +0,0 @@
#version 450
layout(location = 0) in vec2 v_Pos;
layout(location = 1) in vec2 i_Pos;
layout(location = 2) in vec2 i_Scale;
layout (set = 0, binding = 0) uniform Globals {
mat4 u_Transform;
};
layout(location = 0) out vec2 o_Uv;
void main() {
o_Uv = v_Pos;
mat4 i_Transform = mat4(
vec4(i_Scale.x, 0.0, 0.0, 0.0),
vec4(0.0, i_Scale.y, 0.0, 0.0),
vec4(0.0, 0.0, 1.0, 0.0),
vec4(i_Pos, 0.0, 1.0)
);
gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0);
}

View File

@ -7,11 +7,9 @@ layout(location = 0) out vec4 o_Color;
layout (set = 0, binding = 0) uniform Globals {
mat4 u_Transform;
float u_Scale;
};
void main() {
vec2 p_Position = i_Position * u_Scale;
gl_Position = u_Transform * vec4(p_Position, 0.0, 1.0);
gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0);
o_Color = i_Color;
}

Binary file not shown.

View File

@ -1,32 +1,82 @@
//! Draw meshes of triangles.
use crate::Transformation;
use iced_native::Rectangle;
use crate::{settings, Transformation};
use iced_native::{Point, Rectangle};
use std::{mem, sync::Arc};
mod msaa;
const UNIFORM_BUFFER_SIZE: usize = 100;
const VERTEX_BUFFER_SIZE: usize = 100_000;
const INDEX_BUFFER_SIZE: usize = 100_000;
#[derive(Debug)]
pub(crate) struct Pipeline {
pipeline: wgpu::RenderPipeline,
blit: Option<msaa::Blit>,
constants: wgpu::BindGroup,
constants_buffer: wgpu::Buffer,
uniforms_buffer: Buffer<Uniforms>,
vertex_buffer: Buffer<Vertex2D>,
index_buffer: Buffer<u32>,
}
#[derive(Debug)]
struct Buffer<T> {
raw: wgpu::Buffer,
size: usize,
usage: wgpu::BufferUsage,
_type: std::marker::PhantomData<T>,
}
impl<T> Buffer<T> {
pub fn new(
device: &wgpu::Device,
size: usize,
usage: wgpu::BufferUsage,
) -> Self {
let raw = device.create_buffer(&wgpu::BufferDescriptor {
size: (std::mem::size_of::<T>() * size) as u64,
usage,
});
Buffer {
raw,
size,
usage,
_type: std::marker::PhantomData,
}
}
pub fn ensure_capacity(&mut self, device: &wgpu::Device, size: usize) {
if self.size < size {
self.raw = device.create_buffer(&wgpu::BufferDescriptor {
size: (std::mem::size_of::<T>() * size) as u64,
usage: self.usage,
});
self.size = size;
}
}
}
impl Pipeline {
pub fn new(device: &mut wgpu::Device) -> Pipeline {
pub fn new(
device: &mut wgpu::Device,
antialiasing: Option<settings::Antialiasing>,
) -> Pipeline {
let constant_layout =
device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
bindings: &[wgpu::BindGroupLayoutBinding {
binding: 0,
visibility: wgpu::ShaderStage::VERTEX,
ty: wgpu::BindingType::UniformBuffer { dynamic: false },
ty: wgpu::BindingType::UniformBuffer { dynamic: true },
}],
});
let constants_buffer = device
.create_buffer_mapped(
1,
wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
)
.fill_from_slice(&[Uniforms::default()]);
let constants_buffer = Buffer::new(
device,
UNIFORM_BUFFER_SIZE,
wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
);
let constant_bind_group =
device.create_bind_group(&wgpu::BindGroupDescriptor {
@ -34,7 +84,7 @@ impl Pipeline {
bindings: &[wgpu::Binding {
binding: 0,
resource: wgpu::BindingResource::Buffer {
buffer: &constants_buffer,
buffer: &constants_buffer.raw,
range: 0..std::mem::size_of::<Uniforms>() as u64,
},
}],
@ -91,7 +141,7 @@ impl Pipeline {
write_mask: wgpu::ColorWrite::ALL,
}],
depth_stencil_state: None,
index_format: wgpu::IndexFormat::Uint16,
index_format: wgpu::IndexFormat::Uint32,
vertex_buffers: &[wgpu::VertexBufferDescriptor {
stride: mem::size_of::<Vertex2D>() as u64,
step_mode: wgpu::InputStepMode::Vertex,
@ -110,15 +160,28 @@ impl Pipeline {
},
],
}],
sample_count: 1,
sample_count: antialiasing
.map(|a| a.sample_count())
.unwrap_or(1),
sample_mask: !0,
alpha_to_coverage_enabled: false,
});
Pipeline {
pipeline,
blit: antialiasing.map(|a| msaa::Blit::new(device, a)),
constants: constant_bind_group,
constants_buffer,
uniforms_buffer: constants_buffer,
vertex_buffer: Buffer::new(
device,
VERTEX_BUFFER_SIZE,
wgpu::BufferUsage::VERTEX | wgpu::BufferUsage::COPY_DST,
),
index_buffer: Buffer::new(
device,
INDEX_BUFFER_SIZE,
wgpu::BufferUsage::INDEX | wgpu::BufferUsage::COPY_DST,
),
}
}
@ -127,74 +190,156 @@ impl Pipeline {
device: &mut wgpu::Device,
encoder: &mut wgpu::CommandEncoder,
target: &wgpu::TextureView,
target_width: u32,
target_height: u32,
transformation: Transformation,
scale: f32,
meshes: &Vec<Arc<Mesh2D>>,
meshes: &Vec<(Point, Arc<Mesh2D>)>,
bounds: Rectangle<u32>,
) {
let uniforms = Uniforms {
transform: transformation.into(),
scale,
};
let constants_buffer = device
.create_buffer_mapped(1, wgpu::BufferUsage::COPY_SRC)
.fill_from_slice(&[uniforms]);
encoder.copy_buffer_to_buffer(
&constants_buffer,
0,
&self.constants_buffer,
0,
std::mem::size_of::<Uniforms>() as u64,
);
let mut render_pass =
encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
color_attachments: &[
wgpu::RenderPassColorAttachmentDescriptor {
attachment: target,
resolve_target: None,
load_op: wgpu::LoadOp::Load,
store_op: wgpu::StoreOp::Store,
clear_color: wgpu::Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.0,
},
},
],
depth_stencil_attachment: None,
// This looks a bit crazy, but we are just counting how many vertices
// and indices we will need to handle.
// TODO: Improve readability
let (total_vertices, total_indices) = meshes
.iter()
.map(|(_, mesh)| (mesh.vertices.len(), mesh.indices.len()))
.fold((0, 0), |(total_v, total_i), (v, i)| {
(total_v + v, total_i + i)
});
for mesh in meshes {
let vertices_buffer = device
// Then we ensure the current buffers are big enough, resizing if
// necessary
self.uniforms_buffer.ensure_capacity(device, meshes.len());
self.vertex_buffer.ensure_capacity(device, total_vertices);
self.index_buffer.ensure_capacity(device, total_indices);
let mut uniforms: Vec<Uniforms> = Vec::with_capacity(meshes.len());
let mut offsets: Vec<(
wgpu::BufferAddress,
wgpu::BufferAddress,
usize,
)> = Vec::with_capacity(meshes.len());
let mut last_vertex = 0;
let mut last_index = 0;
// We upload everything upfront
for (origin, mesh) in meshes {
let transform = Uniforms {
transform: (transformation
* Transformation::translate(origin.x, origin.y))
.into(),
};
let vertex_buffer = device
.create_buffer_mapped(
mesh.vertices.len(),
wgpu::BufferUsage::VERTEX,
wgpu::BufferUsage::COPY_SRC,
)
.fill_from_slice(&mesh.vertices);
let indices_buffer = device
let index_buffer = device
.create_buffer_mapped(
mesh.indices.len(),
wgpu::BufferUsage::INDEX,
wgpu::BufferUsage::COPY_SRC,
)
.fill_from_slice(&mesh.indices);
render_pass.set_pipeline(&self.pipeline);
render_pass.set_bind_group(0, &self.constants, &[]);
render_pass.set_index_buffer(&indices_buffer, 0);
render_pass.set_vertex_buffers(0, &[(&vertices_buffer, 0)]);
render_pass.set_scissor_rect(
bounds.x,
bounds.y,
bounds.width,
bounds.height,
encoder.copy_buffer_to_buffer(
&vertex_buffer,
0,
&self.vertex_buffer.raw,
last_vertex as u64,
(std::mem::size_of::<Vertex2D>() * mesh.vertices.len()) as u64,
);
render_pass.draw_indexed(0..mesh.indices.len() as u32, 0, 0..1);
encoder.copy_buffer_to_buffer(
&index_buffer,
0,
&self.index_buffer.raw,
last_index as u64,
(std::mem::size_of::<u32>() * mesh.indices.len()) as u64,
);
uniforms.push(transform);
offsets.push((
last_vertex as u64,
last_index as u64,
mesh.indices.len(),
));
last_vertex += mesh.vertices.len();
last_index += mesh.indices.len();
}
let uniforms_buffer = device
.create_buffer_mapped(uniforms.len(), wgpu::BufferUsage::COPY_SRC)
.fill_from_slice(&uniforms);
encoder.copy_buffer_to_buffer(
&uniforms_buffer,
0,
&self.uniforms_buffer.raw,
0,
(std::mem::size_of::<Uniforms>() * uniforms.len()) as u64,
);
{
let (attachment, resolve_target, load_op) =
if let Some(blit) = &mut self.blit {
let (attachment, resolve_target) =
blit.targets(device, target_width, target_height);
(attachment, Some(resolve_target), wgpu::LoadOp::Clear)
} else {
(target, None, wgpu::LoadOp::Load)
};
let mut render_pass =
encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
color_attachments: &[
wgpu::RenderPassColorAttachmentDescriptor {
attachment,
resolve_target,
load_op,
store_op: wgpu::StoreOp::Store,
clear_color: wgpu::Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.0,
},
},
],
depth_stencil_attachment: None,
});
for (i, (vertex_offset, index_offset, indices)) in
offsets.drain(..).enumerate()
{
render_pass.set_pipeline(&self.pipeline);
render_pass.set_bind_group(
0,
&self.constants,
&[(std::mem::size_of::<Uniforms>() * i) as u64],
);
render_pass
.set_index_buffer(&self.index_buffer.raw, index_offset);
render_pass.set_vertex_buffers(
0,
&[(&self.vertex_buffer.raw, vertex_offset)],
);
render_pass.set_scissor_rect(
bounds.x,
bounds.y,
bounds.width,
bounds.height,
);
render_pass.draw_indexed(0..indices as u32, 0, 0..1);
}
}
if let Some(blit) = &mut self.blit {
blit.draw(encoder, target);
}
}
}
@ -203,14 +348,12 @@ impl Pipeline {
#[derive(Debug, Clone, Copy)]
struct Uniforms {
transform: [f32; 16],
scale: f32,
}
impl Default for Uniforms {
fn default() -> Self {
Self {
transform: *Transformation::identity().as_ref(),
scale: 1.0,
}
}
}
@ -235,5 +378,5 @@ pub struct Mesh2D {
/// The list of vertex indices that defines the triangles of the mesh.
///
/// Therefore, this list should always have a length that is a multiple of 3.
pub indices: Vec<u16>,
pub indices: Vec<u32>,
}

258
wgpu/src/triangle/msaa.rs Normal file
View File

@ -0,0 +1,258 @@
use crate::settings;
#[derive(Debug)]
pub struct Blit {
pipeline: wgpu::RenderPipeline,
constants: wgpu::BindGroup,
texture_layout: wgpu::BindGroupLayout,
sample_count: u32,
targets: Option<Targets>,
}
impl Blit {
pub fn new(
device: &wgpu::Device,
antialiasing: settings::Antialiasing,
) -> Blit {
let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
address_mode_u: wgpu::AddressMode::ClampToEdge,
address_mode_v: wgpu::AddressMode::ClampToEdge,
address_mode_w: wgpu::AddressMode::ClampToEdge,
mag_filter: wgpu::FilterMode::Linear,
min_filter: wgpu::FilterMode::Linear,
mipmap_filter: wgpu::FilterMode::Linear,
lod_min_clamp: -100.0,
lod_max_clamp: 100.0,
compare_function: wgpu::CompareFunction::Always,
});
let constant_layout =
device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
bindings: &[wgpu::BindGroupLayoutBinding {
binding: 0,
visibility: wgpu::ShaderStage::FRAGMENT,
ty: wgpu::BindingType::Sampler,
}],
});
let constant_bind_group =
device.create_bind_group(&wgpu::BindGroupDescriptor {
layout: &constant_layout,
bindings: &[wgpu::Binding {
binding: 0,
resource: wgpu::BindingResource::Sampler(&sampler),
}],
});
let texture_layout =
device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
bindings: &[wgpu::BindGroupLayoutBinding {
binding: 0,
visibility: wgpu::ShaderStage::FRAGMENT,
ty: wgpu::BindingType::SampledTexture {
multisampled: false,
dimension: wgpu::TextureViewDimension::D2,
},
}],
});
let layout =
device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
bind_group_layouts: &[&constant_layout, &texture_layout],
});
let vs = include_bytes!("../shader/blit.vert.spv");
let vs_module = device.create_shader_module(
&wgpu::read_spirv(std::io::Cursor::new(&vs[..]))
.expect("Read blit vertex shader as SPIR-V"),
);
let fs = include_bytes!("../shader/blit.frag.spv");
let fs_module = device.create_shader_module(
&wgpu::read_spirv(std::io::Cursor::new(&fs[..]))
.expect("Read blit fragment shader as SPIR-V"),
);
let pipeline =
device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
layout: &layout,
vertex_stage: wgpu::ProgrammableStageDescriptor {
module: &vs_module,
entry_point: "main",
},
fragment_stage: Some(wgpu::ProgrammableStageDescriptor {
module: &fs_module,
entry_point: "main",
}),
rasterization_state: Some(wgpu::RasterizationStateDescriptor {
front_face: wgpu::FrontFace::Cw,
cull_mode: wgpu::CullMode::None,
depth_bias: 0,
depth_bias_slope_scale: 0.0,
depth_bias_clamp: 0.0,
}),
primitive_topology: wgpu::PrimitiveTopology::TriangleList,
color_states: &[wgpu::ColorStateDescriptor {
format: wgpu::TextureFormat::Bgra8UnormSrgb,
color_blend: wgpu::BlendDescriptor {
src_factor: wgpu::BlendFactor::SrcAlpha,
dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
operation: wgpu::BlendOperation::Add,
},
alpha_blend: wgpu::BlendDescriptor {
src_factor: wgpu::BlendFactor::One,
dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
operation: wgpu::BlendOperation::Add,
},
write_mask: wgpu::ColorWrite::ALL,
}],
depth_stencil_state: None,
index_format: wgpu::IndexFormat::Uint16,
vertex_buffers: &[],
sample_count: 1,
sample_mask: !0,
alpha_to_coverage_enabled: false,
});
Blit {
pipeline,
constants: constant_bind_group,
texture_layout: texture_layout,
sample_count: antialiasing.sample_count(),
targets: None,
}
}
pub fn targets(
&mut self,
device: &wgpu::Device,
width: u32,
height: u32,
) -> (&wgpu::TextureView, &wgpu::TextureView) {
match &mut self.targets {
None => {
self.targets = Some(Targets::new(
&device,
&self.texture_layout,
self.sample_count,
width,
height,
));
}
Some(targets) => {
if targets.width != width || targets.height != height {
self.targets = Some(Targets::new(
&device,
&self.texture_layout,
self.sample_count,
width,
height,
));
}
}
}
let targets = self.targets.as_ref().unwrap();
(&targets.attachment, &targets.resolve)
}
pub fn draw(
&self,
encoder: &mut wgpu::CommandEncoder,
target: &wgpu::TextureView,
) {
let mut render_pass =
encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
color_attachments: &[
wgpu::RenderPassColorAttachmentDescriptor {
attachment: target,
resolve_target: None,
load_op: wgpu::LoadOp::Load,
store_op: wgpu::StoreOp::Store,
clear_color: wgpu::Color {
r: 0.0,
g: 0.0,
b: 0.0,
a: 0.0,
},
},
],
depth_stencil_attachment: None,
});
render_pass.set_pipeline(&self.pipeline);
render_pass.set_bind_group(0, &self.constants, &[]);
render_pass.set_bind_group(
1,
&self.targets.as_ref().unwrap().bind_group,
&[],
);
render_pass.draw(0..6, 0..1);
}
}
#[derive(Debug)]
struct Targets {
attachment: wgpu::TextureView,
resolve: wgpu::TextureView,
bind_group: wgpu::BindGroup,
width: u32,
height: u32,
}
impl Targets {
pub fn new(
device: &wgpu::Device,
texture_layout: &wgpu::BindGroupLayout,
sample_count: u32,
width: u32,
height: u32,
) -> Targets {
let extent = wgpu::Extent3d {
width,
height,
depth: 1,
};
let attachment = device.create_texture(&wgpu::TextureDescriptor {
size: extent,
array_layer_count: 1,
mip_level_count: 1,
sample_count,
dimension: wgpu::TextureDimension::D2,
format: wgpu::TextureFormat::Bgra8UnormSrgb,
usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT,
});
let resolve = device.create_texture(&wgpu::TextureDescriptor {
size: extent,
array_layer_count: 1,
mip_level_count: 1,
sample_count: 1,
dimension: wgpu::TextureDimension::D2,
format: wgpu::TextureFormat::Bgra8UnormSrgb,
usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT
| wgpu::TextureUsage::SAMPLED,
});
let attachment = attachment.create_default_view();
let resolve = resolve.create_default_view();
let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
layout: texture_layout,
bindings: &[wgpu::Binding {
binding: 0,
resource: wgpu::BindingResource::TextureView(&resolve),
}],
});
Targets {
attachment,
resolve,
bind_group,
width,
height,
}
}
}

View File

@ -32,3 +32,10 @@ pub use scrollable::Scrollable;
pub use slider::Slider;
#[doc(no_inline)]
pub use text_input::TextInput;
#[cfg(feature = "canvas")]
pub mod canvas;
#[cfg(feature = "canvas")]
#[doc(no_inline)]
pub use canvas::Canvas;

149
wgpu/src/widget/canvas.rs Normal file
View File

@ -0,0 +1,149 @@
//! Draw 2D graphics for your users.
//!
//! A [`Canvas`] widget can be used to draw different kinds of 2D shapes in a
//! [`Frame`]. It can be used for animation, data visualization, game graphics,
//! and more!
//!
//! [`Canvas`]: struct.Canvas.html
//! [`Frame`]: struct.Frame.html
use crate::{Defaults, Primitive, Renderer};
use iced_native::{
layout, Element, Hasher, Layout, Length, MouseCursor, Point, Size, Widget,
};
use std::hash::Hash;
pub mod layer;
pub mod path;
mod drawable;
mod fill;
mod frame;
mod stroke;
pub use drawable::Drawable;
pub use fill::Fill;
pub use frame::Frame;
pub use layer::Layer;
pub use path::Path;
pub use stroke::{LineCap, LineJoin, Stroke};
/// A widget capable of drawing 2D graphics.
///
/// A [`Canvas`] may contain multiple layers. A [`Layer`] is drawn using the
/// painter's algorithm. In other words, layers will be drawn on top of each in
/// the same order they are pushed into the [`Canvas`].
///
/// [`Canvas`]: struct.Canvas.html
/// [`Layer`]: layer/trait.Layer.html
#[derive(Debug)]
pub struct Canvas<'a> {
width: Length,
height: Length,
layers: Vec<Box<dyn Layer + 'a>>,
}
impl<'a> Canvas<'a> {
const DEFAULT_SIZE: u16 = 100;
/// Creates a new [`Canvas`] with no layers.
///
/// [`Canvas`]: struct.Canvas.html
pub fn new() -> Self {
Canvas {
width: Length::Units(Self::DEFAULT_SIZE),
height: Length::Units(Self::DEFAULT_SIZE),
layers: Vec::new(),
}
}
/// Sets the width of the [`Canvas`].
///
/// [`Canvas`]: struct.Canvas.html
pub fn width(mut self, width: Length) -> Self {
self.width = width;
self
}
/// Sets the height of the [`Canvas`].
///
/// [`Canvas`]: struct.Canvas.html
pub fn height(mut self, height: Length) -> Self {
self.height = height;
self
}
/// Adds a [`Layer`] to the [`Canvas`].
///
/// It will be drawn on top of previous layers.
///
/// [`Layer`]: layer/trait.Layer.html
/// [`Canvas`]: struct.Canvas.html
pub fn push(mut self, layer: impl Layer + 'a) -> Self {
self.layers.push(Box::new(layer));
self
}
}
impl<'a, Message> Widget<Message, Renderer> for Canvas<'a> {
fn width(&self) -> Length {
self.width
}
fn height(&self) -> Length {
self.height
}
fn layout(
&self,
_renderer: &Renderer,
limits: &layout::Limits,
) -> layout::Node {
let limits = limits.width(self.width).height(self.height);
let size = limits.resolve(Size::ZERO);
layout::Node::new(size)
}
fn draw(
&self,
_renderer: &mut Renderer,
_defaults: &Defaults,
layout: Layout<'_>,
_cursor_position: Point,
) -> (Primitive, MouseCursor) {
let bounds = layout.bounds();
let origin = Point::new(bounds.x, bounds.y);
let size = Size::new(bounds.width, bounds.height);
(
Primitive::Group {
primitives: self
.layers
.iter()
.map(|layer| Primitive::Mesh2D {
origin,
buffers: layer.draw(size),
})
.collect(),
},
MouseCursor::Idle,
)
}
fn hash_layout(&self, state: &mut Hasher) {
std::any::TypeId::of::<Canvas<'static>>().hash(state);
self.width.hash(state);
self.height.hash(state);
}
}
impl<'a, Message> From<Canvas<'a>> for Element<'a, Message, Renderer>
where
Message: 'static,
{
fn from(canvas: Canvas<'a>) -> Element<'a, Message, Renderer> {
Element::new(canvas)
}
}

View File

@ -0,0 +1,12 @@
use crate::canvas::Frame;
/// A type that can be drawn on a [`Frame`].
///
/// [`Frame`]: struct.Frame.html
pub trait Drawable {
/// Draws the [`Drawable`] on the given [`Frame`].
///
/// [`Drawable`]: trait.Drawable.html
/// [`Frame`]: struct.Frame.html
fn draw(&self, frame: &mut Frame);
}

View File

@ -0,0 +1,14 @@
use iced_native::Color;
/// The style used to fill geometry.
#[derive(Debug, Clone, Copy)]
pub enum Fill {
/// Fill with a color.
Color(Color),
}
impl Default for Fill {
fn default() -> Fill {
Fill::Color(Color::BLACK)
}
}

View File

@ -0,0 +1,255 @@
use iced_native::{Point, Size, Vector};
use crate::{
canvas::{Fill, Path, Stroke},
triangle,
};
/// The frame of a [`Canvas`].
///
/// [`Canvas`]: struct.Canvas.html
#[derive(Debug)]
pub struct Frame {
width: f32,
height: f32,
buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
transforms: Transforms,
}
#[derive(Debug)]
struct Transforms {
previous: Vec<Transform>,
current: Transform,
}
#[derive(Debug, Clone, Copy)]
struct Transform {
raw: lyon::math::Transform,
is_identity: bool,
}
impl Frame {
/// Creates a new empty [`Frame`] with the given dimensions.
///
/// The default coordinate system of a [`Frame`] has its origin at the
/// top-left corner of its bounds.
///
/// [`Frame`]: struct.Frame.html
pub fn new(width: f32, height: f32) -> Frame {
Frame {
width,
height,
buffers: lyon::tessellation::VertexBuffers::new(),
transforms: Transforms {
previous: Vec::new(),
current: Transform {
raw: lyon::math::Transform::identity(),
is_identity: true,
},
},
}
}
/// Returns the width of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn width(&self) -> f32 {
self.width
}
/// Returns the width of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn height(&self) -> f32 {
self.height
}
/// Returns the dimensions of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn size(&self) -> Size {
Size::new(self.width, self.height)
}
/// Returns the coordinate of the center of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn center(&self) -> Point {
Point::new(self.width / 2.0, self.height / 2.0)
}
/// Draws the given [`Path`] on the [`Frame`] by filling it with the
/// provided style.
///
/// [`Path`]: path/struct.Path.html
/// [`Frame`]: struct.Frame.html
pub fn fill(&mut self, path: &Path, fill: Fill) {
use lyon::tessellation::{
BuffersBuilder, FillOptions, FillTessellator,
};
let mut buffers = BuffersBuilder::new(
&mut self.buffers,
FillVertex(match fill {
Fill::Color(color) => color.into_linear(),
}),
);
let mut tessellator = FillTessellator::new();
let result = if self.transforms.current.is_identity {
tessellator.tessellate_path(
path.raw(),
&FillOptions::default(),
&mut buffers,
)
} else {
let path = path.transformed(&self.transforms.current.raw);
tessellator.tessellate_path(
path.raw(),
&FillOptions::default(),
&mut buffers,
)
};
let _ = result.expect("Tessellate path");
}
/// Draws the stroke of the given [`Path`] on the [`Frame`] with the
/// provided style.
///
/// [`Path`]: path/struct.Path.html
/// [`Frame`]: struct.Frame.html
pub fn stroke(&mut self, path: &Path, stroke: Stroke) {
use lyon::tessellation::{
BuffersBuilder, StrokeOptions, StrokeTessellator,
};
let mut buffers = BuffersBuilder::new(
&mut self.buffers,
StrokeVertex(stroke.color.into_linear()),
);
let mut tessellator = StrokeTessellator::new();
let mut options = StrokeOptions::default();
options.line_width = stroke.width;
options.start_cap = stroke.line_cap.into();
options.end_cap = stroke.line_cap.into();
options.line_join = stroke.line_join.into();
let result = if self.transforms.current.is_identity {
tessellator.tessellate_path(path.raw(), &options, &mut buffers)
} else {
let path = path.transformed(&self.transforms.current.raw);
tessellator.tessellate_path(path.raw(), &options, &mut buffers)
};
let _ = result.expect("Stroke path");
}
/// Stores the current transform of the [`Frame`] and executes the given
/// drawing operations, restoring the transform afterwards.
///
/// This method is useful to compose transforms and perform drawing
/// operations in different coordinate systems.
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn with_save(&mut self, f: impl FnOnce(&mut Frame)) {
self.transforms.previous.push(self.transforms.current);
f(self);
self.transforms.current = self.transforms.previous.pop().unwrap();
}
/// Applies a translation to the current transform of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn translate(&mut self, translation: Vector) {
self.transforms.current.raw = self
.transforms
.current
.raw
.pre_translate(lyon::math::Vector::new(
translation.x,
translation.y,
));
self.transforms.current.is_identity = false;
}
/// Applies a rotation to the current transform of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn rotate(&mut self, angle: f32) {
self.transforms.current.raw = self
.transforms
.current
.raw
.pre_rotate(lyon::math::Angle::radians(-angle));
self.transforms.current.is_identity = false;
}
/// Applies a scaling to the current transform of the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
#[inline]
pub fn scale(&mut self, scale: f32) {
self.transforms.current.raw =
self.transforms.current.raw.pre_scale(scale, scale);
self.transforms.current.is_identity = false;
}
/// Produces the geometry that has been drawn on the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
pub fn into_mesh(self) -> triangle::Mesh2D {
triangle::Mesh2D {
vertices: self.buffers.vertices,
indices: self.buffers.indices,
}
}
}
struct FillVertex([f32; 4]);
impl lyon::tessellation::FillVertexConstructor<triangle::Vertex2D>
for FillVertex
{
fn new_vertex(
&mut self,
position: lyon::math::Point,
_attributes: lyon::tessellation::FillAttributes<'_>,
) -> triangle::Vertex2D {
triangle::Vertex2D {
position: [position.x, position.y],
color: self.0,
}
}
}
struct StrokeVertex([f32; 4]);
impl lyon::tessellation::StrokeVertexConstructor<triangle::Vertex2D>
for StrokeVertex
{
fn new_vertex(
&mut self,
position: lyon::math::Point,
_attributes: lyon::tessellation::StrokeAttributes<'_, '_>,
) -> triangle::Vertex2D {
triangle::Vertex2D {
position: [position.x, position.y],
color: self.0,
}
}
}

View File

@ -0,0 +1,25 @@
//! Produce, store, and reuse geometry.
mod cache;
pub use cache::Cache;
use crate::triangle;
use iced_native::Size;
use std::sync::Arc;
/// A layer that can be presented at a [`Canvas`].
///
/// [`Canvas`]: ../struct.Canvas.html
pub trait Layer: std::fmt::Debug {
/// Draws the [`Layer`] in the given bounds and produces [`Mesh2D`] as a
/// result.
///
/// The [`Layer`] may choose to store the produced [`Mesh2D`] locally and
/// only recompute it when the bounds change, its contents change, or is
/// otherwise explicitly cleared by other means.
///
/// [`Layer`]: trait.Layer.html
/// [`Mesh2D`]: ../../../triangle/struct.Mesh2D.html
fn draw(&self, bounds: Size) -> Arc<triangle::Mesh2D>;
}

View File

@ -0,0 +1,101 @@
use crate::{
canvas::{Drawable, Frame, Layer},
triangle,
};
use iced_native::Size;
use std::cell::RefCell;
use std::marker::PhantomData;
use std::sync::Arc;
/// A simple cache that stores generated geometry to avoid recomputation.
///
/// A [`Cache`] will not redraw its geometry unless the dimensions of its layer
/// change or it is explicitly cleared.
///
/// [`Layer`]: ../trait.Layer.html
/// [`Cached`]: struct.Cached.html
#[derive(Debug)]
pub struct Cache<T: Drawable> {
input: PhantomData<T>,
state: RefCell<State>,
}
#[derive(Debug)]
enum State {
Empty,
Filled {
mesh: Arc<triangle::Mesh2D>,
bounds: Size,
},
}
impl<T> Cache<T>
where
T: Drawable + std::fmt::Debug,
{
/// Creates a new empty [`Cache`].
///
/// [`Cache`]: struct.Cache.html
pub fn new() -> Self {
Cache {
input: PhantomData,
state: RefCell::new(State::Empty),
}
}
/// Clears the cache, forcing a redraw the next time it is used.
///
/// [`Cached`]: struct.Cached.html
pub fn clear(&mut self) {
*self.state.borrow_mut() = State::Empty;
}
/// Binds the [`Cache`] with some data, producing a [`Layer`] that can be
/// added to a [`Canvas`].
///
/// [`Cache`]: struct.Cache.html
/// [`Layer`]: ../trait.Layer.html
/// [`Canvas`]: ../../struct.Canvas.html
pub fn with<'a>(&'a self, input: &'a T) -> impl Layer + 'a {
Bind {
cache: self,
input: input,
}
}
}
#[derive(Debug)]
struct Bind<'a, T: Drawable> {
cache: &'a Cache<T>,
input: &'a T,
}
impl<'a, T> Layer for Bind<'a, T>
where
T: Drawable + std::fmt::Debug,
{
fn draw(&self, current_bounds: Size) -> Arc<triangle::Mesh2D> {
use std::ops::Deref;
if let State::Filled { mesh, bounds } =
self.cache.state.borrow().deref()
{
if *bounds == current_bounds {
return mesh.clone();
}
}
let mut frame = Frame::new(current_bounds.width, current_bounds.height);
self.input.draw(&mut frame);
let mesh = Arc::new(frame.into_mesh());
*self.cache.state.borrow_mut() = State::Filled {
mesh: mesh.clone(),
bounds: current_bounds,
};
mesh
}
}

View File

@ -0,0 +1,49 @@
//! Build different kinds of 2D shapes.
pub mod arc;
mod builder;
pub use arc::Arc;
pub use builder::Builder;
/// An immutable set of points that may or may not be connected.
///
/// A single [`Path`] can represent different kinds of 2D shapes!
///
/// [`Path`]: struct.Path.html
#[derive(Debug, Clone)]
pub struct Path {
raw: lyon::path::Path,
}
impl Path {
/// Creates a new [`Path`] with the provided closure.
///
/// Use the [`Builder`] to configure your [`Path`].
///
/// [`Path`]: struct.Path.html
/// [`Builder`]: struct.Builder.html
pub fn new(f: impl FnOnce(&mut Builder)) -> Self {
let mut builder = Builder::new();
// TODO: Make it pure instead of side-effect-based (?)
f(&mut builder);
builder.build()
}
#[inline]
pub(crate) fn raw(&self) -> &lyon::path::Path {
&self.raw
}
#[inline]
pub(crate) fn transformed(
&self,
transform: &lyon::math::Transform,
) -> Path {
Path {
raw: self.raw.transformed(transform),
}
}
}

View File

@ -0,0 +1,44 @@
//! Build and draw curves.
use iced_native::{Point, Vector};
/// A segment of a differentiable curve.
#[derive(Debug, Clone, Copy)]
pub struct Arc {
/// The center of the arc.
pub center: Point,
/// The radius of the arc.
pub radius: f32,
/// The start of the segment's angle, clockwise rotation.
pub start_angle: f32,
/// The end of the segment's angle, clockwise rotation.
pub end_angle: f32,
}
/// An elliptical [`Arc`].
///
/// [`Arc`]: struct.Arc.html
#[derive(Debug, Clone, Copy)]
pub struct Elliptical {
/// The center of the arc.
pub center: Point,
/// The radii of the arc's ellipse, defining its axes.
pub radii: Vector,
/// The rotation of the arc's ellipse.
pub rotation: f32,
/// The start of the segment's angle, clockwise rotation.
pub start_angle: f32,
/// The end of the segment's angle, clockwise rotation.
pub end_angle: f32,
}
impl From<Arc> for Elliptical {
fn from(arc: Arc) -> Elliptical {
Elliptical {
center: arc.center,
radii: Vector::new(arc.radius, arc.radius),
rotation: 0.0,
start_angle: arc.start_angle,
end_angle: arc.end_angle,
}
}
}

View File

@ -0,0 +1,177 @@
use crate::canvas::path::{arc, Arc, Path};
use iced_native::{Point, Size};
use lyon::path::builder::{Build, FlatPathBuilder, PathBuilder, SvgBuilder};
/// A [`Path`] builder.
///
/// Once a [`Path`] is built, it can no longer be mutated.
///
/// [`Path`]: struct.Path.html
#[allow(missing_debug_implementations)]
pub struct Builder {
raw: lyon::path::builder::SvgPathBuilder<lyon::path::Builder>,
}
impl Builder {
/// Creates a new [`Builder`].
///
/// [`Builder`]: struct.Builder.html
pub fn new() -> Builder {
Builder {
raw: lyon::path::Path::builder().with_svg(),
}
}
/// Moves the starting point of a new sub-path to the given `Point`.
#[inline]
pub fn move_to(&mut self, point: Point) {
let _ = self.raw.move_to(lyon::math::Point::new(point.x, point.y));
}
/// Connects the last point in the [`Path`] to the given `Point` with a
/// straight line.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn line_to(&mut self, point: Point) {
let _ = self.raw.line_to(lyon::math::Point::new(point.x, point.y));
}
/// Adds an [`Arc`] to the [`Path`] from `start_angle` to `end_angle` in
/// a clockwise direction.
///
/// [`Arc`]: struct.Arc.html
/// [`Path`]: struct.Path.html
#[inline]
pub fn arc(&mut self, arc: Arc) {
self.ellipse(arc.into());
}
/// Adds a circular arc to the [`Path`] with the given control points and
/// radius.
///
/// The arc is connected to the previous point by a straight line, if
/// necessary.
///
/// [`Path`]: struct.Path.html
pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
use lyon::{math, path};
let a = math::Point::new(a.x, a.y);
if self.raw.current_position() != a {
let _ = self.raw.line_to(a);
}
let _ = self.raw.arc_to(
math::Vector::new(radius, radius),
math::Angle::radians(0.0),
path::ArcFlags::default(),
math::Point::new(b.x, b.y),
);
}
/// Adds an [`Ellipse`] to the [`Path`] using a clockwise direction.
///
/// [`Ellipse`]: struct.Arc.html
/// [`Path`]: struct.Path.html
pub fn ellipse(&mut self, arc: arc::Elliptical) {
use lyon::{geom, math};
let arc = geom::Arc {
center: math::Point::new(arc.center.x, arc.center.y),
radii: math::Vector::new(arc.radii.x, arc.radii.y),
x_rotation: math::Angle::radians(arc.rotation),
start_angle: math::Angle::radians(arc.start_angle),
sweep_angle: math::Angle::radians(arc.end_angle),
};
let _ = self.raw.move_to(arc.sample(0.0));
arc.for_each_quadratic_bezier(&mut |curve| {
let _ = self.raw.quadratic_bezier_to(curve.ctrl, curve.to);
});
}
/// Adds a cubic Bézier curve to the [`Path`] given its two control points
/// and its end point.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn bezier_curve_to(
&mut self,
control_a: Point,
control_b: Point,
to: Point,
) {
use lyon::math;
let _ = self.raw.cubic_bezier_to(
math::Point::new(control_a.x, control_a.y),
math::Point::new(control_b.x, control_b.y),
math::Point::new(to.x, to.y),
);
}
/// Adds a quadratic Bézier curve to the [`Path`] given its control point
/// and its end point.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn quadratic_curve_to(&mut self, control: Point, to: Point) {
use lyon::math;
let _ = self.raw.quadratic_bezier_to(
math::Point::new(control.x, control.y),
math::Point::new(to.x, to.y),
);
}
/// Adds a rectangle to the [`Path`] given its top-left corner coordinate
/// and its `Size`.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn rectangle(&mut self, p: Point, size: Size) {
self.move_to(p);
self.line_to(Point::new(p.x + size.width, p.y));
self.line_to(Point::new(p.x + size.width, p.y + size.height));
self.line_to(Point::new(p.x, p.y + size.height));
self.close();
}
/// Adds a circle to the [`Path`] given its center coordinate and its
/// radius.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn circle(&mut self, center: Point, radius: f32) {
self.arc(Arc {
center,
radius,
start_angle: 0.0,
end_angle: 2.0 * std::f32::consts::PI,
});
}
/// Closes the current sub-path in the [`Path`] with a straight line to
/// the starting point.
///
/// [`Path`]: struct.Path.html
#[inline]
pub fn close(&mut self) {
self.raw.close()
}
/// Builds the [`Path`] of this [`Builder`].
///
/// [`Path`]: struct.Path.html
/// [`Builder`]: struct.Builder.html
#[inline]
pub fn build(self) -> Path {
Path {
raw: self.raw.build(),
}
}
}

View File

@ -0,0 +1,83 @@
use iced_native::Color;
/// The style of a stroke.
#[derive(Debug, Clone, Copy)]
pub struct Stroke {
/// The color of the stroke.
pub color: Color,
/// The distance between the two edges of the stroke.
pub width: f32,
/// The shape to be used at the end of open subpaths when they are stroked.
pub line_cap: LineCap,
/// The shape to be used at the corners of paths or basic shapes when they
/// are stroked.
pub line_join: LineJoin,
}
impl Default for Stroke {
fn default() -> Stroke {
Stroke {
color: Color::BLACK,
width: 1.0,
line_cap: LineCap::default(),
line_join: LineJoin::default(),
}
}
}
/// The shape used at the end of open subpaths when they are stroked.
#[derive(Debug, Clone, Copy)]
pub enum LineCap {
/// The stroke for each sub-path does not extend beyond its two endpoints.
Butt,
/// At the end of each sub-path, the shape representing the stroke will be
/// extended by a square.
Square,
/// At the end of each sub-path, the shape representing the stroke will be
/// extended by a semicircle.
Round,
}
impl Default for LineCap {
fn default() -> LineCap {
LineCap::Butt
}
}
impl From<LineCap> for lyon::tessellation::LineCap {
fn from(line_cap: LineCap) -> lyon::tessellation::LineCap {
match line_cap {
LineCap::Butt => lyon::tessellation::LineCap::Butt,
LineCap::Square => lyon::tessellation::LineCap::Square,
LineCap::Round => lyon::tessellation::LineCap::Round,
}
}
}
/// The shape used at the corners of paths or basic shapes when they are
/// stroked.
#[derive(Debug, Clone, Copy)]
pub enum LineJoin {
/// A sharp corner.
Miter,
/// A round corner.
Round,
/// A bevelled corner.
Bevel,
}
impl Default for LineJoin {
fn default() -> LineJoin {
LineJoin::Miter
}
}
impl From<LineJoin> for lyon::tessellation::LineJoin {
fn from(line_join: LineJoin) -> lyon::tessellation::LineJoin {
match line_join {
LineJoin::Miter => lyon::tessellation::LineJoin::Miter,
LineJoin::Round => lyon::tessellation::LineJoin::Round,
LineJoin::Bevel => lyon::tessellation::LineJoin::Bevel,
}
}
}

View File

@ -18,7 +18,11 @@ impl iced_native::window::Backend for Backend {
fn new(settings: Self::Settings) -> (Backend, Renderer) {
let adapter = wgpu::Adapter::request(&wgpu::RequestAdapterOptions {
power_preference: wgpu::PowerPreference::Default,
power_preference: if settings.antialiasing.is_none() {
wgpu::PowerPreference::Default
} else {
wgpu::PowerPreference::HighPerformance
},
backends: wgpu::BackendBit::all(),
})
.expect("Request adapter");