SkiaSharp - how to create a hatch or dotted pattern on the filled space between curves

Question

In SkiaSharp I can nicely fill the space between two curves by using SKPathFillType.EvenOdd. Below I show a simplified excerpt from the code. My question is how can I give a certain pattern to this filled area between the curves ? Here I can only fill it with a color and give it a transparency. I'm interested in applying a pattern, such as hatch or dots.

Thank you for any support.

Greetings,

Sorin

SKPath path = new SKPath();
path.FillType = SKPathFillType.EvenOdd;

// start the first curve
path.MoveTo(....);
path.LineTo(....); // draw the curve and close it
....

path.AddCircle(....); // add a second curve as a circle

SKPaint paint = new SKPaint(new SKFont(SKTypeface.Default)) {
                IsAntialias = true,
                Style = SKPaintStyle.Fill,
                Color = SKColors.Blue.WithAlpha((byte)(0xFF * (1 - 0.5))),
                StrokeWidth = 1
            };

canvas.DrawPath(path, paint);

score 0 · Accepted Answer · answered Jun 18 '21 at 11:18

I've managed to fix this with a trick. First of all, I do all I wrote above, i.e.

canvas.DrawPath(path, paint)

.... will draw a filled area between the two curves, with a certain transparency. On top of that (literally), I draw another pattern:

var hatch = new SKPath();
hatch.AddCircle(0, 0, 1);
var hatchPaint = new SKPaint {
   PathEffect = SKPathEffect.Create2DPath(SKMatrix.MakeScale(7, 7), hatch),
   Color = SKColors.RosyBrown,
   Style = SKPaintStyle.Stroke,
   StrokeWidth = 3
};

And again:

 canvas.DrawPath(path, hatchPaint);

This draws a nice hatch pattern on top of the filled area between the curves. Note: the size of the pattern is essential - here AddCircle(0, 0, 1), where the circle ray is 1 pixel. If you have a larger one, the hatch pattern will spill out the filled area, which is not what you want. To me this looks like a bug in SKIA.

SkiaSharp - how to create a hatch or dotted pattern on the filled space between curves

1 Answers1