对UIView绘制一个边框,气泡形状,小箭头在下居中:
override func draw(_ rect: CGRect) {
let cornerRadius = 10.0
let borderWidth = 1.5
let arrowHeight = 8.0
let arrowWidth = 16.0
guard let context = UIGraphicsGetCurrentContext() else { return }
context.setStrokeColor(UIColor.hex(0x00BF8F, alpha: 0.3).cgColor)
context.setFillColor(UIColor.clear.cgColor)
context.setLineWidth(borderWidth)
let bubbleRect = CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.width, height: rect.height - arrowHeight)
let path = UIBezierPath()
// 起点
path.move(to: CGPoint(x: bubbleRect.minX + cornerRadius, y: bubbleRect.minY))
// 上边
path.addLine(to: CGPoint(x: bubbleRect.maxX - cornerRadius, y: bubbleRect.minY))
path.addArc(withCenter: CGPoint(x: bubbleRect.maxX - cornerRadius, y: bubbleRect.minY + cornerRadius), radius: cornerRadius, startAngle: CGFloat(3 * Double.pi / 2), endAngle: 0, clockwise: true)
// 右边
path.addLine(to: CGPoint(x: bubbleRect.maxX, y: bubbleRect.maxY - cornerRadius))
path.addArc(withCenter: CGPoint(x: bubbleRect.maxX - cornerRadius, y: bubbleRect.maxY - cornerRadius), radius: cornerRadius, startAngle: 0, endAngle: CGFloat(Double.pi / 2), clockwise: true)
// 下边(右侧)
path.addLine(to: CGPoint(x: bubbleRect.midX + arrowWidth / 2, y: bubbleRect.maxY))
path.addLine(to: CGPoint(x: bubbleRect.midX, y: bubbleRect.maxY + arrowHeight))
path.addLine(to: CGPoint(x: bubbleRect.midX - arrowWidth / 2, y: bubbleRect.maxY))
// 下边(左侧)
path.addLine(to: CGPoint(x: bubbleRect.minX + cornerRadius, y: bubbleRect.maxY))
path.addArc(withCenter: CGPoint(x: bubbleRect.minX + cornerRadius, y: bubbleRect.maxY - cornerRadius), radius: cornerRadius, startAngle: CGFloat(Double.pi / 2), endAngle: CGFloat(Double.pi), clockwise: true)
// 左边
path.addLine(to: CGPoint(x: bubbleRect.minX, y: bubbleRect.minY + cornerRadius))
path.addArc(withCenter: CGPoint(x: bubbleRect.minX + cornerRadius, y: bubbleRect.minY + cornerRadius), radius: cornerRadius, startAngle: CGFloat(Double.pi), endAngle: CGFloat(3 * Double.pi / 2), clockwise: true)
path.close()
context.addPath(path.cgPath)
context.drawPath(using: .fillStroke)
}
}
网友评论