Search code examples
skiasharpskia

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


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);

Solution

  • 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.