绘制一个气泡边框

2024-08-07  本文已影响0人  大成小栈

对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)
        }
        
    }
上一篇下一篇

猜你喜欢

热点阅读