ios - 如何绘制内层的蒙版？

Question

我正在使用以下代码生成此代码(在 drawRect 内部):

let path = CGMutablePath()
path.addArc(center: self.circleCenter, radius: radius, startAngle: 0.0, endAngle: 2 * 3.14, clockwise: false)

let whitePath = UIBezierPath(cgPath: path)
UIColor.white.setStroke()
whitePath.lineWidth = 3
whitePath.stroke()


path.addRect(CGRect(x: 0, y: 0, width: frame.width, height: frame.height))

let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path
maskLayer.fillRule = kCAFillRuleEvenOdd

layer.mask = maskLayer

不过，我想把圆圈的顶部涂白，这样整个圆圈里面都是白色的，但我不确定该怎么做，因为我已经设置了 layer.mask 成为 CAShape 层，所以我在这个圆圈内所做的任何绘图都不会显示出来。

掩码需要是一个圆圈，因为实际上对于我的大多数用例，对于这个自定义 UIView，它不会剪辑另一个 View 的顶部，所以使用圆圈效果很好。如何绘制圆的顶部区域？

编辑:我希望这部分(我用红色圈出的地方)填充为白色:

所以我希望最终图像看起来像(抱歉质量不好，在我的 iPad 上手动绘制):

Answer 1

你说:

... the "Messaging" is from a view underneath. The dark shadow view is a UIView on top, and I have a mask in the dark shadow view so I can see through underneath it.

这里有两种方法:

1. 如果你真的想使用 mask ，你需要一个复杂的 View 层次结构，它有四个主要 View : Root View (白色)、镶边 View (当你添加你的圆形 mask ；例如，你需要遮盖的圆圈的顶部)，当你将 mask 添加到 chrome 和调光 View 时不会被遮盖的 UI 元素 View ，以及调光 View (哪个也会被屏蔽)。后三个需要是主视图的 subview (不要将消息按钮放在 chrome View 上，而是使其成为自己的 View ，因此当您屏蔽 chrome 时，这些 UI 元素不会被屏蔽掉)。

   您最终会得到如下内容(这是在添加 mask 后显示的):

   

   然后您可以使调光 View 可见并屏蔽它和背景 View :

   @IBAction func didTapButton(_ sender: Any) {
       dimmingView.alpha = 0.5
       let center = messagingView.center
       let radius = messagingView.frame.width * 0.7
   
       mask(center: center, radius: radius, in: messagingView.superview!, on: dimmingView)
       mask(center: center, radius: radius, in: messagingView.superview!, on: backgroundView)
   }
   
   private func mask(center: CGPoint, radius: CGFloat, in view: UIView, on viewToMask: UIView) {
       let point = view.convert(center, to: viewToMask)
       let path = UIBezierPath(rect: viewToMask.bounds)
       path.addArc(withCenter: point, radius: radius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
       let mask = CAShapeLayer()
       mask.fillColor = UIColor.white.cgColor
       mask.path = path.cgPath
       mask.fillRule = kCAFillRuleEvenOdd
       viewToMask.layer.mask = mask
   }
   

   因此，在调光 View 不可见且没有 mask 的情况下，您可以看到之前的 View :

   

   然后在调暗 View 可见并且它和“chrome” View 都被屏蔽之后:

   

2. 恕我直言，更简单的做法是:

   • 获取消息 View 的快照；
   • 添加调光 View (模糊消息 View )；
   • 在调光 View 的顶部添加圆形 View (不透明和白色)；和
   • 在圆圈顶部添加消息 View 的快照(或其他再现)。

   这会产生一种感觉，就像您在“显示”消息按钮一样，但您真正在做的是添加调暗 View 、一个圆圈和消息按钮的另一个再现。这避免了向各种 View 添加掩码的所有笨拙。