绘制圆角相交线

Posted 2021-04-08

我必须创建一个带有按钮和一些自定义边框的选项卡（下图）。问题是我必须为每个交叉点添加cornerRadius但我不确定如何正确地执行它。

我有这个代码来绘制带边框的标签：

private func drawBorder(selectedTab: UIButton) {
        // The Tab frame (below one)
        guard let tabContainerFrame = vTabContainer?.frame else { return }

        let borderColor = selectedTab.titleColor(for: .selected)

        let tabFrame = selectedTab.convert(selectedTab.bounds, to: self)
        let topMargin: CGFloat = 5
        let tabOrigin = CGPoint(x: tabFrame.origin.x, y: tabFrame.origin.y - topMargin)

        // Make paths to draw
        let path = UIBezierPath()

        path.move(to: tabOrigin) // Origin (top left)
        path.addLine(to: CGPoint(x: tabFrame.maxX, y: tabOrigin.y)) // -> right
        path.addLine(to: CGPoint(x: tabFrame.maxX, y: tabFrame.maxY)) // -> down

        if tabFrame.maxX != tabContainerFrame.maxX {
            path.addLine(to: CGPoint(x: tabContainerFrame.maxX, y: tabContainerFrame.origin.y)) // -> right
        }

        path.addLine(to: CGPoint(x: tabContainerFrame.maxX, y: tabContainerFrame.maxY)) // -> Down
        path.addLine(to: CGPoint(x: tabContainerFrame.origin.x, y: tabContainerFrame.maxY)) // -> left
        path.addLine(to: CGPoint(x: tabContainerFrame.origin.x, y: tabContainerFrame.origin.y)) // -> up

        if tabOrigin.x != tabContainerFrame.origin.x {
            path.addLine(to: CGPoint(x: tabOrigin.x, y: tabContainerFrame.origin.y)) // -> right
        }

        // Close the path. This will create the last line automatically.
        path.close()

        // Draw
        let borderLayer = CAShapeLayer()
        borderLayer.path = path.cgPath
        borderLayer.lineCap = kCALineCapRound
        borderLayer.lineJoin = kCALineJoinBevel
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.strokeColor = borderColor?.cgColor
        borderLayer.cornerRadius = 10
        borderLayer.lineWidth = 2
        layer.addSublayer(borderLayer)

        self.borderLayer = borderLayer
    }

这是结果：

正如你所看到的，即使我添加cornerRadius = 10，它也无法正常工作。 borderLayer.lineCap = kCALineCapRound和borderLayer.lineJoin = kCALineJoinBevel也没有帮助。

奖金：

我想有办法实现动态@IBInspectable var lineCornerRadius: CGFloat = 10。

答案

如果使用UIBezierPath绘制形状，则设置cornerRadius将不会对该路径产生任何影响。

相反，你想使用path.addCurve(to: ...)来制作你的圆角。

例如：

• 绿色虚线是tabFrame
• pt1是tabFrame的“left”和“top + 10”（你的半径）
• pt2是tabFrame的“左+ 10”和“顶部”
• pt3是第一个曲线的第二个“控制点” - tabFrame的左上角
• pt4是tabFrame的“右 - 10”和“顶部”
• pt5是tabFrame的“右”和“顶+10”
• pt6是第二条曲线的第二个“控制点” - tabFrame的右上角

所以

path.addCurve(to: pt2, controlPoint1: pt1, controlPoint2: pt3)

添加曲线到pt2 ...来自pt1 ...与曲线控制点pt3

然后：

path.addLine(to: pt4)

从当前点（pt2）添加一条线到pt4

然后：

path.addCurve(to: pt5, controlPoint1: pt4, controlPoint2: pt6)

添加曲线到pt5 ...来自pt4 ...与曲线控制点pt6

你的形状的其余部分是正常的线段。