search

Brooooooklyn / canvas

High performance skia binding to Node.js. Zero system dependencies and pure npm packages without any postinstall scripts nor node-gyp.
https://vercel.skia.rs
MIT License
1.75k stars 76 forks source link

Extends Path2D to match PathKit functions #227

Closed Brooooooklyn closed 2 years ago

Brooooooklyn commented 3 years ago

https://skia.org/docs/user/modules/pathkit/

/cc @yisibl

yisibl commented 3 years ago

Nice! PathOps is particularly important for font processing and can help us convert the Fill rule of SVG.

yisibl commented 3 years ago

当前 Skia 官方的 pathkit 没有导出 asWinding() 函数，希望也可以增加这个 API。它在字体处理中非常有用，可以把 fill-rule 由 evenodd 转换为 nonzero。

yisibl commented 3 years ago

Skia 的实现在这里：https://bugs.chromium.org/p/skia/issues/detail?id=7682#c5

yisibl commented 3 years ago

这个 .NET 库中有类似的导出：https://github.com/mono/SkiaSharp/issues/840

OpenGG commented 2 years ago

asWinding() 完成度不如 skia-pathops 现在还无法完全摆脱 python 的代码

OpenGG commented 2 years ago

抱歉，是我搞错了。

asWinding() 目前只能处理没有交叉点的 path ，这是一个已知问题，不能算bug，起码不是下游skr canvas的bug。

Set the result with fill type winding to area equivalent to path. Returns true if successful. Does not detect if path contains contours which contain self-crossings or cross other contours; in these cases, may return true even though result does not fill same area as path. Returns true if operation was able to produce a result; otherwise, result is unmodified. The result may be the input.

Demo:

https://codesandbox.io/s/github/OpenGG/evenodd-fix-winding?file=/src/App.vue

yisibl commented 2 years ago

@OpenGG 印象中，我记得 skia-pathops 对于 asWinding() 做过一些特殊处理

https://codesandbox.io/s/github/OpenGG/evenodd-fix-winding?file=/src/App.vue

你的示例中，视觉上看起来 skia-canvas 和 skr-canvas 的结果一样？

OpenGG commented 2 years ago

@yisibl 是的，skia-canvas 和 skr-canvas 都直接使用了 skia 的 asWinding() ，都不能处理交叉点。 skia-pathops 在 python 里有一个特殊处理，所以可以得到正确结果。