How do I create a gradient transitioning colors from outside to inside of a path using Skia (Skiasharp)?

31 views
Skip to first unread message

Peter Nelson

unread,
Feb 20, 2024, 8:01:31 AMFeb 20
to skia-discuss
Hello,
I'm new to using Skia, so help with this question is really appreciated. I am trying to draw a gradient that transitions from one color at the outside of a path to another color on the interior of a path all the way around the path using SkiaSharp. I've been playing with all the different gradient shaders, and I have checked out the samples, but none of the samples implement quite what I'm trying to do. Right now, I can draw a solid color line around the path and then fill the path with another color, but I can't figure out how to create a gradient that transitions between the two colors. It seems like this should be easy, but I haven't yet figured out how to create the effect with SkiaSharp. What I'm trying to achieve is something like this:
B49Hk.png

I've also thought about just drawing the border around the inside of the path multiple times, changing the alpha value of the color each time, but I'm not quite sure about how to do the proper translate and scale transforms to get that to work. 

Thanks ahead of time for any pointers on solving this.

Sherlock Doyle

unread,
Feb 20, 2024, 10:05:57 AMFeb 20
to skia-discuss

Peter Nelson

unread,
Feb 20, 2024, 2:02:44 PMFeb 20
to skia-discuss
I read through that article some time ago and tried some experiments with mask filters, but perhaps I didn't do enough. I'll try it again. A blur effect isn't exactly what I'm after; I'm trying to get a gradient, but if a blur effect gives me an effect close to a gradient, I'll go with it. Thanks for your reply. If anyone has any ideas on how to implement a gradient, it still would be helpful.

Brian Osman

unread,
Feb 20, 2024, 2:06:08 PMFeb 20
to skia-d...@googlegroups.com
Just to be clear: There is no feature in Skia that will give you an actual gradient that follows the contours of a path's "perimeter". (That turns out to be really poorly defined). You can do things like radial gradients, but those are going to be circular (or elliptical with a local matrix), rather than matching the path shape.

--
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/40afce54-4d6e-401c-8fb3-fa831b3c8dean%40googlegroups.com.

Peter Nelson

unread,
Feb 20, 2024, 2:34:33 PMFeb 20
to skia-discuss
Thanks for clarifying that, Brian. It's surprising to me that Skia doesn't have such a feature. I've used a GDI+ PathGradientBrush to create a gradient that follows the contours of a path in the past, and it seems to work. I'm certainly not an expert with graphics programming, though, so I probably don't understand the limitations on implementing that feature.

Sherlock Doyle

unread,
Feb 21, 2024, 12:04:35 PMFeb 21
to skia-discuss
This is how it'll look with inner blur. Note that it just blurs the mask (think Photoshop, GIMP). In other words, it reduces the alpha and lets the background show. In your case, make the background black and draw the path.
test.png
Reply all
Reply to author
Forward
0 new messages