代码之家  ›  专栏  ›  技术社区  ›  Eddie

绘制圆角相交线

  •  0
  • Eddie  · 技术社区  · 6 年前

    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
        }
    

    结果如下:

    Tab1 Tab2

    如你所见,尽管我补充 cornerRadius = 10 ,就是不行。 borderLayer.lineCap = kCALineCapRound borderLayer.lineJoin = kCALineJoinBevel 也没用。

    奖金:

    我想有一个方法来实现动态 @IBInspectable var lineCornerRadius: CGFloat = 10 .

    1 回复  |  直到 6 年前
        1
  •  3
  •   DonMag    6 年前

    如果您正在使用 UIBezierPath

    相反,你想用 path.addCurve(to: ...)

    例如:

    enter image description here

    • 绿色虚线是tabFrame
    • pt1 是tabFrame的“左”和“顶+10”(你的半径)
    • pt2 是tabFrame的“left+10”和“top”
    • pt3
    • pt4 是tabFrame的“right-10”和“top”
    • pt5 tabFrame的“右”和“前10”
    • pt6

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

    添加曲线 ... 第1页 ... 曲线控制点为 pt3型

    path.addLine(to: pt4)
    

    ) 第4页

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

    添加曲线 第4页