rustq / vue-skia

Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. 基于 Skia 的 2D 图形 Vue 渲染库 —— 使用 Rust 语言实现纯软件光栅化

Vue Skia

The vue-skia 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 an experimental project. And it's based entirely on vue syntax.

基于 Skia 的 2D 图形 Vue 渲染库 —— 使用 Rust 语言实现纯软件光栅化渲染，相比原生画布占用更少的内存，不过目前仍然是一个实验项目；此外使用层面完全基于 Vue 语法。

Live Demo: https://vue-skia.netlify.app

Usage

$ npm i vue-skia

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { VueSkia } from 'vue-skia'

const app = createApp(App);
app.use(VueSkia);
app.mount("#app");

App.vue

<template>
  <template v-if="!loading">
    <v-surface :width="360" :height="360">
      <v-rect :x="10" :y="220" :width="30" :height="30" color="cyan" :style="'fill'" />
      <v-line :strokeWidth="8" color="black" :p1="[100, 260]" :p2="[50, 285]" />
      <v-round-rect :x="220" :y="50" :width="80" :height="80" :r="10" color="fuchsia" :style="'stroke'" />
      <v-circle :cx="200" :cy="260" :r="50" :style="'stroke'" color="fuchsia" />
      <v-points :points="[
          [138, 10],
          [178, 90],
          [266, 103],
          [202, 165],
          [217, 254],
          [138, 212],
          [59, 254],
          [74, 165],
          [10, 103],
          [98, 90],
        ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 0.7)'" />
    </v-surface>
  </template>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import launch, { VSurface, VRect, VCircle, VRoundRect, VLine, VPoints } from "vue-skia";

export default defineComponent({
  name: "HelloWorld",
  components: {
    VSurface,
    VRect,
    VCircle,
    VRoundRect,
    VLine,
    VPoints
  },
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    launch().then(() => {
      this.loading = false;
    });
  },
});
</script>

Library Development

Soft Skia Development

$ cd soft-skia
$ cargo test

Soft Skia WASM Development

$ cd soft-skia-wasm
$ wasm-pack build --release --target web

Vue Skia Framework Development

$ cd vue-skia-framework
$ pnpm i
$ pnpm run build

Vue Playground Development

$ cd vue-playground
$ pnpm i
$ pnpm run serve

License

MIT