https://github.com/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 语言实现纯软件光栅化
https://github.com/rustq/vue-skia

rust skia vue

Last synced: 7 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rustq/vue-skia
• Owner: rustq
• License: mit
• Created: 2022-12-31T14:10:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-10T14:21:09.000Z (about 1 year ago)
• Last Synced: 2024-11-09T05:33:49.712Z (12 months ago)
• Topics: rust, skia, vue
• Language: Rust
• Homepage: https://vue-skia.netlify.app
• Size: 1.6 MB
• Stars: 301
• Watchers: 4
• Forks: 12
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-rust - rustq/vue-skia
• awesome-rust - rustq/vue-skia - Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. (Applications / Graphics)
• fucking-awesome-rust - rustq/vue-skia - Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. (Applications / Graphics)
• fucking-awesome-rust - rustq/vue-skia - Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. (Applications / Graphics)

README

          
# Vue Skia

[![license](https://img.shields.io/badge/license-MIT-cyan)](https://revolunet.mit-license.org/) ![vue-3.x](https://img.shields.io/badge/vue-3.x-lightgreen) [![crates](https://img.shields.io/crates/v/soft-skia)](https://crates.io/crates/soft_skia) [![npm](https://img.shields.io/npm/v/vue-skia?color=purple)](https://www.npmjs.com/package/vue-skia) [![downloads](https://img.shields.io/npm/dm/vue-skia)](https://www.npmjs.com/package/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` 语法。

[![usage](https://user-images.githubusercontent.com/11075892/260789003-8bc6cf06-1525-468a-ad70-357771e9969f.png)](https://vue-skia.netlify.app)

Live Demo: [https://vue-skia.netlify.app](https://vue-skia.netlify.app)

## Usage

```shell

$ npm i vue-skia

```

`main.ts`

```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`

```vue

  

    

      

      

      

      

      

    

  

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;

    });

  },

});

```

## Library Development

#### Soft Skia Development

```shell

$ cd soft-skia

$ cargo test

```

#### Soft Skia WASM Development

```shell

$ cd soft-skia-wasm

$ wasm-pack build --release --target web

```

#### Vue Skia Framework Development

```shell

$ cd vue-skia-framework

$ pnpm i

$ pnpm run build

```

#### Vue Playground Development

```shell

$ cd vue-playground

$ pnpm i

$ pnpm run serve

```

## License

[MIT](https://opensource.org/licenses/MIT)