[Swift] 气泡 | 镂空

// 气泡图片拉伸
let bgImgView1 = UIImageView(frame: CGRect(x: 20, y: 200, width: 100, height: 100))
bgImgView1.backgroundColor = UIColor.systemBlue
let iconImgView = UIImageView(frame: bgImgView1.bounds)
iconImgView.image = UIImage(named: "home_star")?.resizableImage(withCapInsets: UIEdgeInsets(top: 12, left: 14, bottom: 10, right: 6))
bgImgView1.layer.mask = iconImgView.layer
self.view.addSubview(bgImgView1)

// 气泡图片拉伸
let bgImgView2 = UIImageView(frame: CGRect(x: 150, y: 200, width: 100, height: 100))
bgImgView2.backgroundColor = UIColor.systemBlue
let iconShape = CAShapeLayer()
iconShape.frame = bgImgView2.bounds
iconShape.contents = UIImage(named: "home_star")?.cgImage
iconShape.contentsCenter = CGRect(x: 0.7, y: 0.7, width: 0.1, height: 0.1)
iconShape.contentsScale = UIScreen.main.scale
bgImgView2.layer.mask = iconShape
self.view.addSubview(bgImgView2)

// 镂空
let bgView = UIView(frame: CGRect(x: 20, y: 330, width: 100, height: 100))
bgView.backgroundColor = UIColor.systemBlue
let bezier = UIBezierPath(arcCenter: CGPoint(x: 50, y: 50), radius: 20, startAngle: 0, endAngle: CGFloat.pi*2, clockwise: true)
let mask = UIBezierPath(arcCenter: CGPoint(x: 30, y: 30), radius: 20, startAngle: 0, endAngle: CGFloat.pi*2, clockwise: true)
bezier.append(mask)
let shape = CAShapeLayer()
shape.fillRule = .evenOdd // 奇偶层显示规则, (奇数显示, 偶数镂空)
shape.path = bezier.cgPath
bgView.layer.mask = shape
self.view.addSubview(bgView)

// 画气泡
let arrowTop: CGFloat = 10
let arrowWidth: CGFloat = 10
let arrowHeight: CGFloat = 10
let radius: CGFloat = 20
let width: CGFloat = 200 - arrowWidth
let height: CGFloat = 100

let bubble = UIView(frame: CGRect(x: 150, y: 330, width: 200, height: 100))
bubble.backgroundColor = UIColor.systemBlue

let bubbleBezier = UIBezierPath()
bubbleBezier.move(to: CGPoint(x: 0, y: radius + arrowTop + arrowHeight / 2)) // 箭头
bubbleBezier.addLine(to: CGPoint(x: arrowWidth, y: radius + arrowTop)) // 箭头右上
//bubbleBezier.addLine(to: CGPoint(x: arrowWidth, y: radius)) // 左上圆角
bubbleBezier.addArc(withCenter: CGPoint(x: arrowWidth+radius, y: radius), radius: radius, startAngle: CGFloat.pi, endAngle: CGFloat.pi*1.5, clockwise: true) // 左上圆角
bubbleBezier.addLine(to: CGPoint(x: arrowWidth+radius, y: 0)) // 左上
bubbleBezier.addLine(to: CGPoint(x: width-radius, y: 0)) // 右上
//bubbleBezier.addLine(to: CGPoint(x: width, y: radius)) // 右上圆角
bubbleBezier.addArc(withCenter: CGPoint(x: width-radius, y: radius), radius: radius, startAngle: CGFloat.pi*1.5, endAngle: CGFloat.pi*2, clockwise: true) // 右上圆角
bubbleBezier.addLine(to: CGPoint(x: width, y: height-radius)) // 右下
//bubbleBezier.addLine(to: CGPoint(x: width-radius, y: height)) // 右下圆角
bubbleBezier.addArc(withCenter: CGPoint(x: width-radius, y: height-radius), radius: radius, startAngle: 0, endAngle: CGFloat.pi*0.5, clockwise: true) // 右下圆角
bubbleBezier.addLine(to: CGPoint(x: arrowWidth+radius, y: height)) // 左下
//bubbleBezier.addLine(to: CGPoint(x: arrowWidth, y: height-radius)) // 左下圆角
bubbleBezier.addArc(withCenter: CGPoint(x: arrowWidth+radius, y: height-radius), radius: radius, startAngle: CGFloat.pi*0.5, endAngle: CGFloat.pi, clockwise: true) // 左下圆角
bubbleBezier.addLine(to: CGPoint(x: arrowWidth, y: radius + arrowTop + arrowHeight)) // 箭头右下
bubbleBezier.close()
let bubbleShape = CAShapeLayer()
bubbleShape.path = bubbleBezier.cgPath
bubbleShape.lineWidth = 2
bubbleShape.strokeColor = UIColor.systemGreen.cgColor
bubbleShape.fillColor = UIColor.clear.cgColor
bubble.layer.addSublayer(bubbleShape)
self.view.addSubview(bubble)