Resolved How to draw a circle in a custom control using Vector Graphic?

Hello everyone,

I'm currently trying to draw a circle using the Vector Graphic library. And it's not quite pretty neither simple.



I don't want to use the Unity's RadialProgress example because it generates a mesh ; I want to do that with svg. I found that VisualElements have an event `generateVisualContent`. So, I subscribe to it and when my element is renderer, I create a shape that I fill with the `VectorUtils.MakeCircleShape` method. But when I draw the contours, it seems broken.

Code (CSharp):

1.        
2. private void OnGenerateVisualContent(MeshGenerationContext context)
3.         {
4.             var center = new Vector2(
5.                 context.visualElement.resolvedStyle.width / 2,
6.                 context.visualElement.resolvedStyle.height / 2);
7.            
8.             Shape shape = new();
9.             VectorUtils.MakeCircleShape(shape, center, 100);
10.  
11.             var paint2D = context.painter2D;
12.             paint2D.strokeColor = Color.black;
13.             paint2D.fillColor = Color.yellow;
14.  
15.             foreach (var contour in shape.Contours)
16.             {
17.                 paint2D.BeginPath();
18.                 foreach (var segment in contour.Segments)
19.                     paint2D.BezierCurveTo(segment.P0, segment.P1, segment.P2);
20.                 paint2D.ClosePath();
21.             }
22.  
23.             paint2D.Fill();
24.             paint2D.Stroke();
25.         }
26.  

I know that Vector Graphics are still on the UITK roadmap, but I want to know if someone has already tried to draw simple elements using this package and UITK. Also, it seems weird that there are no methods to draw simple shapes by using the painter2D ; maybe I'm using it badly?

Thank you

 

Thank you! It works pretty well for a simple circle or arc draw. But is there an option to change the fill mode like VectorGraphics does?

 

Ok! Really great to see that. Thank you for your answers!