Adding shapes along the Skia Path

[Bayramito]

How can. i add shapes along the Skia Path programatically ?

Example:

Hearts will be added along the path..
Number of the hearts can be more / less, and should have equal spacing between them

@william-candillon

[wcandillon]

there is a getPosTan method that does just that, it will even give you the orientation of the shape. this is what we use to draw text on paths: https://github.com/Shopify/react-native-skia/blob/main/package/src/dom/nodes/drawings/Text.ts#L49
We show the api the gradient along path video.

If this feels too complicated, there are probably some packages on npm that offer such feature.

[Bayramito]

yeah it's a bit complicated actually.... if there is a easier explanation of this or resource would be great to have...

Can't i simply get the total length of the path and divide it by the number of hearts and draw the actually shape of hearts while drawing the path itself ?

[wcandillon]

absolutely especially if you don't need to rotate the heart depending on the curvature of the shape, your implementation will be much easier.

[Bayramito]

No, i don't need to rotate them...

[Bayramito]

could you share a small of code example in this case please for a starting point ?

[wcandillon]

the video on the gradient along path would be the starting point. Another recommendation would be to look for how to do that in SVG ( you may find more tutorials there) and then port it to Skia (should be straigthforward).

[Bayramito]

Thank you so much @william-candillon

[Bayramito]

Hi William, Thank, you so much for your help. I really appreciate it, i finally finished the progress with your helps ... here is the result William Candillon ***@***.***>, 18 May 2023 Per, 12:27 tarihinde şunu yazdı:

…

the video on the gradient along path would be the starting point. Another recommendation would be to look for how to do that in SVG ( you may find more tutorials there) and then port it to Skia (should be straigthforward). — Reply to this email directly, view it on GitHub <#1593 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKTTQ6R7QCMSJBOCBLGE3KLXGXTRRANCNFSM6AAAAAAYGD3ISY> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

-- *================================* *Bayram Arif* *<Software Developer/>* CODE ALL ООД Petko Karavelov st. No: 26 Plovdiv / BULGARIA

[weishengkui]

can u show the codes ?