做了一个 Rust 实现的纯软件光栅化 Vue Skia 2D 图形渲染库

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 524 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近做了一个基于 Rust 实现的纯软件光栅化 Vue Skia 2D 图形渲染库

上层基于 Vue 语法底层基于 WASM + tiny_skia

相比原生画布占用更少的内存不过目前仍然是一个实验项目！

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

Repo: https://github.com/rustq/vue-skia

☆ 期待感激亲们 Star~

当前完成了初版接下来的版本会逐渐完善达成对标 react-native-skia

第 1 条附言 · 2023-06-19 00:47:19 +08:00

欢迎尽量先体验 Live Demo

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

Vue

光栅化

skia

Rust

6 条回复 • 2023-06-20 08:40:27 +08:00

lairdnote

2023-06-19 08:05:57 +08:00

newbee

melovto

2023-06-19 11:39:58 +08:00 via iPhone

@lairdnote 感谢🙏

Thiece

2023-06-19 14:26:32 +08:00

项目没有针对屏幕进行像素点对点渲染优化吗？
而且 1 像素的 line 并不是 1 像素；
<v-surface :width="360" :height="360">
<v-line :strokeWidth="1" color="black" :p1="[100, 260]" :p2="[50, 260]" />
<v-line :strokeWidth="1" color="black" :p1="[100, 262]" :p2="[50, 262]" />
</v-surface>

melovto

2023-06-19 22:40:40 +08:00

@Thiece 感谢建议！据我了解这应该是一个在 @2x 或者 @3x 屏幕上会出现的一个多倍屏像素比的问题

因为我这里的方案是把图形光栅化成为一张图片

看起来我这边应该允许渲染的结果按照多倍屏的比例进行渲染或者允许开发者根据自己的需要自定义调整图片展现的宽高

Thiece

2023-06-20 00:09:51 +08:00

@melovto
应该是此问题，但是又不太准确，下午测试是在 MBP 15 Retina 屏幕上进行的，在 Windows 的 100%屏幕渲染下依旧有此问题，这可能涉及到了多倍屏渲染的问题。

另外刚才我还发现一个问题，在 Demo https://vue-skia.netlify.app/ 中，圆角矩形的线条处，直线的像素与弧线的像素的显示上似乎存在的一些区别。这个问题在 MacOS 与 Windows 上都存在。
对于圆角矩形有以下该问题：
1 、直线似乎并不是一根完整的 1px 宽度，而是两个带有透明通道的 1px 像素；（ round-rect 和 line 不一样的是 line 是 2px 的不透明线条）
2 、round-rect 弧形线处的渲染结果和直线处的方法不一样，弧形处的为正常的 1px 。

针对这个问题我进行了搜索找到以下内容：
https://www.jianshu.com/p/c71aa4debba8

因为我不会相关方面的代码，但是结合表现情况下来，可能为相同的问题；但是文中的解决方案可能存在潜在的风险并且会增加代码的复杂度，例如需要处理移动的单位时，所以对单位进行放大和缩小时，对于坐标对齐的问题会有麻烦。

melovto

2023-06-20 08:40:27 +08:00 via iPhone

@Thiece 感谢！还找到了文章我会深入读下