绘制圆形相交线

Question

我必须创建一个带有按钮和一些自定义边框的选项卡（下图）。问题是我必须为每个相交添加 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 的方法。

Answer 1

如果您使用 UIBezierPath 绘制形状，设置 cornerRadius 将对该路径没有影响。

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

例如：

绿色虚线是tabFrame
pt1是tabFrame的"left"和"top + 10"（你的半径）
pt2是tabFrame的"left + 10"和"top"
pt3 是第一条曲线的第二条 "control point" - tabFrame
pt4是tabFrame的"right - 10"和"top"
pt5是tabFrame的"right"和"top + 10"
pt6 是第二条曲线的第二个 "control point" - tabFrame

所以

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

添加一条曲线到 pt2 ... from pt1 ...带曲线控制点共 pt3

然后：

path.addLine(to: pt4)

添加一条线从当前点(pt2)到pt4

然后：

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

添加一条曲线到 pt5 ... from pt4 ...带曲线控制点pt6

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

绘制圆形相交线

Draw Rounded Intersect Lines

core-graphics

rounded-corners

uikit

ios

uibezierpath