Union or logical or on two CGPaths (or CAShapeLayers) to create one

Question

I'm trying to do a Union of multiple CGPaths in iOS. How can I do this?

I've tried adding combining paths using "path.AddPath()" but I get this weird artifacting as if it's doing a Join instead of a Union. I've also tried using "path.CopyByStrokingPath()" but it leaves these weird white spaces as well. I noticed the parameter to CopyByStrokingPath is "CGLineJoin", but I would really want "CGLineUnion" but that doesn't seem to exist.

Basically what you see here, I'm making a circle path around each object, then making rectangle paths inbetween each object to fill the gaps. Then I'm combining all the paths and getting these awkward white spaces in between (when I want it fully filled). I could make every shape (circle and rectangle) a separate layer and then the spaces go away, but then I have like 15 separate layers just for one drawing.... I really just want to combine paths and have it draw onto one CAShape layer

Reference Posts

Multiple CGPaths to create one

How to implement boolean operations on bezier paths

Answer 1

It turns out there's a very big difference between a rectangle created by points & lines vs a rectangle created via CGPath.AddRect.

CGPath path = ...
CGRect rectToDraw = ...
CGAffineTransform transform = ....
path.AddRect (transform, rectToDraw);

The above works when you want to overlap shapes and have the overlapped portion fill completely like a logical Union.

The below code does NOT overlap like a Union and produces the awkward gaps as seen in the screenshot in the original post. It appears to overlap using some other logical expression

CGPath path3 = new CGPath ();
path3.MoveToPoint (100, 100);
path3.AddLineToPoint (100, 250);
path3.AddLineToPoint (350, 250);
path3.AddLineToPoint (350, 100);
path3.CloseSubpath ();