Search code examples
c#xamarin.formsskiasharpskia

Divide area into equal parts


I read the documentation from skiasharp.. I am interested in how I can divide the surface of a shape (rectangle or polygon) into equal parts. For example, divide the surface into 6 equal parts and paint those parts with two colors according to the even-odd principle (something like football grass field texture). I did not find any similar example in the documentation.


Solution

  • Maku, thanks for your answer. I resolved this. I needed something like this in the picture:

    enter image description here

    And my code for this result looks like this:

        using System;
    using SkiaSharp;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Linq;
    
    void Draw(SKCanvas canvas, int width, int height)
    {
                float scale = 22.0f;
                SKPath path = new SKPath();
                List<SKPoint> AreaCenters = new List<SKPoint>();
                List<SKPath> OutlinePaths = new List<SKPath>();
                OutlinePaths.Clear();
                AreaCenters.Clear();
                AreaCenters.Add(new SKPoint(0.0f, 0.0f));
                AreaCenters.Add(new SKPoint(200.0f, 0.0f));
                AreaCenters.Add(new SKPoint(100f, 200.0f));
                float scaleFactor =  1.1f;
                var scaleMatrix = SKMatrix.MakeSkew(scale * 2.0f, scale * scaleFactor);
                
                SKPaint fillColor1 = new SKPaint
                {
                    IsAntialias = true,
                    Color = SKColors.Transparent,
                    Style = SKPaintStyle.Stroke,
                    StrokeWidth = 3,
                    StrokeCap = SKStrokeCap.Square
                };
    
                SKPaint fillColor2 = new SKPaint
                {
                    IsAntialias = true,
                    Color = SKColors.DarkGreen,
                    Style = SKPaintStyle.StrokeAndFill,
                    StrokeWidth = 3,
                    StrokeCap = SKStrokeCap.Square
                };
    
                SKPaint lineColor = new SKPaint
                {
                    IsAntialias = true,
                    Color = SKColors.Orange,
                    Style = SKPaintStyle.Stroke,
                    StrokeWidth = 4.0f
                };
    
                
                    fillColor2.PathEffect = SKPathEffect.Create2DLine(scale, scaleMatrix);
    
                
    
                if (AreaCenters.Count > 0)
                {
                    path.MoveTo((AreaCenters[0]));
                    foreach (SKPoint p in AreaCenters.ToArray())
                    {
                        path.LineTo((p));
                    }
                    path.Close();
    
                    //path.Transform(TransformationMatrix);
                    //OutlinePath = path;
                    //this.OutlinePaths.Add(this.OutlinePath);
                    OutlinePaths.Add(path);
                    canvas.Save();
    
                    canvas.DrawPath(path, lineColor);
                    if (AreaCenters.Count > 2)
                        canvas.ClipPath(OutlinePaths[0]);
    
                    SKPath sKPath = new SKPath();
                    sKPath.AddPath(path, -scale, -scale * 2f);
                    sKPath.AddPath(path, -scale, scale * 2f);
                    sKPath.AddPath(path, scale, -scale * 2f);
                    sKPath.AddPath(path, scale, scale * 2f);
                    canvas.DrawPath(sKPath, fillColor1);
                    canvas.DrawPath(path, fillColor2);
                    canvas.DrawPath(path, lineColor);
                    fillColor1.Dispose();
                    fillColor2.Dispose();
                    canvas.Restore();
                }
    }
    

    For this purposes I'm used SKMatrix.CreateSkew() (or SKMatrix.MakeSkew()) method in skiasharp.