美文网首页
绘制一个气泡边框

绘制一个气泡边框

作者: 大成小栈 | 来源:发表于2024-08-07 11:24 被阅读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)
            }
            
        }
    

    相关文章

      网友评论

          本文标题:绘制一个气泡边框

          本文链接:https://www.haomeiwen.com/subject/ynwqkjtx.html