feat: support v-text color props (#17)

rustq · Sep 19, 2023 · 3c4ef0d · 3c4ef0d
1 parent 59a445d
commit 3c4ef0d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/soft-skia-wasm/src/lib.rs b/soft-skia-wasm/src/lib.rs
@@ -99,7 +99,8 @@ pub struct WASMTextAttr {
     text: String,
     x: i32,
     y: i32,
-    font_size: f32,
+    font_size: Option<f32>,
+    color: Option<String>
 }
 
 
@@ -293,8 +294,11 @@ impl SoftSkiaWASM {
                 y,
                 text,
                 font_size,
+                color
             }) => {
-                self.0.set_shape_to_child(id, Shapes::T(Text { text, x, y, font_size}))
+                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 }))
             }
         };
     }

diff --git a/soft-skia/src/shape.rs b/soft-skia/src/shape.rs
@@ -117,6 +117,7 @@ pub struct Text {
     pub x: i32,
     pub y: i32,
     pub font_size: f32,
+    pub color: Option<ColorU8>,
 }
 
 impl Shapes {
@@ -570,7 +571,11 @@ impl Shape for Text {
         }
         let mut rgba_bitmap:Vec<u8> = vec![];
         for i in 0..bitmap.len() {
-            rgba_bitmap.extend([0, 0, 0, bitmap[i]].iter());
+            if let Some(color) = self.color {
+                rgba_bitmap.extend([color.red(), color.green(), color.blue(), bitmap[i]].iter());
+            } else {
+                rgba_bitmap.extend([0, 0, 0, bitmap[i]].iter());
+            }
         }
 
         let p = Pixmap::from_vec(rgba_bitmap, tiny_skia::IntSize::from_wh(dim.0 as u32, dim.1 as u32).unwrap()).unwrap();

diff --git a/vue-playground/src/code.ts b/vue-playground/src/code.ts
@@ -28,7 +28,7 @@ export default `<v-surface :width="360" :height="360">
     </template>
     <v-circle :cx="0" :cy="60" :r="50" :style="'fill'" />
     <v-circle :cx="0" :cy="60" :r="70" />
-    <v-text :x="70" :y="0" :fontSize="100" text="Hello"></v-text>
+    <v-text :x="70" :y="0" :fontSize="16" color="red" text="Hello"></v-text>
   </v-group>
 </v-surface>
 `;
diff --git a/vue-skia-framework/components/VText.vue b/vue-skia-framework/components/VText.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-sk-text :text="text" :x="x" :y="y" :fontSize="fontSize" />
+  <v-sk-text :text="text" :x="x" :y="y" :fontSize="fontSize" :color="color" />
 </template>
 
 <script lang="ts">
@@ -22,8 +22,12 @@ export default defineComponent({
     },
     fontSize: {
       type: Number as PropType<number>,
-      required: true,
+      required: false
     },
-  },
+    color: {
+      type: String as PropType<string>,
+      required: false
+    }
+  }
 });
 </script>
diff --git a/vue-skia-framework/plugin/index.ts b/vue-skia-framework/plugin/index.ts
@@ -175,15 +175,14 @@ const VSKNode = (name: string) => {
                   });
                 }
                 if (name === "Text") {
-                  console.log(attrs.text, attrs.fontSize);
-
                   core.setAttrBySerde(instance._ssw_id, {
                     attr: {
                       T: {
                         text: attrs.text,
                         x: attrs.x,
                         y: attrs.y,
                         font_size: attrs.fontSize,
+                        color: attrs.color,
                       },
                     },
                   });