UIButton 中的 UIBezierPath 圆角

Question

我想在文本周围绘制一个可点击的气泡形状。为了做到这一点，我决定向 UIButton 添加一个 shapelayer，如下所示：

// Button also has this
bubbleButton.contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
bubbleButton.setTitle("Gutp", for: .normal)

// In my subclass of UIButton
override func layoutSubviews() {
    super.layoutSubviews()

    self.bubbleLayer?.removeFromSuperlayer()

    let maskLayer = CAShapeLayer.init()
    let bezierPath = UIBezierPath.init(roundedRect: self.bounds,
                                       byRoundingCorners: [.topRight, .topLeft, .bottomLeft],
                                       cornerRadii: CGSize(width: 20, height: 20))
    maskLayer.path = bezierPath.cgPath
    maskLayer.strokeColor = UIColor.red.cgColor
    maskLayer.lineWidth = 2
    maskLayer.fillColor = UIColor.clear.cgColor
    maskLayer.backgroundColor = UIColor.clear.cgColor
    maskLayer.isOpaque = false

    self.bubbleLayer = maskLayer

    if let layers = self.layer.sublayers {
        self.layer.insertSublayer(self.bubbleLayer!, at: UInt32(layers.count))
    } else {
        self.layer.addSublayer(self.bubbleLayer!)
    }
}

请不要看现在的表演。

我在 UIStackView 中添加了 2 个这样的按钮。

在某些文本情况下（通常当文本很短时）我会得到一个有趣的人工制品（如果可以这么说的话，是一条尾巴），而在文本较长的情况下会得到一个正常的气泡：

我怎样才能解决这个问题？为什么我会出现这样的行为？

编辑：链接有关 bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: 中损坏的cornerRadii参数的其他可能相关的问题。也许它会对有类似问题的人有所帮助。

1. 为什么CGSize类型的cornerRadii参数在-[UIBezierPath bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:]中？

2. iOS 7 上疯狂的圆角矩形 UIBezierPath 行为。这是怎么回事？

Answer 1

要使用这些圆角矩形方法，您必须确保视图尺寸大于所使用的半径。在您的情况下，宽度和高度都必须大于 40 （半径大小为 20x20 所以max(20*2, 20*2) = 40）。

一般来说，我更喜欢使用自定义方法来生成此类路径。使用直线和圆弧通常会给您带来更好的灵活性。您可以尝试以下操作：

    /// Returns a path with rounded corners
    ///
    /// - Parameters:
    ///   - frame: A frame at which the path is drawn. To fit in view "bounds" should be used
    ///   - maximumRadius: A maximum corner radius used. For smaller views radius will be min(width/2, height/2)
    /// - Returns: Returns a new path
    func roundedRectPath(inRect frame: CGRect, radiusConstrainedTo maximumRadius: CGFloat) -> UIBezierPath {

        let radisu = min(maximumRadius, min(frame.size.width*0.5, frame.size.height*0.5))

        let path = UIBezierPath()

        path.move(to: CGPoint(x: frame.origin.x + radisu, y: frame.origin.y)) // Top left
        path.addLine(to: CGPoint(x: frame.origin.x + frame.size.width - radisu, y: frame.origin.y))  // Top right
        path.addQuadCurve(to: CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y + frame.size.height - radisu), controlPoint: CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y)) // Top right arc
        path.addLine(to: CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y + frame.size.height - radisu))  // Bottom right
        path.addQuadCurve(to: CGPoint(x: frame.origin.x + frame.size.width - radisu, y: frame.origin.y + frame.size.height), controlPoint: CGPoint(x: frame.origin.x + frame.size.width, y: frame.origin.y + frame.size.height)) // Bottom right arc
        path.addLine(to: CGPoint(x: frame.origin.x + radisu, y: frame.origin.y + frame.size.height))  // Bottom left
        path.addQuadCurve(to: CGPoint(x: frame.origin.x, y: frame.origin.y + frame.size.height - radisu), controlPoint: CGPoint(x: frame.origin.x, y: frame.origin.y + frame.size.height)) // Bottom left arc
        path.addLine(to: CGPoint(x: frame.origin.x, y: frame.origin.y + radisu))  // Top left
        path.addQuadCurve(to: CGPoint(x: frame.origin.x + radisu, y: frame.origin.y), controlPoint: CGPoint(x: frame.origin.x, y: frame.origin.y)) // Top left arc
        path.close()

        return path
    }

当将其与描边一起使用时，您还需要将框架插入线宽的一半。这是“绘制矩形”过程的片段，但可以应用于任何地方：

        UIColor.red.setStroke()
        let lineWidth: CGFloat = 5.0
        let path = roundedRectPath(inRect: bounds.insetBy(dx: lineWidth*0.5, dy: lineWidth*0.5), radiusConstrainedTo: 30.0)
        path.lineWidth = lineWidth
        path.stroke()

注意bounds.insetBy(dx: lineWidth*0.5, dy: lineWidth*0.5).