From 57b96b606407982b683f1ebd14644d5c13a9123e Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 24 Sep 2023 14:42:57 +0800 Subject: [PATCH 1/5] feat: support v-text width height --- package.json | 5 ++++- soft-skia-wasm/src/lib.rs | 10 +++++++--- soft-skia/src/shape.rs | 5 ++++- vue-playground/src/code.ts | 2 +- vue-skia-framework/components/VText.vue | 12 ++++++++++-- vue-skia-framework/launch.ts | 2 -- vue-skia-framework/plugin/index.ts | 2 ++ 7 files changed, 28 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index e02b3da..b863eea 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,10 @@ "version": "0.1.0", "private": "true", "scripts": { - "serve": "pnpm -C vue-playground serve" + "serve": "pnpm --filter vue-playground serve", + "build": "pnpm build:wasm && pnpm build:vue", + "build:vue": "pnpm --filter vue-skia build", + "build:wasm": "cd soft-skia-wasm && wasm-pack build" }, "packageManager": "pnpm@7.32.0" } diff --git a/soft-skia-wasm/src/lib.rs b/soft-skia-wasm/src/lib.rs index d38c16c..f27a0d9 100644 --- a/soft-skia-wasm/src/lib.rs +++ b/soft-skia-wasm/src/lib.rs @@ -100,7 +100,9 @@ pub struct WASMTextAttr { x: i32, y: i32, font_size: Option, - color: Option + color: Option, + width: Option, + height: Option } @@ -294,11 +296,13 @@ impl SoftSkiaWASM { y, text, font_size, - color + color, + width, + height }) => { let color = parse_color(color); let font_size = font_size.unwrap_or(16.0); - self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color })) + self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color, width, height })) } }; } diff --git a/soft-skia/src/shape.rs b/soft-skia/src/shape.rs index 8ffe05e..913c7ea 100644 --- a/soft-skia/src/shape.rs +++ b/soft-skia/src/shape.rs @@ -118,6 +118,8 @@ pub struct Text { pub y: i32, pub font_size: f32, pub color: Option, + pub width: Option, + pub height: Option, } impl Shapes { @@ -541,6 +543,8 @@ impl Shape for Text { let fonts = &[roboto_regular]; let mut layout = Layout::new(CoordinateSystem::PositiveYDown); layout.reset(&LayoutSettings { + max_width: self.width, + max_height: self.height, ..LayoutSettings::default() }); layout.append(fonts, &TextStyle::new(&self.text, self.font_size, 0)); @@ -587,7 +591,6 @@ impl Shape for Text { Transform::from_row(1.0, 0.0, 0.0, 1.0, 0.0, 0.0), None, ); - } } diff --git a/vue-playground/src/code.ts b/vue-playground/src/code.ts index ca02782..7bcc195 100644 --- a/vue-playground/src/code.ts +++ b/vue-playground/src/code.ts @@ -28,7 +28,7 @@ export default ` - + `; diff --git a/vue-skia-framework/components/VText.vue b/vue-skia-framework/components/VText.vue index 03871ec..dd42a27 100644 --- a/vue-skia-framework/components/VText.vue +++ b/vue-skia-framework/components/VText.vue @@ -1,5 +1,5 @@ diff --git a/vue-skia-framework/launch.ts b/vue-skia-framework/launch.ts index 4b67a64..4039f8c 100644 --- a/vue-skia-framework/launch.ts +++ b/vue-skia-framework/launch.ts @@ -9,13 +9,11 @@ const launch = function () { SSWInitialHelper.initialStatus = 1; const wasm = import("soft-skia-wasm/soft_skia_wasm.js"); wasm.then((ssw) => { - ssw.default().then(() => { window.ssw = ssw; while (SSWInitialHelper.initialSucceedCallbackQueue.length) { SSWInitialHelper.initialSucceedCallbackQueue.pop()(); } resolve(void 0) - }) }) } else if (SSWInitialHelper.initialStatus === 1) { SSWInitialHelper.initialSucceedCallbackQueue.push(() => resolve(void 0)); diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts index e5923ef..3b39f7a 100644 --- a/vue-skia-framework/plugin/index.ts +++ b/vue-skia-framework/plugin/index.ts @@ -183,6 +183,8 @@ const VSKNode = (name: string) => { y: attrs.y, font_size: attrs.fontSize, color: attrs.color, + width: attrs.width, + height: attrs.height, }, }, }); From cb004eabfc77c8337060eca4e724597f7944eadb Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 24 Sep 2023 15:15:44 +0800 Subject: [PATCH 2/5] chore: add log marco helps debug --- soft-skia/Cargo.toml | 8 +++++++- soft-skia/src/lib.rs | 3 ++- soft-skia/src/util.rs | 9 +++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 soft-skia/src/util.rs diff --git a/soft-skia/Cargo.toml b/soft-skia/Cargo.toml index 8c36ca0..d0d25a2 100644 --- a/soft-skia/Cargo.toml +++ b/soft-skia/Cargo.toml @@ -11,4 +11,10 @@ license = "MIT" png = "0.17.5" tiny-skia = "0.10.0" base64 = "0.21.0" -fontdue = "0.7.3" \ No newline at end of file +fontdue = "0.7.3" + +[dependencies.web-sys] +version = "0.3" +features = [ + "console", +] \ No newline at end of file diff --git a/soft-skia/src/lib.rs b/soft-skia/src/lib.rs index f4e3d10..60d773c 100644 --- a/soft-skia/src/lib.rs +++ b/soft-skia/src/lib.rs @@ -1,4 +1,5 @@ pub mod tree; pub mod shape; pub mod instance; -pub mod provider; \ No newline at end of file +pub mod provider; +pub mod util; \ No newline at end of file diff --git a/soft-skia/src/util.rs b/soft-skia/src/util.rs new file mode 100644 index 0000000..ea3bb89 --- /dev/null +++ b/soft-skia/src/util.rs @@ -0,0 +1,9 @@ +extern crate web_sys; + +// A macro to provide `println!(..)`-style syntax for `console.log` logging. +#[macro_export] +macro_rules! log { + ( $( $t:tt )* ) => { + web_sys::console::log_1(&format!( $( $t )* ).into()); + } +} \ No newline at end of file From a9241e89d62e54cd305564290cb0453fe29df55a Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 24 Sep 2023 15:16:41 +0800 Subject: [PATCH 3/5] fix: text alpha pixel overlap --- soft-skia/src/shape.rs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/soft-skia/src/shape.rs b/soft-skia/src/shape.rs index 913c7ea..d0a97e6 100644 --- a/soft-skia/src/shape.rs +++ b/soft-skia/src/shape.rs @@ -5,6 +5,8 @@ pub use tiny_skia::{ColorU8, FillRule, Mask, Paint, PathBuilder, Pixmap, Stroke, use tiny_skia::{LineCap, LineJoin, Path, PixmapPaint}; use std::iter::zip; +use crate::log; + #[derive(Debug)] pub enum Shapes { R(Rect), @@ -575,6 +577,10 @@ impl Shape for Text { } let mut rgba_bitmap:Vec = vec![]; for i in 0..bitmap.len() { + if bitmap[i] == 0 { + rgba_bitmap.extend([0, 0, 0, 0].iter()); + continue; + } if let Some(color) = self.color { rgba_bitmap.extend([color.red(), color.green(), color.blue(), bitmap[i]].iter()); } else { From 7808f58ddc985dc769edeb2e250173f77559a527 Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 24 Sep 2023 15:19:30 +0800 Subject: [PATCH 4/5] chore: update --- soft-skia/src/lib.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/soft-skia/src/lib.rs b/soft-skia/src/lib.rs index 60d773c..e222b44 100644 --- a/soft-skia/src/lib.rs +++ b/soft-skia/src/lib.rs @@ -2,4 +2,4 @@ pub mod tree; pub mod shape; pub mod instance; pub mod provider; -pub mod util; \ No newline at end of file +mod util; \ No newline at end of file From 27780784b6e32b46692a402ada0d919f655afc14 Mon Sep 17 00:00:00 2001 From: faga Date: Sun, 24 Sep 2023 16:24:27 +0800 Subject: [PATCH 5/5] chore: maxWidth --- soft-skia-wasm/src/lib.rs | 8 +++----- soft-skia/src/shape.rs | 6 ++---- vue-playground/src/code.ts | 2 +- vue-skia-framework/components/VText.vue | 10 +++------- vue-skia-framework/plugin/index.ts | 3 +-- 5 files changed, 10 insertions(+), 19 deletions(-) diff --git a/soft-skia-wasm/src/lib.rs b/soft-skia-wasm/src/lib.rs index f27a0d9..fa87b87 100644 --- a/soft-skia-wasm/src/lib.rs +++ b/soft-skia-wasm/src/lib.rs @@ -101,8 +101,7 @@ pub struct WASMTextAttr { y: i32, font_size: Option, color: Option, - width: Option, - height: Option + max_width: Option, } @@ -297,12 +296,11 @@ impl SoftSkiaWASM { text, font_size, color, - width, - height + max_width, }) => { let color = parse_color(color); let font_size = font_size.unwrap_or(16.0); - self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color, width, height })) + self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size, color, max_width })) } }; } diff --git a/soft-skia/src/shape.rs b/soft-skia/src/shape.rs index d0a97e6..bc3e205 100644 --- a/soft-skia/src/shape.rs +++ b/soft-skia/src/shape.rs @@ -120,8 +120,7 @@ pub struct Text { pub y: i32, pub font_size: f32, pub color: Option, - pub width: Option, - pub height: Option, + pub max_width: Option, } impl Shapes { @@ -545,8 +544,7 @@ impl Shape for Text { let fonts = &[roboto_regular]; let mut layout = Layout::new(CoordinateSystem::PositiveYDown); layout.reset(&LayoutSettings { - max_width: self.width, - max_height: self.height, + max_width: self.max_width, ..LayoutSettings::default() }); layout.append(fonts, &TextStyle::new(&self.text, self.font_size, 0)); diff --git a/vue-playground/src/code.ts b/vue-playground/src/code.ts index 7bcc195..998721f 100644 --- a/vue-playground/src/code.ts +++ b/vue-playground/src/code.ts @@ -28,7 +28,7 @@ export default ` - + `; diff --git a/vue-skia-framework/components/VText.vue b/vue-skia-framework/components/VText.vue index dd42a27..9fc44b4 100644 --- a/vue-skia-framework/components/VText.vue +++ b/vue-skia-framework/components/VText.vue @@ -1,5 +1,5 @@ diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts index 3b39f7a..5b891f7 100644 --- a/vue-skia-framework/plugin/index.ts +++ b/vue-skia-framework/plugin/index.ts @@ -183,8 +183,7 @@ const VSKNode = (name: string) => { y: attrs.y, font_size: attrs.fontSize, color: attrs.color, - width: attrs.width, - height: attrs.height, + max_width: attrs.maxWidth, }, }, });