这是一个创建于 523 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近做了一个基于 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
 |
1
lairdnote 2023-06-19 08:05:57 +08:00
newbee
|
 |
3
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> |
 |
4
melovto OP |
|
5
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 因为我不会相关方面的代码，但是结合表现情况下来，可能为相同的问题；但是文中的解决方案可能存在潜在的风险并且会增加代码的复杂度，例如需要处理移动的单位时，所以对单位进行放大和缩小时，对于坐标对齐的问题会有麻烦。 |
Select Language