Dev/image (#11)

.github/workflows/ci.yml

@@ -27,6 +27,9 @@ jobs:
           cargo build
           cargo test
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
       - name: soft-skia-wasm
         run: |
           cd soft-skia-wasm
@@ -36,11 +39,23 @@ jobs:
       - name: vue-skia-framework
         run: |
           cd vue-skia-framework
-          npm i
-          npm run build
+          pnpm i
+          pnpm build
 
       - name: vue-playground
         run: |
           cd vue-playground
-          npm i
-          npm run build
+          pnpm i
+          pnpm build
+      - name: Archive vue-skia-framework artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: vue-skia-framework
+          path: |
+            vue-skia-framework
+            !node_modules
+      - name: Archive vue-playground results
+        uses: actions/upload-artifact@v3
+        with:
+          name: vue-playground
+          path: vue-playground/dist

.gitignore

@@ -24,4 +24,7 @@ package-lock.json
 *.node
 lib/
 typings/
-.idea
+.idea
+
+# pnpm
+pnpm-lock.yaml 

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "monorepo",
+  "version": "0.1.0",
+  "private": "true",
+  "scripts": {
+    "serve": "pnpm -C vue-playground serve"
+  },
+  "packageManager": "[email protected]"
+}

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - vue-skia-framework
+  - vue-playground
+  - soft-skia-wasm/pkg

soft-skia-wasm/src/lib.rs

@@ -7,7 +7,7 @@ use base64;
 use soft_skia::provider::{Providers, Group, Provider, GroupClip};
 use wasm_bindgen::prelude::*;
 use soft_skia::instance::Instance;
-use soft_skia::shape::{Circle, Line, Points, RoundRect, Shapes, PaintStyle, DrawContext};
+use soft_skia::shape::{Circle, Line, Points, RoundRect, Shapes, PaintStyle, DrawContext, Image};
 use soft_skia::shape::Rect;
 use soft_skia::shape::ColorU8;
 use soft_skia::tree::Node;
@@ -87,6 +87,16 @@ pub struct WASMGroupClipAttr {
     clip: usize,
 }
 
+#[derive(Serialize, Deserialize, Debug)]
+pub struct WASMImageAttr {
+    image: String,
+    x: i32,
+    y: i32,
+    width: u32,
+    height: u32,
+}
+
+
 #[derive(Serialize, Deserialize, Debug)]
 pub enum WASMShapesAttr {
     R(WASMRectAttr),
@@ -96,6 +106,7 @@ pub enum WASMShapesAttr {
     P(WASMPointsAttr),
     G(WASMGroupAttr),
     GC(WASMGroupClipAttr),
+    I(WASMImageAttr)
 }
 
 #[derive(Serialize, Deserialize, Debug)]
@@ -261,6 +272,15 @@ impl SoftSkiaWASM {
                     Providers::G(ref mut group) => group.set_clip_id(clip),
                 }
             }
+            WASMShapesAttr::I(WASMImageAttr {
+                x,
+                y,
+                image,
+                width,
+                height
+            }) => {
+                self.0.set_shape_to_child(id, Shapes::I(Image { image, x, y, width, height }))
+            }
         };
     }
 }

soft-skia/src/shape.rs

@@ -1,7 +1,7 @@
 use std::collections::HashMap;
 
 pub use tiny_skia::{ColorU8, FillRule, Mask, Paint, PathBuilder, Pixmap, Stroke, Transform};
-use tiny_skia::{LineCap, LineJoin, Path};
+use tiny_skia::{LineCap, LineJoin, Path, PixmapPaint};
 
 #[derive(Debug)]
 pub enum Shapes {
@@ -10,6 +10,7 @@ pub enum Shapes {
     RR(RoundRect),
     L(Line),
     P(Points),
+    I(Image),
 }
 
 #[derive(Debug)]
@@ -95,6 +96,15 @@ pub struct Points {
     pub style: Option<PaintStyle>,
 }
 
+#[derive(Debug)]
+pub struct Image {
+    pub image: String,
+    pub x: i32,
+    pub y: i32,
+    pub width: u32,
+    pub height: u32,
+}
+
 impl Shapes {
     pub fn draw(&self, pixmap: &mut Pixmap, context: &DrawContext) -> () {
         match self {
@@ -103,6 +113,7 @@ impl Shapes {
             Shapes::RR(round_rect) => round_rect.draw(pixmap, context),
             Shapes::L(line) => line.draw(pixmap, context),
             Shapes::P(points) => points.draw(pixmap, context),
+            Shapes::I(image) => image.draw(pixmap, context),
         }
     }
 
@@ -113,6 +124,7 @@ impl Shapes {
             Shapes::RR(round_rect) => round_rect.get_path(context),
             Shapes::L(line) => line.get_path(context),
             Shapes::P(points) => points.get_path(context),
+            Shapes::I(image) => image.get_path(context),
         }
     }
 }
@@ -479,6 +491,31 @@ impl Shape for Points {
     }
 }
 
