UIToolkit Generate Custom Shapes With Vector API

The new vector API for UIToolkit is based on the Mesh API as part of the UI library, basically it's a wrapper on top of the mesh api used in UIToolkit to generate custom meshes.

Vector api is a decent api in UIToolkit to generate custom meshes without having the same verbosity as mesh api. If you're familiar with SkiaSharp, vector api is very similar to that, syntax wise.

So I've decided to explore the api a little bit and try to make a custom mesh generator with it, sounds like a cool pet project that can be done pretty quick on my weekend.

1st we would need to make our own custom class derived from VisualElement for our MeshGenerationContext to contain all Painter2D properties.

    ///<summary>Class to contain vector api.</summary>
    public class UTKMesh : VisualElement
    {
        ///<summary>Vector coordinates used to paint via Paint2D.</summary>
        public List<Vector2> paths { get; set; }
        public MeshGenerationContext utkContext{get;set;}

        public UTKMesh(List<Vector3> paths)
        {
            this.paths = paths;
            generateVisualContent += OnGenerateVisualContent;
        }

        void OnGenerateVisualContent(MeshGenerationContext mgc)
        {
            utkContext = mgc;
            this.DrawLinePath();
        }

}

The DrawLinePath() method is a static helper that will create the path based on the local position of a container which is the parent that will contain the generated context.

So here's, a little example how we can connect between multiple position based on the vector api doc.

var paint2d = new Paint2D();
paint2d.BeginPath();
paint2d.LineTo(new Vector2(100, 100));
paint2d.LineTo(new Vector2(200, 200));
paint2d.LineTo(new Vector2(150, 150));
paint2d.ClosePath();

The LineTo method is what we're using to create paths based on Vector2 position to another point in our parent container space. Pretty neat!

Now let's not do that manually, but instead we want to make a chain of connecting lines in a loop, this way we can create as many lines we want to draw, also we already defined our path List in our custom class so now all we have to do is to create a loop to connect them. Also assuming that we already added all local position to that List.

            for (int i = 0; i < paths.Count; i++)
            {
                paint2d.LineTo(paths[i]);
            }

            paint2d.ClosePath();            

And if we want to fill it with a color, then we can add another Fill and that's all.

Well, that's obviously wasn't all about, we can do curves, or bezierCurves and even Quadratic curves which will be too long to write all of them here.

So just grab the code here and look it for your self :)

(Custom Shape Generator For UIToolkit)[https://github.com/breadnone/UTKShapeGen-Custom-Shapes-Editor-For-UIToolkit]

~Cheers