From 468f7432dd96839a86a7bac751351fcf43b7ae63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Tue, 20 Dec 2022 10:42:53 +0100 Subject: [PATCH 1/9] Add `vectorial_text` example --- examples/vectorial_text/Cargo.toml | 9 ++ examples/vectorial_text/src/main.rs | 175 ++++++++++++++++++++++++++++ 2 files changed, 184 insertions(+) create mode 100644 examples/vectorial_text/Cargo.toml create mode 100644 examples/vectorial_text/src/main.rs diff --git a/examples/vectorial_text/Cargo.toml b/examples/vectorial_text/Cargo.toml new file mode 100644 index 0000000000..76c1af7cc3 --- /dev/null +++ b/examples/vectorial_text/Cargo.toml @@ -0,0 +1,9 @@ +[package] +name = "vectorial_text" +version = "0.1.0" +authors = ["Héctor Ramón Jiménez "] +edition = "2021" +publish = false + +[dependencies] +iced = { path = "../..", features = ["canvas", "debug"] } diff --git a/examples/vectorial_text/src/main.rs b/examples/vectorial_text/src/main.rs new file mode 100644 index 0000000000..54ca7c5e85 --- /dev/null +++ b/examples/vectorial_text/src/main.rs @@ -0,0 +1,175 @@ +use iced::alignment::{self, Alignment}; +use iced::mouse; +use iced::widget::{ + canvas, checkbox, column, horizontal_space, row, slider, text, +}; +use iced::{ + Element, Length, Point, Rectangle, Renderer, Sandbox, Settings, Theme, + Vector, +}; + +pub fn main() -> iced::Result { + VectorialText::run(Settings { + antialiasing: true, + ..Settings::default() + }) +} + +struct VectorialText { + state: State, +} + +#[derive(Debug, Clone, Copy)] +enum Message { + SizeChanged(f32), + AngleChanged(f32), + ScaleChanged(f32), + ToggleJapanese(bool), +} + +impl Sandbox for VectorialText { + type Message = Message; + + fn new() -> Self { + Self { + state: State::new(), + } + } + + fn title(&self) -> String { + String::from("Vectorial Text - Iced") + } + + fn update(&mut self, message: Message) { + match message { + Message::SizeChanged(size) => { + self.state.size = size; + } + Message::AngleChanged(angle) => { + self.state.angle = angle; + } + Message::ScaleChanged(scale) => { + self.state.scale = scale; + } + Message::ToggleJapanese(use_japanese) => { + self.state.use_japanese = use_japanese; + } + } + + self.state.cache.clear(); + } + + fn view(&self) -> Element { + let slider_with_label = |label, range, value, message: fn(f32) -> _| { + column![ + row![ + text(label), + horizontal_space(Length::Fill), + text(format!("{:.2}", value)) + ], + slider(range, value, message).step(0.01) + ] + .spacing(2) + }; + + column![ + canvas(&self.state).width(Length::Fill).height(Length::Fill), + column![ + checkbox( + "Use Japanese", + self.state.use_japanese, + Message::ToggleJapanese + ), + row![ + slider_with_label( + "Size", + 2.0..=80.0, + self.state.size, + Message::SizeChanged, + ), + slider_with_label( + "Angle", + 0.0..=360.0, + self.state.angle, + Message::AngleChanged, + ), + slider_with_label( + "Scale", + 1.0..=20.0, + self.state.scale, + Message::ScaleChanged, + ), + ] + .spacing(20), + ] + .align_items(Alignment::Center) + .spacing(10) + ] + .spacing(10) + .padding(20) + .into() + } + + fn theme(&self) -> Theme { + Theme::Dark + } +} + +struct State { + size: f32, + angle: f32, + scale: f32, + use_japanese: bool, + cache: canvas::Cache, +} + +impl State { + pub fn new() -> Self { + Self { + size: 40.0, + angle: 0.0, + scale: 1.0, + use_japanese: false, + cache: canvas::Cache::new(), + } + } +} + +impl canvas::Program for State { + type State = (); + + fn draw( + &self, + _state: &Self::State, + renderer: &Renderer, + theme: &Theme, + bounds: Rectangle, + _cursor: mouse::Cursor, + ) -> Vec { + let geometry = self.cache.draw(renderer, bounds.size(), |frame| { + let palette = theme.palette(); + let center = bounds.center(); + + frame.translate(Vector::new(center.x, center.y)); + frame.scale(self.scale); + frame.rotate(self.angle * std::f32::consts::PI / 180.0); + + frame.fill_text(canvas::Text { + position: Point::new(0.0, 0.0), + color: palette.text, + size: self.size.into(), + content: String::from(if self.use_japanese { + "ベクトルテキスト🎉" + } else { + "Vectorial Text! 🎉" + }), + horizontal_alignment: alignment::Horizontal::Center, + vertical_alignment: alignment::Vertical::Center, + shaping: text::Shaping::Advanced, + ..canvas::Text::default() + }) + }); + + vec![geometry] + } +} From 66bea7bb6d4575c1d36d28a10e08dc60a0ea20b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 13:22:02 +0100 Subject: [PATCH 2/9] Apply scaling during `Frame::fill_text` in `iced_wgpu` --- wgpu/src/geometry.rs | 40 ++++++++++++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/wgpu/src/geometry.rs b/wgpu/src/geometry.rs index e0bff67efa..36092da05a 100644 --- a/wgpu/src/geometry.rs +++ b/wgpu/src/geometry.rs @@ -1,4 +1,5 @@ //! Build and draw geometry. +use crate::core::text::LineHeight; use crate::core::{Point, Rectangle, Size, Vector}; use crate::graphics::color; use crate::graphics::geometry::fill::{self, Fill}; @@ -318,14 +319,41 @@ impl Frame { pub fn fill_text(&mut self, text: impl Into) { let text = text.into(); - let position = if self.transforms.current.is_identity { - text.position + let (position, size, line_height) = if self + .transforms + .current + .is_identity + { + (text.position, text.size, text.line_height) } else { - let transformed = self.transforms.current.raw.transform_point( + let position = self.transforms.current.raw.transform_point( lyon::math::Point::new(text.position.x, text.position.y), ); - Point::new(transformed.x, transformed.y) + let size = + self.transforms.current.raw.transform_vector( + lyon::math::Vector::new(0.0, text.size.0), + ); + + let line_height = match text.line_height { + LineHeight::Absolute(size) => { + let new_height = self + .transforms + .current + .raw + .transform_vector(lyon::math::Vector::new(0.0, size.0)) + .y; + + LineHeight::Absolute(new_height.into()) + } + LineHeight::Relative(factor) => LineHeight::Relative(factor), + }; + + ( + Point::new(position.x, position.y), + size.y.into(), + line_height, + ) }; let bounds = Rectangle { @@ -340,8 +368,8 @@ impl Frame { content: text.content, bounds, color: text.color, - size: text.size, - line_height: text.line_height, + size, + line_height, font: text.font, horizontal_alignment: text.horizontal_alignment, vertical_alignment: text.vertical_alignment, From 5aa741a177e6220640ea884827f93f152cbd07d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 13:27:39 +0100 Subject: [PATCH 3/9] Apply scaling during `Frame::fill_text` in `iced_tiny_skia` --- tiny_skia/src/geometry.rs | 32 ++++++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/tiny_skia/src/geometry.rs b/tiny_skia/src/geometry.rs index 5f28b7373a..4cc04c6e19 100644 --- a/tiny_skia/src/geometry.rs +++ b/tiny_skia/src/geometry.rs @@ -1,4 +1,5 @@ -use crate::core::{Point, Rectangle, Size, Vector}; +use crate::core::text::LineHeight; +use crate::core::{Pixels, Point, Rectangle, Size, Vector}; use crate::graphics::geometry::fill::{self, Fill}; use crate::graphics::geometry::stroke::{self, Stroke}; use crate::graphics::geometry::{Path, Style, Text}; @@ -96,17 +97,32 @@ impl Frame { pub fn fill_text(&mut self, text: impl Into) { let text = text.into(); - let position = if self.transform.is_identity() { - text.position + let (position, size, line_height) = if self.transform.is_identity() { + (text.position, text.size, text.line_height) } else { - let mut transformed = [tiny_skia::Point { + let mut position = [tiny_skia::Point { x: text.position.x, y: text.position.y, }]; - self.transform.map_points(&mut transformed); + self.transform.map_points(&mut position); - Point::new(transformed[0].x, transformed[0].y) + let (_, scale_y) = self.transform.get_scale(); + + let size = text.size.0 * scale_y; + + let line_height = match text.line_height { + LineHeight::Absolute(size) => { + LineHeight::Absolute(Pixels(size.0 * scale_y)) + } + LineHeight::Relative(factor) => LineHeight::Relative(factor), + }; + + ( + Point::new(position[0].x, position[0].y), + size.into(), + line_height, + ) }; let bounds = Rectangle { @@ -121,8 +137,8 @@ impl Frame { content: text.content, bounds, color: text.color, - size: text.size, - line_height: text.line_height, + size, + line_height, font: text.font, horizontal_alignment: text.horizontal_alignment, vertical_alignment: text.vertical_alignment, From fda96a9eda261b9fbe499eae1c6eedcfa252c5ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 13:44:30 +0100 Subject: [PATCH 4/9] Simplify `Transform` API in `iced_wgpu::geometry` --- wgpu/src/geometry.rs | 136 ++++++++++++++++++++----------------------- 1 file changed, 62 insertions(+), 74 deletions(-) diff --git a/wgpu/src/geometry.rs b/wgpu/src/geometry.rs index 36092da05a..0471844165 100644 --- a/wgpu/src/geometry.rs +++ b/wgpu/src/geometry.rs @@ -1,6 +1,6 @@ //! Build and draw geometry. use crate::core::text::LineHeight; -use crate::core::{Point, Rectangle, Size, Vector}; +use crate::core::{Pixels, Point, Rectangle, Size, Vector}; use crate::graphics::color; use crate::graphics::geometry::fill::{self, Fill}; use crate::graphics::geometry::{ @@ -116,19 +116,26 @@ struct Transforms { } #[derive(Debug, Clone, Copy)] -struct Transform { - raw: lyon::math::Transform, - is_identity: bool, -} +struct Transform(lyon::math::Transform); impl Transform { - /// Transforms the given [Point] by the transformation matrix. - fn transform_point(&self, point: &mut Point) { + fn is_identity(&self) -> bool { + self.0 == lyon::math::Transform::identity() + } + + fn scale(&self) -> (f32, f32) { + (self.0.m12, self.0.m22) + } + + fn transform_point(&self, point: Point) -> Point { let transformed = self - .raw + .0 .transform_point(euclid::Point2D::new(point.x, point.y)); - point.x = transformed.x; - point.y = transformed.y; + + Point { + x: transformed.x, + y: transformed.y, + } } fn transform_style(&self, style: Style) -> Style { @@ -143,8 +150,8 @@ impl Transform { fn transform_gradient(&self, mut gradient: Gradient) -> Gradient { match &mut gradient { Gradient::Linear(linear) => { - self.transform_point(&mut linear.start); - self.transform_point(&mut linear.end); + linear.start = self.transform_point(linear.start); + linear.end = self.transform_point(linear.end); } } @@ -164,10 +171,7 @@ impl Frame { primitives: Vec::new(), transforms: Transforms { previous: Vec::new(), - current: Transform { - raw: lyon::math::Transform::identity(), - is_identity: true, - }, + current: Transform(lyon::math::Transform::identity()), }, fill_tessellator: tessellation::FillTessellator::new(), stroke_tessellator: tessellation::StrokeTessellator::new(), @@ -210,14 +214,14 @@ impl Frame { let options = tessellation::FillOptions::default() .with_fill_rule(into_fill_rule(rule)); - if self.transforms.current.is_identity { + if self.transforms.current.is_identity() { self.fill_tessellator.tessellate_path( path.raw(), &options, buffer.as_mut(), ) } else { - let path = path.transform(&self.transforms.current.raw); + let path = path.transform(&self.transforms.current.0); self.fill_tessellator.tessellate_path( path.raw(), @@ -242,13 +246,14 @@ impl Frame { .buffers .get_fill(&self.transforms.current.transform_style(style)); - let top_left = - self.transforms.current.raw.transform_point( - lyon::math::Point::new(top_left.x, top_left.y), - ); + let top_left = self + .transforms + .current + .0 + .transform_point(lyon::math::Point::new(top_left.x, top_left.y)); let size = - self.transforms.current.raw.transform_vector( + self.transforms.current.0.transform_vector( lyon::math::Vector::new(size.width, size.height), ); @@ -285,14 +290,14 @@ impl Frame { Cow::Owned(dashed(path, stroke.line_dash)) }; - if self.transforms.current.is_identity { + if self.transforms.current.is_identity() { self.stroke_tessellator.tessellate_path( path.raw(), &options, buffer.as_mut(), ) } else { - let path = path.transform(&self.transforms.current.raw); + let path = path.transform(&self.transforms.current.0); self.stroke_tessellator.tessellate_path( path.raw(), @@ -319,42 +324,28 @@ impl Frame { pub fn fill_text(&mut self, text: impl Into) { let text = text.into(); - let (position, size, line_height) = if self - .transforms - .current - .is_identity - { - (text.position, text.size, text.line_height) - } else { - let position = self.transforms.current.raw.transform_point( - lyon::math::Point::new(text.position.x, text.position.y), - ); + let (position, size, line_height) = + if self.transforms.current.is_identity() { + (text.position, text.size, text.line_height) + } else { + let (_, scale_y) = self.transforms.current.scale(); - let size = - self.transforms.current.raw.transform_vector( - lyon::math::Vector::new(0.0, text.size.0), - ); - - let line_height = match text.line_height { - LineHeight::Absolute(size) => { - let new_height = self - .transforms - .current - .raw - .transform_vector(lyon::math::Vector::new(0.0, size.0)) - .y; - - LineHeight::Absolute(new_height.into()) - } - LineHeight::Relative(factor) => LineHeight::Relative(factor), - }; + let position = + self.transforms.current.transform_point(text.position); - ( - Point::new(position.x, position.y), - size.y.into(), - line_height, - ) - }; + let size = Pixels(text.size.0 * scale_y); + + let line_height = match text.line_height { + LineHeight::Absolute(size) => { + LineHeight::Absolute(Pixels(size.0 * scale_y)) + } + LineHeight::Relative(factor) => { + LineHeight::Relative(factor) + } + }; + + (position, size, line_height) + }; let bounds = Rectangle { x: position.x, @@ -451,26 +442,24 @@ impl Frame { /// Applies a translation to the current transform of the [`Frame`]. #[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; + self.transforms.current.0 = + self.transforms + .current + .0 + .pre_translate(lyon::math::Vector::new( + translation.x, + translation.y, + )); } /// Applies a rotation in radians to the current transform of the [`Frame`]. #[inline] pub fn rotate(&mut self, angle: f32) { - self.transforms.current.raw = self + self.transforms.current.0 = self .transforms .current - .raw + .0 .pre_rotate(lyon::math::Angle::radians(angle)); - self.transforms.current.is_identity = false; } /// Applies a uniform scaling to the current transform of the [`Frame`]. @@ -486,9 +475,8 @@ impl Frame { pub fn scale_nonuniform(&mut self, scale: impl Into) { let scale = scale.into(); - self.transforms.current.raw = - self.transforms.current.raw.pre_scale(scale.x, scale.y); - self.transforms.current.is_identity = false; + self.transforms.current.0 = + self.transforms.current.0.pre_scale(scale.x, scale.y); } /// Produces the [`Primitive`] representing everything drawn on the [`Frame`]. From d09f36e054b00cad206431654392fc68ba2b345b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 13:45:29 +0100 Subject: [PATCH 5/9] Fix missing semi-colon lint in `vectorial_text` example --- examples/vectorial_text/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vectorial_text/src/main.rs b/examples/vectorial_text/src/main.rs index 54ca7c5e85..d366b9072c 100644 --- a/examples/vectorial_text/src/main.rs +++ b/examples/vectorial_text/src/main.rs @@ -167,7 +167,7 @@ impl canvas::Program for State { vertical_alignment: alignment::Vertical::Center, shaping: text::Shaping::Advanced, ..canvas::Text::default() - }) + }); }); vec![geometry] From dd032d9a7a73dc28c12802e1e702d0aebe92e261 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 14:25:39 +0100 Subject: [PATCH 6/9] Implement vectorial text support for `iced_wgpu` --- wgpu/src/geometry.rs | 225 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 188 insertions(+), 37 deletions(-) diff --git a/wgpu/src/geometry.rs b/wgpu/src/geometry.rs index 0471844165..a1583a0715 100644 --- a/wgpu/src/geometry.rs +++ b/wgpu/src/geometry.rs @@ -1,6 +1,7 @@ //! Build and draw geometry. +use crate::core::alignment; use crate::core::text::LineHeight; -use crate::core::{Pixels, Point, Rectangle, Size, Vector}; +use crate::core::{Color, Pixels, Point, Rectangle, Size, Vector}; use crate::graphics::color; use crate::graphics::geometry::fill::{self, Fill}; use crate::graphics::geometry::{ @@ -8,6 +9,7 @@ use crate::graphics::geometry::{ }; use crate::graphics::gradient::{self, Gradient}; use crate::graphics::mesh::{self, Mesh}; +use crate::graphics::text::{self, cosmic_text}; use crate::primitive::{self, Primitive}; use lyon::geom::euclid; @@ -123,8 +125,13 @@ impl Transform { self.0 == lyon::math::Transform::identity() } + fn is_scale_translation(&self) -> bool { + self.0.m12.abs() < 2.0 * f32::EPSILON + && self.0.m21.abs() < 2.0 * f32::EPSILON + } + fn scale(&self) -> (f32, f32) { - (self.0.m12, self.0.m22) + (self.0.m11, self.0.m22) } fn transform_point(&self, point: Point) -> Point { @@ -324,49 +331,193 @@ impl Frame { pub fn fill_text(&mut self, text: impl Into) { let text = text.into(); - let (position, size, line_height) = - if self.transforms.current.is_identity() { - (text.position, text.size, text.line_height) - } else { - let (_, scale_y) = self.transforms.current.scale(); + let (scale_x, scale_y) = self.transforms.current.scale(); + + if self.transforms.current.is_scale_translation() + && scale_x == scale_y + && scale_x > 0.0 + && scale_y > 0.0 + { + let (position, size, line_height) = + if self.transforms.current.is_identity() { + (text.position, text.size, text.line_height) + } else { + let position = + self.transforms.current.transform_point(text.position); + + let size = Pixels(text.size.0 * scale_y); + + let line_height = match text.line_height { + LineHeight::Absolute(size) => { + LineHeight::Absolute(Pixels(size.0 * scale_y)) + } + LineHeight::Relative(factor) => { + LineHeight::Relative(factor) + } + }; + + (position, size, line_height) + }; - let position = - self.transforms.current.transform_point(text.position); + let bounds = Rectangle { + x: position.x, + y: position.y, + width: f32::INFINITY, + height: f32::INFINITY, + }; - let size = Pixels(text.size.0 * scale_y); + // TODO: Honor layering! + self.primitives.push(Primitive::Text { + content: text.content, + bounds, + color: text.color, + size, + line_height, + font: text.font, + horizontal_alignment: text.horizontal_alignment, + vertical_alignment: text.vertical_alignment, + shaping: text.shaping, + clip_bounds: Rectangle::with_size(Size::INFINITY), + }); + } else { + let mut font_system = + text::font_system().write().expect("Write font system"); - let line_height = match text.line_height { - LineHeight::Absolute(size) => { - LineHeight::Absolute(Pixels(size.0 * scale_y)) - } - LineHeight::Relative(factor) => { - LineHeight::Relative(factor) + let mut buffer = cosmic_text::BufferLine::new( + &text.content, + cosmic_text::AttrsList::new(text::to_attributes(text.font)), + text::to_shaping(text.shaping), + ); + + let layout = buffer.layout( + font_system.raw(), + text.size.0, + f32::MAX, + cosmic_text::Wrap::None, + ); + + let translation_x = match text.horizontal_alignment { + alignment::Horizontal::Left => text.position.x, + alignment::Horizontal::Center + | alignment::Horizontal::Right => { + let mut line_width = 0.0f32; + + for line in layout.iter() { + line_width = line_width.max(line.w); } - }; - (position, size, line_height) + if text.horizontal_alignment + == alignment::Horizontal::Center + { + text.position.x - line_width / 2.0 + } else { + text.position.x - line_width + } + } }; - let bounds = Rectangle { - x: position.x, - y: position.y, - width: f32::INFINITY, - height: f32::INFINITY, - }; + let translation_y = { + let line_height = text.line_height.to_absolute(text.size); - // TODO: Use vectorial text instead of primitive - self.primitives.push(Primitive::Text { - content: text.content, - bounds, - color: text.color, - size, - line_height, - font: text.font, - horizontal_alignment: text.horizontal_alignment, - vertical_alignment: text.vertical_alignment, - shaping: text.shaping, - clip_bounds: Rectangle::with_size(Size::INFINITY), - }); + match text.vertical_alignment { + alignment::Vertical::Top => text.position.y, + alignment::Vertical::Center => { + text.position.y - line_height.0 / 2.0 + } + alignment::Vertical::Bottom => { + text.position.y - line_height.0 + } + } + }; + + let mut swash_cache = cosmic_text::SwashCache::new(); + + for run in layout.iter() { + for glyph in run.glyphs.iter() { + let physical_glyph = glyph.physical((0.0, 0.0), 1.0); + + let start_x = translation_x + glyph.x + glyph.x_offset; + let start_y = translation_y + glyph.y_offset + text.size.0; + let offset = Vector::new(start_x, start_y); + + if let Some(commands) = swash_cache.get_outline_commands( + font_system.raw(), + physical_glyph.cache_key, + ) { + let glyph = Path::new(|path| { + use cosmic_text::Command; + + for command in commands { + match command { + Command::MoveTo(p) => { + path.move_to( + Point::new(p.x, -p.y) + offset, + ); + } + Command::LineTo(p) => { + path.line_to( + Point::new(p.x, -p.y) + offset, + ); + } + Command::CurveTo( + control_a, + control_b, + to, + ) => { + path.bezier_curve_to( + Point::new( + control_a.x, + -control_a.y, + ) + offset, + Point::new( + control_b.x, + -control_b.y, + ) + offset, + Point::new(to.x, -to.y) + offset, + ); + } + Command::QuadTo(control, to) => { + path.quadratic_curve_to( + Point::new(control.x, -control.y) + + offset, + Point::new(to.x, -to.y) + offset, + ); + } + Command::Close => { + path.close(); + } + } + } + }); + + self.fill(&glyph, text.color); + } else { + // TODO: Raster image support for `Canvas` + let [r, g, b, a] = text.color.into_rgba8(); + + swash_cache.with_pixels( + font_system.raw(), + physical_glyph.cache_key, + cosmic_text::Color::rgba(r, g, b, a), + |x, y, color| { + self.fill( + &Path::rectangle( + Point::new(x as f32, y as f32) + offset, + Size::new(1.0, 1.0), + ), + Color::from_rgba8( + color.r(), + color.g(), + color.b(), + color.a() as f32 / 255.0, + ), + ); + }, + ) + } + } + } + } } /// Stores the current transform of the [`Frame`] and executes the given From 4cb53a6e225f9e533126eb03d3cc34be3fd09f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 14:48:33 +0100 Subject: [PATCH 7/9] Implement vectorial text support for `iced_tiny_skia` --- graphics/src/geometry/text.rs | 135 +++++++++++++++++++++++++++++++- tiny_skia/src/geometry.rs | 99 +++++++++++++----------- wgpu/src/geometry.rs | 142 +--------------------------------- 3 files changed, 191 insertions(+), 185 deletions(-) diff --git a/graphics/src/geometry/text.rs b/graphics/src/geometry/text.rs index 0bf7ec9794..d314e85ec9 100644 --- a/graphics/src/geometry/text.rs +++ b/graphics/src/geometry/text.rs @@ -1,6 +1,8 @@ use crate::core::alignment; use crate::core::text::{LineHeight, Shaping}; -use crate::core::{Color, Font, Pixels, Point}; +use crate::core::{Color, Font, Pixels, Point, Size, Vector}; +use crate::geometry::Path; +use crate::text; /// A bunch of text that can be drawn to a canvas #[derive(Debug, Clone)] @@ -32,6 +34,137 @@ pub struct Text { pub shaping: Shaping, } +impl Text { + /// Computes the [`Path`]s of the [`Text`] and draws them using + /// the given closure. + pub fn draw_with(&self, mut f: impl FnMut(Path, Color)) { + let mut font_system = + text::font_system().write().expect("Write font system"); + + let mut buffer = cosmic_text::BufferLine::new( + &self.content, + cosmic_text::AttrsList::new(text::to_attributes(self.font)), + text::to_shaping(self.shaping), + ); + + let layout = buffer.layout( + font_system.raw(), + self.size.0, + f32::MAX, + cosmic_text::Wrap::None, + ); + + let translation_x = match self.horizontal_alignment { + alignment::Horizontal::Left => self.position.x, + alignment::Horizontal::Center | alignment::Horizontal::Right => { + let mut line_width = 0.0f32; + + for line in layout.iter() { + line_width = line_width.max(line.w); + } + + if self.horizontal_alignment == alignment::Horizontal::Center { + self.position.x - line_width / 2.0 + } else { + self.position.x - line_width + } + } + }; + + let translation_y = { + let line_height = self.line_height.to_absolute(self.size); + + match self.vertical_alignment { + alignment::Vertical::Top => self.position.y, + alignment::Vertical::Center => { + self.position.y - line_height.0 / 2.0 + } + alignment::Vertical::Bottom => self.position.y - line_height.0, + } + }; + + let mut swash_cache = cosmic_text::SwashCache::new(); + + for run in layout.iter() { + for glyph in run.glyphs.iter() { + let physical_glyph = glyph.physical((0.0, 0.0), 1.0); + + let start_x = translation_x + glyph.x + glyph.x_offset; + let start_y = translation_y + glyph.y_offset + self.size.0; + let offset = Vector::new(start_x, start_y); + + if let Some(commands) = swash_cache.get_outline_commands( + font_system.raw(), + physical_glyph.cache_key, + ) { + let glyph = Path::new(|path| { + use cosmic_text::Command; + + for command in commands { + match command { + Command::MoveTo(p) => { + path.move_to( + Point::new(p.x, -p.y) + offset, + ); + } + Command::LineTo(p) => { + path.line_to( + Point::new(p.x, -p.y) + offset, + ); + } + Command::CurveTo(control_a, control_b, to) => { + path.bezier_curve_to( + Point::new(control_a.x, -control_a.y) + + offset, + Point::new(control_b.x, -control_b.y) + + offset, + Point::new(to.x, -to.y) + offset, + ); + } + Command::QuadTo(control, to) => { + path.quadratic_curve_to( + Point::new(control.x, -control.y) + + offset, + Point::new(to.x, -to.y) + offset, + ); + } + Command::Close => { + path.close(); + } + } + } + }); + + f(glyph, self.color); + } else { + // TODO: Raster image support for `Canvas` + let [r, g, b, a] = self.color.into_rgba8(); + + swash_cache.with_pixels( + font_system.raw(), + physical_glyph.cache_key, + cosmic_text::Color::rgba(r, g, b, a), + |x, y, color| { + f( + Path::rectangle( + Point::new(x as f32, y as f32) + offset, + Size::new(1.0, 1.0), + ), + Color::from_rgba8( + color.r(), + color.g(), + color.b(), + color.a() as f32 / 255.0, + ), + ); + }, + ); + } + } + } + } +} + impl Default for Text { fn default() -> Text { Text { diff --git a/tiny_skia/src/geometry.rs b/tiny_skia/src/geometry.rs index 4cc04c6e19..b00f4676da 100644 --- a/tiny_skia/src/geometry.rs +++ b/tiny_skia/src/geometry.rs @@ -97,54 +97,65 @@ impl Frame { pub fn fill_text(&mut self, text: impl Into) { let text = text.into(); - let (position, size, line_height) = if self.transform.is_identity() { - (text.position, text.size, text.line_height) - } else { - let mut position = [tiny_skia::Point { - x: text.position.x, - y: text.position.y, - }]; - - self.transform.map_points(&mut position); - - let (_, scale_y) = self.transform.get_scale(); - - let size = text.size.0 * scale_y; + let (scale_x, scale_y) = self.transform.get_scale(); + + if self.transform.is_scale_translate() + && scale_x == scale_y + && scale_x > 0.0 + && scale_y > 0.0 + { + let (position, size, line_height) = if self.transform.is_identity() + { + (text.position, text.size, text.line_height) + } else { + let mut position = [tiny_skia::Point { + x: text.position.x, + y: text.position.y, + }]; + + self.transform.map_points(&mut position); + + let size = text.size.0 * scale_y; + + let line_height = match text.line_height { + LineHeight::Absolute(size) => { + LineHeight::Absolute(Pixels(size.0 * scale_y)) + } + LineHeight::Relative(factor) => { + LineHeight::Relative(factor) + } + }; + + ( + Point::new(position[0].x, position[0].y), + size.into(), + line_height, + ) + }; - let line_height = match text.line_height { - LineHeight::Absolute(size) => { - LineHeight::Absolute(Pixels(size.0 * scale_y)) - } - LineHeight::Relative(factor) => LineHeight::Relative(factor), + let bounds = Rectangle { + x: position.x, + y: position.y, + width: f32::INFINITY, + height: f32::INFINITY, }; - ( - Point::new(position[0].x, position[0].y), - size.into(), + // TODO: Honor layering! + self.primitives.push(Primitive::Text { + content: text.content, + bounds, + color: text.color, + size, line_height, - ) - }; - - let bounds = Rectangle { - x: position.x, - y: position.y, - width: f32::INFINITY, - height: f32::INFINITY, - }; - - // TODO: Use vectorial text instead of primitive - self.primitives.push(Primitive::Text { - content: text.content, - bounds, - color: text.color, - size, - line_height, - font: text.font, - horizontal_alignment: text.horizontal_alignment, - vertical_alignment: text.vertical_alignment, - shaping: text.shaping, - clip_bounds: Rectangle::with_size(Size::INFINITY), - }); + font: text.font, + horizontal_alignment: text.horizontal_alignment, + vertical_alignment: text.vertical_alignment, + shaping: text.shaping, + clip_bounds: Rectangle::with_size(Size::INFINITY), + }); + } else { + text.draw_with(|path, color| self.fill(&path, color)); + } } pub fn push_transform(&mut self) { diff --git a/wgpu/src/geometry.rs b/wgpu/src/geometry.rs index a1583a0715..4d7f443ea2 100644 --- a/wgpu/src/geometry.rs +++ b/wgpu/src/geometry.rs @@ -1,7 +1,6 @@ //! Build and draw geometry. -use crate::core::alignment; use crate::core::text::LineHeight; -use crate::core::{Color, Pixels, Point, Rectangle, Size, Vector}; +use crate::core::{Pixels, Point, Rectangle, Size, Vector}; use crate::graphics::color; use crate::graphics::geometry::fill::{self, Fill}; use crate::graphics::geometry::{ @@ -9,7 +8,6 @@ use crate::graphics::geometry::{ }; use crate::graphics::gradient::{self, Gradient}; use crate::graphics::mesh::{self, Mesh}; -use crate::graphics::text::{self, cosmic_text}; use crate::primitive::{self, Primitive}; use lyon::geom::euclid; @@ -380,143 +378,7 @@ impl Frame { clip_bounds: Rectangle::with_size(Size::INFINITY), }); } else { - let mut font_system = - text::font_system().write().expect("Write font system"); - - let mut buffer = cosmic_text::BufferLine::new( - &text.content, - cosmic_text::AttrsList::new(text::to_attributes(text.font)), - text::to_shaping(text.shaping), - ); - - let layout = buffer.layout( - font_system.raw(), - text.size.0, - f32::MAX, - cosmic_text::Wrap::None, - ); - - let translation_x = match text.horizontal_alignment { - alignment::Horizontal::Left => text.position.x, - alignment::Horizontal::Center - | alignment::Horizontal::Right => { - let mut line_width = 0.0f32; - - for line in layout.iter() { - line_width = line_width.max(line.w); - } - - if text.horizontal_alignment - == alignment::Horizontal::Center - { - text.position.x - line_width / 2.0 - } else { - text.position.x - line_width - } - } - }; - - let translation_y = { - let line_height = text.line_height.to_absolute(text.size); - - match text.vertical_alignment { - alignment::Vertical::Top => text.position.y, - alignment::Vertical::Center => { - text.position.y - line_height.0 / 2.0 - } - alignment::Vertical::Bottom => { - text.position.y - line_height.0 - } - } - }; - - let mut swash_cache = cosmic_text::SwashCache::new(); - - for run in layout.iter() { - for glyph in run.glyphs.iter() { - let physical_glyph = glyph.physical((0.0, 0.0), 1.0); - - let start_x = translation_x + glyph.x + glyph.x_offset; - let start_y = translation_y + glyph.y_offset + text.size.0; - let offset = Vector::new(start_x, start_y); - - if let Some(commands) = swash_cache.get_outline_commands( - font_system.raw(), - physical_glyph.cache_key, - ) { - let glyph = Path::new(|path| { - use cosmic_text::Command; - - for command in commands { - match command { - Command::MoveTo(p) => { - path.move_to( - Point::new(p.x, -p.y) + offset, - ); - } - Command::LineTo(p) => { - path.line_to( - Point::new(p.x, -p.y) + offset, - ); - } - Command::CurveTo( - control_a, - control_b, - to, - ) => { - path.bezier_curve_to( - Point::new( - control_a.x, - -control_a.y, - ) + offset, - Point::new( - control_b.x, - -control_b.y, - ) + offset, - Point::new(to.x, -to.y) + offset, - ); - } - Command::QuadTo(control, to) => { - path.quadratic_curve_to( - Point::new(control.x, -control.y) - + offset, - Point::new(to.x, -to.y) + offset, - ); - } - Command::Close => { - path.close(); - } - } - } - }); - - self.fill(&glyph, text.color); - } else { - // TODO: Raster image support for `Canvas` - let [r, g, b, a] = text.color.into_rgba8(); - - swash_cache.with_pixels( - font_system.raw(), - physical_glyph.cache_key, - cosmic_text::Color::rgba(r, g, b, a), - |x, y, color| { - self.fill( - &Path::rectangle( - Point::new(x as f32, y as f32) + offset, - Size::new(1.0, 1.0), - ), - Color::from_rgba8( - color.r(), - color.g(), - color.b(), - color.a() as f32 / 255.0, - ), - ); - }, - ) - } - } - } + text.draw_with(|path, color| self.fill(&path, color)); } } From acee3b030baf4df24a871e56789772c677b66bcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 15:31:29 +0100 Subject: [PATCH 8/9] Fix paths with negative coordinates in `iced_tiny_skia` --- tiny_skia/src/backend.rs | 18 ++++++++++-------- tiny_skia/src/geometry.rs | 17 +++++++++++------ tiny_skia/src/primitive.rs | 4 ---- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/tiny_skia/src/backend.rs b/tiny_skia/src/backend.rs index 706db40e50..d1393b4d7a 100644 --- a/tiny_skia/src/backend.rs +++ b/tiny_skia/src/backend.rs @@ -543,7 +543,6 @@ impl Backend { path, paint, rule, - transform, }) => { let bounds = path.bounds(); @@ -566,9 +565,11 @@ impl Backend { path, paint, *rule, - transform - .post_translate(translation.x, translation.y) - .post_scale(scale_factor, scale_factor), + tiny_skia::Transform::from_translate( + translation.x, + translation.y, + ) + .post_scale(scale_factor, scale_factor), clip_mask, ); } @@ -576,7 +577,6 @@ impl Backend { path, paint, stroke, - transform, }) => { let bounds = path.bounds(); @@ -599,9 +599,11 @@ impl Backend { path, paint, stroke, - transform - .post_translate(translation.x, translation.y) - .post_scale(scale_factor, scale_factor), + tiny_skia::Transform::from_translate( + translation.x, + translation.y, + ) + .post_scale(scale_factor, scale_factor), clip_mask, ); } diff --git a/tiny_skia/src/geometry.rs b/tiny_skia/src/geometry.rs index b00f4676da..501638e0ce 100644 --- a/tiny_skia/src/geometry.rs +++ b/tiny_skia/src/geometry.rs @@ -40,9 +40,12 @@ impl Frame { } pub fn fill(&mut self, path: &Path, fill: impl Into) { - let Some(path) = convert_path(path) else { + let Some(path) = + convert_path(path).and_then(|path| path.transform(self.transform)) + else { return; }; + let fill = fill.into(); self.primitives @@ -50,7 +53,6 @@ impl Frame { path, paint: into_paint(fill.style), rule: into_fill_rule(fill.rule), - transform: self.transform, })); } @@ -60,9 +62,12 @@ impl Frame { size: Size, fill: impl Into, ) { - let Some(path) = convert_path(&Path::rectangle(top_left, size)) else { + let Some(path) = convert_path(&Path::rectangle(top_left, size)) + .and_then(|path| path.transform(self.transform)) + else { return; }; + let fill = fill.into(); self.primitives @@ -73,12 +78,13 @@ impl Frame { ..into_paint(fill.style) }, rule: into_fill_rule(fill.rule), - transform: self.transform, })); } pub fn stroke<'a>(&mut self, path: &Path, stroke: impl Into>) { - let Some(path) = convert_path(path) else { + let Some(path) = + convert_path(path).and_then(|path| path.transform(self.transform)) + else { return; }; @@ -90,7 +96,6 @@ impl Frame { path, paint: into_paint(stroke.style), stroke: skia_stroke, - transform: self.transform, })); } diff --git a/tiny_skia/src/primitive.rs b/tiny_skia/src/primitive.rs index 0ed2496902..7718d54297 100644 --- a/tiny_skia/src/primitive.rs +++ b/tiny_skia/src/primitive.rs @@ -13,8 +13,6 @@ pub enum Custom { paint: tiny_skia::Paint<'static>, /// The fill rule to follow. rule: tiny_skia::FillRule, - /// The transform to apply to the path. - transform: tiny_skia::Transform, }, /// A path stroked with some paint. Stroke { @@ -24,8 +22,6 @@ pub enum Custom { paint: tiny_skia::Paint<'static>, /// The stroke settings. stroke: tiny_skia::Stroke, - /// The transform to apply to the path. - transform: tiny_skia::Transform, }, } From 5d4c55c07a80d93e6009e94c2a861ad549d30aab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ram=C3=B3n=20Jim=C3=A9nez?= Date: Wed, 17 Jan 2024 15:53:08 +0100 Subject: [PATCH 9/9] Fix `paint` not being transformed in `iced_tiny_skia` --- tiny_skia/src/geometry.rs | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/tiny_skia/src/geometry.rs b/tiny_skia/src/geometry.rs index 501638e0ce..74a08d384a 100644 --- a/tiny_skia/src/geometry.rs +++ b/tiny_skia/src/geometry.rs @@ -48,10 +48,13 @@ impl Frame { let fill = fill.into(); + let mut paint = into_paint(fill.style); + paint.shader.transform(self.transform); + self.primitives .push(Primitive::Custom(primitive::Custom::Fill { path, - paint: into_paint(fill.style), + paint, rule: into_fill_rule(fill.rule), })); } @@ -70,13 +73,16 @@ impl Frame { let fill = fill.into(); + let mut paint = tiny_skia::Paint { + anti_alias: false, + ..into_paint(fill.style) + }; + paint.shader.transform(self.transform); + self.primitives .push(Primitive::Custom(primitive::Custom::Fill { path, - paint: tiny_skia::Paint { - anti_alias: false, - ..into_paint(fill.style) - }, + paint, rule: into_fill_rule(fill.rule), })); } @@ -91,10 +97,13 @@ impl Frame { let stroke = stroke.into(); let skia_stroke = into_stroke(&stroke); + let mut paint = into_paint(stroke.style); + paint.shader.transform(self.transform); + self.primitives .push(Primitive::Custom(primitive::Custom::Stroke { path, - paint: into_paint(stroke.style), + paint, stroke: skia_stroke, })); }