Merge pull request #214 from artursapek/artur/canvas-text

Implement text support in canvas widget
This commit is contained in:
Héctor Ramón 2020-03-09 00:48:51 +01:00 committed by GitHub
commit 5a91b52ef4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 218 additions and 85 deletions

View File

@ -46,3 +46,14 @@ impl std::ops::Add<Vector> for Point {
}
}
}
impl std::ops::Sub<Vector> for Point {
type Output = Self;
fn sub(self, vector: Vector) -> Self {
Self {
x: self.x - vector.x,
y: self.y - vector.y,
}
}
}

View File

@ -32,6 +32,17 @@ where
}
}
impl<T> std::ops::Sub for Vector<T>
where
T: std::ops::Sub<Output = T>,
{
type Output = Self;
fn sub(self, b: Self) -> Self {
Self::new(self.x - b.x, self.y - b.y)
}
}
impl<T> Default for Vector<T>
where
T: Default,

View File

@ -23,7 +23,6 @@ mod bezier {
basic_shapes, BuffersBuilder, StrokeAttributes, StrokeOptions,
StrokeTessellator, VertexBuffers,
};
use std::sync::Arc;
pub struct Bezier<'a, Message> {
state: &'a mut State,
@ -175,10 +174,10 @@ mod bezier {
let mesh = Primitive::Mesh2D {
origin: Point::new(bounds.x, bounds.y),
buffers: Arc::new(Mesh2D {
buffers: Mesh2D {
vertices: buffer.vertices,
indices: buffer.indices,
}),
},
};
(

View File

@ -87,7 +87,7 @@ mod rainbow {
(
Primitive::Mesh2D {
origin: Point::new(b.x, b.y),
buffers: std::sync::Arc::new(Mesh2D {
buffers: Mesh2D {
vertices: vec![
Vertex2D {
position: posn_center,
@ -136,7 +136,7 @@ mod rainbow {
0, 7, 8, // BL
0, 8, 1, // L
],
}),
},
},
MouseCursor::OutOfBounds,
)

View File

@ -78,7 +78,18 @@ pub enum Primitive {
origin: Point,
/// The vertex and index buffers of the mesh
buffers: Arc<triangle::Mesh2D>,
buffers: triangle::Mesh2D,
},
/// A cached primitive.
///
/// This can be useful if you are implementing a widget where primitive
/// generation is expensive.
Cached {
/// The origin of the coordinate system of the cached primitives
origin: Point,
/// The cached primitive
cache: Arc<Primitive>,
},
}

View File

@ -10,7 +10,6 @@ use iced_native::{
layout, Background, Color, Layout, MouseCursor, Point, Rectangle, Vector,
Widget,
};
use std::sync::Arc;
mod widget;
@ -29,9 +28,8 @@ pub struct Renderer {
struct Layer<'a> {
bounds: Rectangle<u32>,
offset: Vector<u32>,
quads: Vec<Quad>,
meshes: Vec<(Point, Arc<triangle::Mesh2D>)>,
meshes: Vec<(Point, &'a triangle::Mesh2D)>,
text: Vec<wgpu_glyph::Section<'a>>,
#[cfg(any(feature = "image", feature = "svg"))]
@ -39,10 +37,9 @@ struct Layer<'a> {
}
impl<'a> Layer<'a> {
pub fn new(bounds: Rectangle<u32>, offset: Vector<u32>) -> Self {
pub fn new(bounds: Rectangle<u32>) -> Self {
Self {
bounds,
offset,
quads: Vec::new(),
text: Vec::new(),
meshes: Vec::new(),
@ -103,17 +100,14 @@ impl Renderer {
let mut layers = Vec::new();
layers.push(Layer::new(
Rectangle {
layers.push(Layer::new(Rectangle {
x: 0,
y: 0,
width: u32::from(width),
height: u32::from(height),
},
Vector::new(0, 0),
));
}));
self.draw_primitive(primitive, &mut layers);
self.draw_primitive(Vector::new(0.0, 0.0), primitive, &mut layers);
self.draw_overlay(overlay, &mut layers);
for layer in layers {
@ -137,17 +131,16 @@ impl Renderer {
fn draw_primitive<'a>(
&mut self,
translation: Vector,
primitive: &'a Primitive,
layers: &mut Vec<Layer<'a>>,
) {
let layer = layers.last_mut().unwrap();
match primitive {
Primitive::None => {}
Primitive::Group { primitives } => {
// TODO: Inspect a bit and regroup (?)
for primitive in primitives {
self.draw_primitive(primitive, layers)
self.draw_primitive(translation, primitive, layers)
}
}
Primitive::Text {
@ -179,12 +172,11 @@ impl Renderer {
}
};
let layer = layers.last_mut().unwrap();
layer.text.push(wgpu_glyph::Section {
text: &content,
screen_position: (
x - layer.offset.x as f32,
y - layer.offset.y as f32,
),
screen_position: (x + translation.x, y + translation.y),
bounds: (bounds.width, bounds.height),
scale: wgpu_glyph::Scale { x: *size, y: *size },
color: color.into_linear(),
@ -222,11 +214,13 @@ impl Renderer {
border_width,
border_color,
} => {
// TODO: Move some of this computations to the GPU (?)
let layer = layers.last_mut().unwrap();
// TODO: Move some of these computations to the GPU (?)
layer.quads.push(Quad {
position: [
bounds.x - layer.offset.x as f32,
bounds.y - layer.offset.y as f32,
bounds.x + translation.x,
bounds.y + translation.y,
],
scale: [bounds.width, bounds.height],
color: match background {
@ -238,38 +232,59 @@ impl Renderer {
});
}
Primitive::Mesh2D { origin, buffers } => {
layer.meshes.push((*origin, buffers.clone()));
let layer = layers.last_mut().unwrap();
layer.meshes.push((*origin + translation, buffers));
}
Primitive::Clip {
bounds,
offset,
content,
} => {
let layer = layers.last_mut().unwrap();
let layer_bounds: Rectangle<f32> = layer.bounds.into();
let clip = Rectangle {
x: bounds.x - layer.offset.x as f32,
y: bounds.y - layer.offset.y as f32,
x: bounds.x + translation.x,
y: bounds.y + translation.y,
..*bounds
};
// Only draw visible content
if let Some(clip_bounds) = layer_bounds.intersection(&clip) {
let clip_layer =
Layer::new(clip_bounds.into(), layer.offset + *offset);
let new_layer = Layer::new(layer.bounds, layer.offset);
let clip_layer = Layer::new(clip_bounds.into());
let new_layer = Layer::new(layer.bounds);
layers.push(clip_layer);
self.draw_primitive(content, layers);
self.draw_primitive(
translation
- Vector::new(offset.x as f32, offset.y as f32),
content,
layers,
);
layers.push(new_layer);
}
}
Primitive::Cached { origin, cache } => {
self.draw_primitive(
translation + Vector::new(origin.x, origin.y),
&cache,
layers,
);
}
#[cfg(feature = "image")]
Primitive::Image { handle, bounds } => {
let layer = layers.last_mut().unwrap();
layer.images.push(Image {
handle: image::Handle::Raster(handle.clone()),
position: [bounds.x, bounds.y],
position: [
bounds.x + translation.x,
bounds.y + translation.y,
],
size: [bounds.width, bounds.height],
});
}
@ -278,9 +293,14 @@ impl Renderer {
#[cfg(feature = "svg")]
Primitive::Svg { handle, bounds } => {
let layer = layers.last_mut().unwrap();
layer.images.push(Image {
handle: image::Handle::Vector(handle.clone()),
position: [bounds.x, bounds.y],
position: [
bounds.x + translation.x,
bounds.y + translation.y,
],
size: [bounds.width, bounds.height],
});
}
@ -295,7 +315,7 @@ impl Renderer {
layers: &mut Vec<Layer<'a>>,
) {
let first = layers.first().unwrap();
let mut overlay = Layer::new(first.bounds, Vector::new(0, 0));
let mut overlay = Layer::new(first.bounds);
let font_id = self.text_pipeline.overlay_font();
let scale = wgpu_glyph::Scale { x: 20.0, y: 20.0 };
@ -337,12 +357,8 @@ impl Renderer {
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),
-(layer.offset.y as f32),
);
let scaled = transformation
* Transformation::scale(scale_factor, scale_factor);
self.triangle_pipeline.draw(
device,
@ -350,7 +366,7 @@ impl Renderer {
target,
target_width,
target_height,
translated,
scaled,
&layer.meshes,
bounds,
);
@ -371,18 +387,14 @@ impl Renderer {
#[cfg(any(feature = "image", feature = "svg"))]
{
if layer.images.len() > 0 {
let translated_and_scaled = transformation
* Transformation::scale(scale_factor, scale_factor)
* Transformation::translate(
-(layer.offset.x as f32),
-(layer.offset.y as f32),
);
let scaled = transformation
* Transformation::scale(scale_factor, scale_factor);
self.image_pipeline.draw(
device,
encoder,
&layer.images,
translated_and_scaled,
scaled,
bounds,
target,
scale_factor,

View File

@ -1,7 +1,7 @@
//! Draw meshes of triangles.
use crate::{settings, Transformation};
use iced_native::{Point, Rectangle};
use std::{mem, sync::Arc};
use std::mem;
mod msaa;
@ -194,7 +194,7 @@ impl Pipeline {
target_width: u32,
target_height: u32,
transformation: Transformation,
meshes: &Vec<(Point, Arc<Mesh2D>)>,
meshes: &[(Point, &Mesh2D)],
bounds: Rectangle<u32>,
) {
// This looks a bit crazy, but we are just counting how many vertices

View File

@ -20,6 +20,7 @@ mod drawable;
mod fill;
mod frame;
mod stroke;
mod text;
pub use drawable::Drawable;
pub use fill::Fill;
@ -27,6 +28,7 @@ pub use frame::Frame;
pub use layer::Layer;
pub use path::Path;
pub use stroke::{LineCap, LineJoin, Stroke};
pub use text::Text;
/// A widget capable of drawing 2D graphics.
///
@ -121,9 +123,9 @@ impl<'a, Message> Widget<Message, Renderer> for Canvas<'a> {
primitives: self
.layers
.iter()
.map(|layer| Primitive::Mesh2D {
.map(|layer| Primitive::Cached {
origin,
buffers: layer.draw(size),
cache: layer.draw(size),
})
.collect(),
},

View File

@ -1,8 +1,8 @@
use iced_native::{Point, Size, Vector};
use iced_native::{Point, Rectangle, Size, Vector};
use crate::{
canvas::{Fill, Path, Stroke},
triangle,
canvas::{Fill, Path, Stroke, Text},
triangle, Primitive,
};
/// The frame of a [`Canvas`].
@ -13,6 +13,7 @@ pub struct Frame {
width: f32,
height: f32,
buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
primitives: Vec<Primitive>,
transforms: Transforms,
}
@ -40,6 +41,7 @@ impl Frame {
width,
height,
buffers: lyon::tessellation::VertexBuffers::new(),
primitives: Vec::new(),
transforms: Transforms {
previous: Vec::new(),
current: Transform {
@ -154,6 +156,52 @@ impl Frame {
let _ = result.expect("Stroke path");
}
/// Draws the characters of the given [`Text`] on the [`Frame`], filling
/// them with the given color.
///
/// __Warning:__ Text currently does not work well with rotations and scale
/// transforms! The position will be correctly transformed, but the
/// resulting glyphs will not be rotated or scaled properly.
///
/// Additionally, all text will be rendered on top of all the layers of
/// a [`Canvas`]. Therefore, it is currently only meant to be used for
/// overlays, which is the most common use case.
///
/// Support for vectorial text is planned, and should address all these
/// limitations.
///
/// [`Text`]: struct.Text.html
/// [`Frame`]: struct.Frame.html
pub fn fill_text(&mut self, text: Text) {
use std::f32;
let position = if self.transforms.current.is_identity {
text.position
} else {
let transformed = self.transforms.current.raw.transform_point(
lyon::math::Point::new(text.position.x, text.position.y),
);
Point::new(transformed.x, transformed.y)
};
// TODO: Use vectorial text instead of primitive
self.primitives.push(Primitive::Text {
content: text.content,
bounds: Rectangle {
x: position.x,
y: position.y,
width: f32::INFINITY,
height: f32::INFINITY,
},
color: text.color,
size: text.size,
font: text.font,
horizontal_alignment: text.horizontal_alignment,
vertical_alignment: text.vertical_alignment,
});
}
/// Stores the current transform of the [`Frame`] and executes the given
/// drawing operations, restoring the transform afterwards.
///
@ -209,13 +257,20 @@ impl Frame {
self.transforms.current.is_identity = false;
}
/// Produces the geometry that has been drawn on the [`Frame`].
/// Produces the primitive representing everything drawn on the [`Frame`].
///
/// [`Frame`]: struct.Frame.html
pub fn into_mesh(self) -> triangle::Mesh2D {
triangle::Mesh2D {
pub fn into_primitive(mut self) -> Primitive {
self.primitives.push(Primitive::Mesh2D {
origin: Point::ORIGIN,
buffers: triangle::Mesh2D {
vertices: self.buffers.vertices,
indices: self.buffers.indices,
},
});
Primitive::Group {
primitives: self.primitives,
}
}
}

View File

@ -3,23 +3,23 @@ mod cache;
pub use cache::Cache;
use crate::triangle;
use crate::Primitive;
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.
/// Draws the [`Layer`] in the given bounds and produces a [`Primitive`] as
/// a result.
///
/// The [`Layer`] may choose to store the produced [`Mesh2D`] locally and
/// The [`Layer`] may choose to store the produced [`Primitive`] 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>;
/// [`Primitive`]: ../../../enum.Primitive.html
fn draw(&self, bounds: Size) -> Arc<Primitive>;
}

View File

@ -1,12 +1,10 @@
use crate::{
canvas::{Drawable, Frame, Layer},
triangle,
Primitive,
};
use iced_native::Size;
use std::cell::RefCell;
use std::marker::PhantomData;
use std::sync::Arc;
use std::{cell::RefCell, marker::PhantomData, sync::Arc};
/// A simple cache that stores generated geometry to avoid recomputation.
///
@ -25,8 +23,8 @@ pub struct Cache<T: Drawable> {
enum State {
Empty,
Filled {
mesh: Arc<triangle::Mesh2D>,
bounds: Size,
primitive: Arc<Primitive>,
},
}
@ -75,27 +73,27 @@ impl<'a, T> Layer for Bind<'a, T>
where
T: Drawable + std::fmt::Debug,
{
fn draw(&self, current_bounds: Size) -> Arc<triangle::Mesh2D> {
fn draw(&self, current_bounds: Size) -> Arc<Primitive> {
use std::ops::Deref;
if let State::Filled { mesh, bounds } =
if let State::Filled { bounds, primitive } =
self.cache.state.borrow().deref()
{
if *bounds == current_bounds {
return mesh.clone();
return primitive.clone();
}
}
let mut frame = Frame::new(current_bounds.width, current_bounds.height);
self.input.draw(&mut frame);
let mesh = Arc::new(frame.into_mesh());
let primitive = Arc::new(frame.into_primitive());
*self.cache.state.borrow_mut() = State::Filled {
mesh: mesh.clone(),
bounds: current_bounds,
primitive: primitive.clone(),
};
mesh
primitive
}
}

View File

@ -0,0 +1,34 @@
use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment};
/// A bunch of text that can be drawn to a canvas
#[derive(Debug, Clone)]
pub struct Text {
/// The contents of the text
pub content: String,
/// The position where to begin drawing the text (top-left corner coordinates)
pub position: Point,
/// The color of the text
pub color: Color,
/// The size of the text
pub size: f32,
/// The font of the text
pub font: Font,
/// The horizontal alignment of the text
pub horizontal_alignment: HorizontalAlignment,
/// The vertical alignment of the text
pub vertical_alignment: VerticalAlignment,
}
impl Default for Text {
fn default() -> Text {
Text {
content: String::new(),
position: Point::ORIGIN,
color: Color::BLACK,
size: 16.0,
font: Font::Default,
horizontal_alignment: HorizontalAlignment::Left,
vertical_alignment: VerticalAlignment::Top,
}
}
}