ios - 基于路径的 mask ，具有很好的抗锯齿效果

Question

我想用圆圈遮盖正方形。我使用它而不是圆角半径是因为我稍后想用动画做一些事情。

我可以遮住它，但边缘很粗糙:

  // Target View
  let targetView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
  targetView.backgroundColor = UIColor.redColor()

  // Mask
  let maskingPath = UIBezierPath()
  let half = targetView.frame.width / 2
  maskingPath.addArcWithCenter(CGPoint(x: half, y: half), radius: half, startAngle: 0, endAngle: 360, clockwise: true)
  let maskingLayer = CAShapeLayer()
  maskingLayer.path = maskingPath.CGPath

  // Maybe setting contentsScale?
  // maskingLayer.contentsScale = UIScreen.mainScreen().scale // doesn't change anything, sorry 
  // Maybe enabling edgeAntialiasing?
  // maskingLayer.allowsEdgeAntialiasing = true // also doesn't change anything
  // Magnification filter?
  // maskingLayer.magnificationFilter = kCAFilterNearest // nuttin'

  targetView.layer.mask = maskingLayer

我试过了 magnificationFilter以及其他一些事情。

如何添加抗锯齿的可动画圆形 mask ？

Answer 1

您正在给 addArcWithCenter 一个以度为单位的角度:

maskingPath.addArcWithCenter(CGPoint(x: half, y: half),
                             radius: half,
                             startAngle: 0,
                             endAngle: 360,
                             clockwise: true)

但是the documentation规定角度应以弧度为单位。

因此，您正在创建一条多次重叠的路径。边缘绘制在边缘先前通过的顶部，在同一位置。在积累足够多的 channel 后，它们最终看起来不透明(或几乎不透明)。如果您在彼此之上创建多个圆形路径，您会看到类似的东西。

这对我来说效果更好:

maskingPath.addArcWithCenter(CGPoint(x: half, y: half),
                             radius: half,
                             startAngle: 0,
                             endAngle: CGFloat(M_PI * 2.0),
                             clockwise: true)

(但由于您真的想要一个封闭的椭圆，您应该使用 UIBezierPath(ovalInRect: targetView.bounds)，就像您在回答中所做的那样。)