Vertexes doesn't get closed/connected properly in Vector API

Unity Engine
,
1

Hi, I’m making custom shapes via vector api, but as you can see it doesn’t connect the vertexes properly when using ArcTo.

Here’s the related snippet

            paint2D.BeginPath();

            for (int i = 0; i < mesh.paths.Count; i++)
            {
                if(i == 0 && mesh.paths.Count > 2)
                {
                    float sum = mesh.paths[i].x >= mesh.paths[mesh.paths.Count - 1].x ? -20 : 20;
                    paint2D.MoveTo(new Vector2(mesh.paths[i].x + sum, mesh.paths[i].y));
                }

                if(i + 1 < mesh.paths.Count)
                {
                    paint2D.ArcTo(mesh.paths[i], mesh.paths[i + 1], 20f);
                }
               
                if(i == mesh.paths.Count - 1 && mesh.paths.Count > 2)
                {
                    paint2D.ArcTo(mesh.paths[i], mesh.paths[0], 20f);                   
                }
            }
            paint2D.ClosePath();
            paint2D.Stroke();
            paint2D.Fill();
2

Hi! It looks like joins for closed paths aren’t generated properly. I think we may have fixed something similar in the past, but it would make sense to send a bug report so we can make sure this is fixed (Help > Report a Bug…).

Your drawing interface looks very nice by the way!

3

Found couple of weirdness in vector api related to connected edges for both QuadraticCurve and ArcTo. This for example when the curve radius set at certain values will resulted in botched connection :

And those vertexes jump at the end, kind of unexplainable

Here’s the related snippet :

paint2D.BeginPath();       
mesh.meshProperty.painter.BeginPath();
Vector2 center = Vector2.zero;

for (int i = 0; i < mesh.paths.Count; i++)
{
 if(mesh.paths.Count > 2)
 {
   if(i == 0)
   {
       center = Vector3.Lerp(mesh.paths[i], mesh.paths[mesh.paths.Count - 1], 0.5f);
       paint2D.MoveTo(center);
       paint2D.ArcTo(mesh.paths[i], center, mesh.meshProperty.curveRadius);
   }

                    if(i + 1 < mesh.paths.Count)
                    {
                        paint2D.ArcTo(mesh.paths[i], mesh.paths[i + 1], mesh.meshProperty.curveRadius);
                    }

                    if(i == mesh.paths.Count - 1)
                    {
                       
                        paint2D.ArcTo(mesh.paths[i], center, mesh.meshProperty.curveRadius);
                        //paint2D.MoveTo(center);
                        paint2D.LineTo(center);

                        //TODO: Workround
                        paint2D.ArcTo(center, center, mesh.meshProperty.curveRadius);
                    }
                }
            }
4

This was a known issue for QuadraticCurveTo, but not for ArcTo. I’m fairly confident we’ll be able to fix ArcTo quite easily, but QuadraticCurveTo is a different beast.

If this example is done with ArcTo, it could be a side effect of the painter trying to fit a large radius between segments that are too close together.

I don’t see anything wrong with the snippet, but it’s going to be hard to investigate without the mesh.paths values that causes issues. If you can report a bug that would be best. Thanks!

5

I will open a ticket, I found quite a lot of bugs with vector api for both Quadratic and Arcs, and am confident they’re related to how the connection being done in vector api especially for dead angles.

Thanks for the answer!

1 Like
6

Thank you!

You are one of the first user to use a semi-transparent stroke color. This exposes any geometry overlap that may occur during the tessellation process. I suspect most of these issues wouldn’t be noticeable with an opaque stroke color.

This could be a work-around for you in the meantime: render the shapes in a RenderTexture with an opaque stroke color, than fade the texture instead. The shape will be “baked” in a layer and will be blended in a way that’s more comparable with what a web browser would do.

7

Not sure if this is also a bug, but my guess it’s related to those reported here.
In this case it is impossible to have the same curves for all sides no matter what I did which resulted in uneven curves.

What’s weird is that when I filled those with just colors (without strokes). They look okay-ish for all sides, things started to go wrong when strokes were applied WITH closed path.

Happens to both Quadratic & Arcs

For context I’m drafting to make a mirror-effect so it would paint lines on both sides at the same time. It may not be as obvious but you’d notice the uneven-ness for those curves.

(Adding this to my bug report list)