+impl Shape for Image {
+    fn default() -> Self {
+        todo!()
+    }
+
+    fn draw(&self, pixmap: &mut Pixmap, context: &DrawContext) -> () {
+        let u8_array = base64::decode(&self.image).expect("base64 decode failed");
+        let p = Pixmap::decode_png(&u8_array).expect("decode png failed");
+        let scale_x = self.width as f32 / p.width() as f32;
+        let scale_y = self.height as f32 / p.height() as f32;
+        pixmap.draw_pixmap(
+            self.x,
+            self.y,
+            p.as_ref(),
+            &PixmapPaint::default(),
+            Transform::from_row(scale_x, 0.0, 0.0, scale_y, 0.0, 0.0),
+            None,
+        );
+    }
+    fn get_path(&self, context: &DrawContext) -> Path {
+        let pb = PathBuilder::new();
+        pb.finish().unwrap()
+    }
+}
+
 #[cfg(test)]
 mod test {
     use super::{ColorU8, FillRule, Paint, PathBuilder, Pixmap, Stroke, Transform};

vue-playground/package.json

@@ -14,9 +14,10 @@
     "prismjs": "^1.29.0",
     "vue": "^3.2.13",
     "vue-live": "^2.5.4",
-    "vue-skia": "latest"
+    "vue-skia": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^20.5.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
@@ -29,6 +30,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "prettier": "^2.4.1",
-    "typescript": "~4.5.5"
+    "typescript": "~4.5.5",
+    "url-loader": "^4.1.1"
   }
 }

vue-playground/src/App.vue

@@ -4,9 +4,9 @@
       <h1>Vue Skia</h1>
       <p class="description">
         The <em>vue-skia</em> is a skia-based 2d graphics vue rendering library.
-        It is based on Rust to implement software rasterization to perform rendering.
-        It takes up less memory than the native canvas, however it is still a experiment project.
-        And it's based entirely on vue syntax.
+        It is based on Rust to implement software rasterization to perform
+        rendering. It takes up less memory than the native canvas, however it is
+        still a experiment project. And it's based entirely on vue syntax.
       </p>
       <p class="description">
         This super cool editor is based on <em>vue-live</em> !
@@ -28,6 +28,7 @@
             VRoundRect,
             VLine,
             VPoints,
+            VImage,
           }"
           @error="(e: any) => void 0"
           @input="input"
@@ -36,7 +37,8 @@
     </template>
     <template v-if="!loading && debug">
       <v-surface :width="400" :height="400">
-        <v-points :points="[
+        <v-points
+          :points="[
             [128, 0],
             [168, 80],
             [256, 93],
@@ -48,27 +50,62 @@
             [0, 93],
             [88, 80],
             [128, 0],
-          ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 1)'">
+          ]"
+          :style="'fill'"
+          :strokeWidth="1"
+          :color="'rgba(200, 255, 0, 1)'"
+        >
         </v-points>
-        <v-circle :cx="200" :cy="260" :r="80" :style="'stroke'" color="#ee22ee" />
-        <v-rect :x="10" :y="220" :width="30" :height="30" color="#00aaff" :style="'fill'">
+        <v-circle
+          :cx="200"
+          :cy="260"
+          :r="80"
+          :style="'stroke'"
+          color="#ee22ee"
+        />
+        <v-rect
+          :x="10"
+          :y="220"
+          :width="30"
+          :height="30"
+          color="#00aaff"
+          :style="'fill'"
+        >
         </v-rect>
+        <v-image
+          :x="0"
+          :y="0"
+          :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+          :width="70"
+          :height="70"
+        ></v-image>
       </v-surface>
     </template>
-    <github-corners href="https://github.com/rustq/vue-skia" gitColor="#FFFFFF" />
+    <github-corners
+      href="https://github.com/rustq/vue-skia"
+      gitColor="#FFFFFF"
+    />
   </main>
 </template>
 <script lang="ts">
 import { defineComponent, markRaw } from "vue";
-import launch, { VSurface, VGroup, VRect, VCircle, VRoundRect, VLine, VPoints } from "vue-skia";
+import launch, {
+  VSurface,
+  VGroup,
+  VRect,
+  VCircle,
+  VRoundRect,
+  VLine,
+  VPoints,
+  VImage,
+} from "vue-skia";
 import { VueLive } from "vue-live";
 import GithubCorners from "@uivjs/vue-github-corners";
 import CustomLayout from "./CustomLayout.vue";
 import code from "./code";
 import LoadingCode from "./loading-code";
 import "vue-live/style.css";
 import "prism-themes/themes/prism-night-owl.css";
-
 export default defineComponent({
   name: "App",
   components: {
@@ -81,6 +118,7 @@ export default defineComponent({
     VRoundRect,
     VLine,
     VPoints,
+    VImage,
   },
   data() {
     return {
@@ -94,6 +132,7 @@ export default defineComponent({
       VRoundRect,
       VLine,
       VPoints,
+      VImage,
       code,
       LoadingCode,
       debug: false,
@@ -229,4 +268,3 @@ body {
   width: 200px;
 }
 </style>
-

vue-playground/src/code.ts

@@ -15,6 +15,13 @@ export default `<v-surface :width="360" :height="360">
     [98, 90],
     [138, 10],
   ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 0.7)'" />
+  <v-image
+    :x="0"
+    :y="0"
+    :image="'https://raw.githubusercontent.com/rustq/vue-skia/main/vue-playground/src/assets/logo.png'"
+    :width="70"
+    :height="70"
+  ></v-image>
   <v-group :x="200" :y="160" color="violet" :style="'stroke'" :invertClip="true">
     <template #clip>
       <v-circle :cx="8" :cy="68" :r="40" />
@@ -23,4 +30,4 @@ export default `<v-surface :width="360" :height="360">
     <v-circle :cx="0" :cy="60" :r="70" />
   </v-group>
 </v-surface>
-`
+`;

vue-playground/src/shims-vue.d.ts

@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module '*.png' 

vue-playground/vue.config.js

@@ -1,5 +1,28 @@
 const { defineConfig } = require("@vue/cli-service");
+const path = require("path");
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
+  configureWebpack: {
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.png/,
+          use: {
+            loader: "url-loader",
+            options: {
+              limit: true,
+            },
+          },
+        },
+      ],
+    },
+  },
+  chainWebpack: (config) => {
+    const imageRule = config.module.rule("images");
+    imageRule.delete("type");
+  },
 });