{"id":13635043,"url":"https://github.com/rustq/vue-skia","last_synced_at":"2026-02-21T03:24:10.542Z","repository":{"id":65163749,"uuid":"583930877","full_name":"rustq/vue-skia","owner":"rustq","description":"Skia based 2d graphics vue rendering library. It is based on Rust to implement software rasterization to perform rendering. 基于 Skia 的 2D 图形 Vue 渲染库 —— 使用 Rust 语言实现纯软件光栅化","archived":false,"fork":false,"pushed_at":"2024-09-10T14:21:09.000Z","size":1677,"stargazers_count":313,"open_issues_count":4,"forks_count":14,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-19T11:11:11.493Z","etag":null,"topics":["rust","skia","vue"],"latest_commit_sha":null,"homepage":"https://vue-skia.netlify.app","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rustq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["meloalright","rustq"]}},"created_at":"2022-12-31T14:10:38.000Z","updated_at":"2025-04-17T21:18:41.000Z","dependencies_parsed_at":"2023-11-19T09:27:35.255Z","dependency_job_id":"54b69262-66e6-4205-9478-7864e9e7cd69","html_url":"https://github.com/rustq/vue-skia","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/rustq/vue-skia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustq%2Fvue-skia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustq%2Fvue-skia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustq%2Fvue-skia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustq%2Fvue-skia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rustq","download_url":"https://codeload.github.com/rustq/vue-skia/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rustq%2Fvue-skia/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29672703,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T03:11:15.450Z","status":"ssl_error","status_checked_at":"2026-02-21T03:10:34.920Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rust","skia","vue"],"created_at":"2024-08-02T00:00:39.608Z","updated_at":"2026-02-21T03:24:10.524Z","avatar_url":"https://github.com/rustq.png","language":"Rust","funding_links":["https://github.com/sponsors/meloalright","https://github.com/sponsors/rustq"],"categories":["Applications","Components \u0026 Libraries"],"sub_categories":["Graphics","UI Components"],"readme":"# Vue Skia\n\n[![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)\n\n\nThe `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.\n\n基于 `Skia` 的 2D 图形 `Vue` 渲染库 —— 使用 `Rust` 语言实现纯软件光栅化渲染，相比原生画布占用更少的内存，不过目前仍然是一个实验项目；此外使用层面完全基于 `Vue` 语法。\n\n\n[![usage](https://user-images.githubusercontent.com/11075892/260789003-8bc6cf06-1525-468a-ad70-357771e9969f.png)](https://vue-skia.netlify.app)\n\nLive Demo: [https://vue-skia.netlify.app](https://vue-skia.netlify.app)\n\n## Usage\n\n```shell\n$ npm i vue-skia\n```\n\n`main.ts`\n\n```ts\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport { VueSkia } from 'vue-skia'\n\nconst app = createApp(App);\napp.use(VueSkia);\napp.mount(\"#app\");\n```\n\n`App.vue`\n\n```vue\n\u003ctemplate\u003e\n  \u003ctemplate v-if=\"!loading\"\u003e\n    \u003cv-surface :width=\"360\" :height=\"360\"\u003e\n      \u003cv-rect :x=\"10\" :y=\"220\" :width=\"30\" :height=\"30\" color=\"cyan\" :style=\"'fill'\" /\u003e\n      \u003cv-line :strokeWidth=\"8\" color=\"black\" :p1=\"[100, 260]\" :p2=\"[50, 285]\" /\u003e\n      \u003cv-round-rect :x=\"220\" :y=\"50\" :width=\"80\" :height=\"80\" :r=\"10\" color=\"fuchsia\" :style=\"'stroke'\" /\u003e\n      \u003cv-circle :cx=\"200\" :cy=\"260\" :r=\"50\" :style=\"'stroke'\" color=\"fuchsia\" /\u003e\n      \u003cv-points :points=\"[\n          [138, 10],\n          [178, 90],\n          [266, 103],\n          [202, 165],\n          [217, 254],\n          [138, 212],\n          [59, 254],\n          [74, 165],\n          [10, 103],\n          [98, 90],\n        ]\" :style=\"'fill'\" :strokeWidth=\"1\" :color=\"'rgba(200, 255, 0, 0.7)'\" /\u003e\n    \u003c/v-surface\u003e\n  \u003c/template\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from \"vue\";\nimport launch, { VSurface, VRect, VCircle, VRoundRect, VLine, VPoints } from \"vue-skia\";\n\nexport default defineComponent({\n  name: \"HelloWorld\",\n  components: {\n    VSurface,\n    VRect,\n    VCircle,\n    VRoundRect,\n    VLine,\n    VPoints\n  },\n  data() {\n    return {\n      loading: true,\n    };\n  },\n  mounted() {\n    launch().then(() =\u003e {\n      this.loading = false;\n    });\n  },\n});\n\u003c/script\u003e\n```\n\n## Library Development\n\n#### Soft Skia Development\n\n```shell\n$ cd soft-skia\n$ cargo test\n```\n\n#### Soft Skia WASM Development\n\n```shell\n$ cd soft-skia-wasm\n$ wasm-pack build --release --target web\n```\n\n#### Vue Skia Framework Development\n\n```shell\n$ cd vue-skia-framework\n$ pnpm i\n$ pnpm run build\n```\n\n#### Vue Playground Development\n\n```shell\n$ cd vue-playground\n$ pnpm i\n$ pnpm run serve\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustq%2Fvue-skia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frustq%2Fvue-skia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frustq%2Fvue-skia/lists"}