Html 点透镂空遮罩,swift 实现遮罩部分区域“挖洞”效果和点击事件穿透

在日常开发中有时候我们需要在APP中做用户指导，比如第一次进入某个页面的时候显示遮罩覆盖， 但是又需要将遮罩下的某些区域暴露出来，便于文字说明，比如我们需要在视图上加个遮罩，并且遮罩上要显示 按钮2 ：

原图

期待的效果图：按钮1被盖住，而 按钮2显示出来

效果

我们可以 在视图上加个遮罩，再往遮罩上画一个同样位置和样式的 按钮2 ，作为一个有追求的程序猿，我们是不能容忍这种 低效实现方式的。

我们可以通过iOS 的 Core Graphics 来实现，也很简单,只需要两句代码

重写 遮罩视图里面的 draw 方法：

override func draw(_ rect: CGRect) {

//利用 UIBezierPath 绘制出 按钮2 的外观路径，

let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)

//设置 路径填充样式为 clear 清除样式， 就能 使设置的路径中的 绘图区域被擦除掉

path.fill(with: .clear, alpha: 0.1)

}

点击穿透：

如果我们需要在遮罩上点击按钮2 区域响应 按钮2的事件，点击其它区域响应遮罩上的点击事件，我们可以重写 遮罩上的 事件传递方法hitTest：

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {

//按钮2区域的路径

let path = UIBezierPath.init(roundedRect: CGRect.init(x: 100, y: 300, width: 100.0, height: 40.0), cornerRadius: 20.0)

//判断 点击事件在 按钮2区域则 返回nil

if path.contains(point) {

return nil

}else{

return super.hitTest(point, with: event)

}

}