Search code examples
iosobjective-cgraphicscore-animationquartz-graphics

Adjacent CAShapeLayer Antialiasing Issue


I'm drawing a pie chart using a CAShapeLayer for each slice of the pie. Even when the end angle of one pie slice is equal to the start angle of the adjacent slice, antialiasing is resulting in the underlying background color appearing between each pice slice if the border between slices is at an angle.

https://i.sstatic.net/Qdu8d.png

I'd like to eliminate the slight gap between slices while still using antialiasing so the resulting pie cart still looks smooth. Conceptually, it seems if there were a way to apply antialiasing to the entire CALayer and it's pie slice sublayers after all the pie slices were drawn, that would do the trick... The pie slices would be antialiased into each other instead of into the background.

I've played around with as many CALayer properties as I can think of and am having a hard time finding more information on this. Any ideas?

UPDATE: See my answer below.


Solution

  • UPDATE: Rob's answer is pretty good, but possibly results in other antialiasing issues. I ended up 'filling' the gaps by drawing 1pt wide radial lines along the end angle of each pie slice, each line being the same color as the adjacent slice. These lines are drawn at a lower z index than the pie slices, so they are underneath. Here's what they look like without the pie slices drawn on top:

    The filler lines with no slices drawn.

    And here's the final product:

    Final result with lines underneath and slices on top.