How to draw a path with multiple joints with correct style in skia?

[Lucida]

Hi there

A vector network in figma:

Drawing with skia just using 6 SkPath objects equally results in a wrong style at the joints.

I don't known if skia is able to render this kind of path. or a new path rasterizing algorithm need to be implemented? Could you give me some guidance?

 Thanks

[craste...@gmail.com]

It would help if you specified what your problem with it was.  You left that blank.

[Brian Osman]

We chatted about this a bit, but I don't think there's an easy solution to rendering this kind of primitive in Skia. Skia (like most 2D libraries) operates on paths, which have different topology than Figma's vector networks (https://medium.com/figma-design/introducing-vector-networks-3b877d2b864f). Any solution is probably going to involve quite a bit of (custom) code on the CPU to compute the stroked vector network as a filled path (to get the joins correct), plus a way to handle the arbitrary filling rules.

I think these vector networks are really impressive (and a fun / powerful authoring tool), but they represent something fundamentally different than paths, so we don't have a simple answer - sorry.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/17369e9a-d98d-4013-8a39-0fb47e7ffa0en%40googlegroups.com.

[Lucida]

Sorry for the unclear stating . I had posted images to illustrate my problem.

It seems that skia can't handle the style of a point with multiple joins correctly.

[Lucida]

Thanks for your answer. Does skia provide any  mechanism to writing these custom code without heavily changing other party of skia?

I don't have any idea about how to achieve this effect and don't know if additional 2d  graphisc algorithms need to be introduced. 

[Greg Daniel]

As Brian mentioned, probably the closest thing Skia can provide is the ability to draw filled paths. So you would need to do a lot of CPU work yourself to convert what you have into a series of filled paths. In other words you would remove the "stroking" and the new paths you give Skia would be the outline of all the stroked paths. That will allow you to get the joins that you want but would be a lot of work on your end to calculate this. You also need to make sure that you get the fill/winding correct. In figmas approach I believe they ignore winding and say every "section" can be filled with its own color. This really isn't a concept in Skia either so you'll need to make sure your filled paths are set up to handle this correctly.

On a side note, is there any documentation/spec on how figmas multiple joins are supposed to work? I can take some guesses looking at examples but it would be nice to see it spec'd out exactly how it should work.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/e11e3f5e-49ca-411c-be5e-c45d9f8b634en%40googlegroups.com.

[Lucida]

I have not found any tutorials on the internals of figma vector. Maybe this is the closet one https://alexharri.medium.com/the-engineering-behind-figmas-vector-networks-688568e37110.  I have not read it thoroughly yet.

I'm sorry I cannot figure out what you say that removing the internal strokes and draw the outline path with filled? Do you mean that drawing an filled shape with one single closed path first and then "masking out" the inner region by drawing each individual inner closed component?

[paul....@gmail.com]

If you export a Figma file, (containing a vector network) as an SVG, you will see how Figma implemented this feature.  The SVG will contain all the individual lines in the network, and there will also be little overlapping generated fillets to implement all the joins.   I am pretty sure that method isn't just how they do SVG exports either.  It's very likely that this how they do the rendering in the app as well.

If you know a little trigonometry, it shouldn't be all that hard to reproduce their method yourself.  Where it might get complicated is if you need to support rounded corners etc.  But if you don't need that, then the task of implementing the fillet generation doesn't seem an impossible task.

I think there are probably also other ways to implement vector networks.  For example by careful application of clipping paths.  Clipping each enclosed path against all other enclosed paths, may get you close to a solution.

Paul