Why does my UIBezierPath mask still allow content to be drawn inside, despite it being "donut" shaped?

Question

I have a UIBezierPath in a circular donut shape:

var ovalPath = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: 32.0, height: 32.0))
ovalPath.lineWidth = 5
ovalPath.stroke()

And when I draw it:

let context = UIGraphicsGetCurrentContext()
let testShape = UIImage(named: "test-shape")!
CGContextSaveGState(context)
ovalPath.addClip()
CGContextDrawTiledImage(context, rect, testShape.CGImage)
CGContextRestoreGState(context)

Despite the mask being a donut, content still draws "inside", making the mask basically just a circle instead of being a hollow circle. How do I make it respect the fact that there's no inside?

Answer 1

你没有环形路径，你仍然有一个椭圆形。一条抚摸的椭圆形路径。 你想要的是由两个椭圆形组成的路径。 看看here。

这就是你如何做到的：

删除：

ovalPath.lineWidth = 5
ovalPath.stroke()

使用5px宽边框创建圆环形状：

var ovalPath = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: 32.0, height: 32.0))
ovalPath.usesEvenOddFillRule = true;
path.appendPath(UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: 27.0, height: 27.0)))