Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/rustq/vue-skia below:

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 语言实现纯软件光栅化

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

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>

$ cd soft-skia
$ cargo test

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

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

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

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4