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

[melovto]

最近做了一个基于 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

欢迎尽量先体验 Live Demo

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

[lairdnote]

newbee

[melovto]

@lairdnote 感谢🙏

[Thiece]

项目没有针对屏幕进行像素点对点渲染优化吗？
而且 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]

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

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

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

[Thiece]

@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]

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