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

faga295 · web-flow · commit 3c4ef0d160be · 2023-09-20T00:48:50.000+08:00
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,
                       },
                     },
                   });

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,7 @@ pub struct Text {`
`117`	`117`	`pub x: i32,`
`118`	`118`	`pub y: i32,`
`119`	`119`	`pub font_size: f32,`
	`120`	`+ pub color: Option<ColorU8>,`
`120`	`121`	`}`
`121`	`122`
`122`	`123`	`impl Shapes {`
`@@ -570,7 +571,11 @@ impl Shape for Text {`
`570`	`571`	`}`
`571`	`572`	`let mut rgba_bitmap:Vec<u8> = vec![];`
`572`	`573`	`for i in 0..bitmap.len() {`
`573`		`- rgba_bitmap.extend([0, 0, 0, bitmap[i]].iter());`
	`574`	`+ if let Some(color) = self.color {`
	`575`	`+ rgba_bitmap.extend([color.red(), color.green(), color.blue(), bitmap[i]].iter());`
	`576`	`+ } else {`
	`577`	`+ rgba_bitmap.extend([0, 0, 0, bitmap[i]].iter());`
	`578`	`+ }`
`574`	`579`	`}`
`575`	`580`
`576`	`581`	`let p = Pixmap::from_vec(rgba_bitmap, tiny_skia::IntSize::from_wh(dim.0 as u32, dim.1 as u32).unwrap()).unwrap();`