最近一项目UI非常偏爱圆角,不得不使用遮罩的方式解决,记录下几种镂空遮罩的方式
private lazy var testView1: UIView = {
let view = UIView(frame: CGRect(x: 10, y: 100, width: 200, height: 200))
view.backgroundColor = .red
return view
}()
private lazy var testView2: UIView = {
let view = UIView(frame: CGRect(x: 220, y: 100, width: 200, height: 200))
view.backgroundColor = .red
return view
}()
private lazy var testView3: UIView = {
let view = UIView(frame: CGRect(x: 10, y: 310, width: 200, height: 200))
view.backgroundColor = .red
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(testView1)
view.addSubview(testView2)
view.addSubview(testView3)
test1()
test2()
test3()
}
// 一个镂空遮罩,中间镂空透明 四周不透明
private func test1() {
let bezierPath = UIBezierPath(rect: testView1.bounds)
// 圆形 arcCenter中心点 endAngle 一般写2pi
let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
// 矩形 roundedRect 矩形位置 cornerRadius 矩形圆边
let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
bezierPath.append(subPath2)
let maskLayer = CAShapeLayer()
maskLayer.path = bezierPath.cgPath
maskLayer.fillRule = .evenOdd
testView1.layer.mask = maskLayer
}
// 中间不透明 四周透明
private func test2() {
let bezierPath = UIBezierPath()
// 圆形 arcCenter中心点 endAngle 一般写2pi
let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
// 矩形 roundedRect 矩形位置 cornerRadius 矩形圆边
let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
bezierPath.append(subPath)
let maskLayer = CAShapeLayer()
maskLayer.path = bezierPath.cgPath
maskLayer.fillColor = UIColor.cyan.cgColor
testView2.layer.insertSublayer(maskLayer, at: 0)// 四周透明,中间加个遮罩
}
// 直接切个圆出来,四周丢掉,只保留中间
private func test3() {
let bezierPath = UIBezierPath()
// 圆形 arcCenter中心点 endAngle 一般写2pi
let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
// 矩形 roundedRect 矩形位置 cornerRadius 矩形圆边
let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
bezierPath.append(subPath)
let maskLayer = CAShapeLayer()
maskLayer.path = bezierPath.cgPath
maskLayer.fillColor = UIColor.cyan.cgColor
testView3.layer.mask = maskLayer// 四周全砍了,只留中间,等于切圆角效果
}