Vue Skia基于 Skia 的 2D 圖形 Vue 渲染庫(kù)

Vue Skia 是基于Skia的 2D 圖形Vue渲染庫(kù) —— 使用Rust語(yǔ)言實(shí)現(xiàn)軟件光柵化來(lái)執(zhí)行渲染，相比原生畫布占用更少的內(nèi)存，不過(guò)目前仍然是一個(gè)實(shí)驗(yàn)項(xiàng)目；此外使用層面完全基于Vue語(yǔ)法。

示例

$ 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 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],
        [138, 10],
      ]" :style="'fill'" :strokeWidth="1" :color="'rgba(200, 255, 0, 0.7)'" />
  </v-surface>
</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>