绘制带有侧曲线 UIBezierPath 的对角线答案

【问题标题】：Draw a diagonal line with side curves UIBezierPath绘制带有侧曲线 UIBezierPath 的对角线
【发布时间】：2019-02-19 07:55:53
【问题描述】：

我想用如下边曲线绘制对角线

代码：

func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {

        //// Bezier Drawing
        let bezierPath = UIBezierPath()
        UIColor.black.setStroke()
        bezierPath.lineWidth = 1
        bezierPath.stroke()


        //// Bezier 2 Drawing
        let bezier2Path = UIBezierPath()
        bezier2Path.move(to: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 12.17, y: frame.minY + 119.5), controlPoint1: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42), controlPoint2: CGPoint(x: frame.minX + 0.5, y: frame.minY + 119.5))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint1: CGPoint(x: frame.minX + 23.85, y: frame.minY + 119.5), controlPoint2: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 237.87, y: frame.minY + 0.5), controlPoint1: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint2: CGPoint(x: frame.minX + 243.7, y: frame.minY + 16.58))
        UIColor.black.setStroke()
        bezier2Path.lineWidth = 1
        bezier2Path.lineCapStyle = .square
        bezier2Path.stroke()

        let layer1 = CAShapeLayer()
        layer1.path = bezierPath.cgPath

        let layer2 = CAShapeLayer()
        layer2.path = bezier2Path.cgPath

        imageCollectionView.layer.addSublayer(layer1)
        imageCollectionView.layer.addSublayer(layer2)

    }

输出：

正如您在输出中看到的那样，它填充了黑色，而我只给出了笔划。我不太擅长贝塞尔路径。谁能帮我达到预期的效果

【问题讨论】：

标签： ios swift uibezierpath cashapelayer

【解决方案1】：

也许使用 addArc 更容易？

func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {
    let rhsY:CGFloat = frame.minY + 60   // Please adjust this value depending on your need
    let cornerRadius:CGFloat = 25
    let angle = atan2(frame.maxY - rhsY, frame.width)

    // upper left corner
    let p1 = CGPoint(x: frame.minX, y: frame.minY)
    // left point touching bottom left corner
    let p2 = CGPoint(x: frame.minX, y: frame.maxY - cornerRadius)
    let a = cornerRadius * cos(angle)
    let o = cornerRadius * sin(angle)

    // Center of bottom left round corner
    let c1 = CGPoint(x: p2.x + a, y: p2.y - o)
    let c1Start = CGFloat.pi - angle
    let c1End = c1Start - (CGFloat.pi / 2)

    // Center of bottom right round corner
    let c2 = CGPoint(x: frame.maxX - cornerRadius, y: rhsY)

    // bottom point touching bottom left corner
//    let p3 = CGPoint(x: c1.x + o, y: c1.y + a)
    // bottom point touching bottom right corner
    let p4 = CGPoint(x: c2.x + o, y: c2.y + a)
    // right point touching bottom right corner
//    let p5 = CGPoint(x: frame.maxX, y: rhsY)
    // upper right corner
    let p6 = CGPoint(x: frame.maxX, y: frame.minY)

    let path = UIBezierPath()
    path.move(to: p1)
    path.addLine(to: p2)
    path.addArc(withCenter: c1, radius: cornerRadius, startAngle: c1Start, endAngle: c1End, clockwise: false)
    path.addLine(to: p4)
    path.addArc(withCenter: c2, radius: cornerRadius, startAngle: c1End, endAngle: 0, clockwise: false)
    path.addLine(to: p6)
    path.addLine(to: p1)

    // I am guessing you are trying to use a mask to the top level image?
    let maskLayer = CAShapeLayer()
    maskLayer.path = path.cgPath
    imageCollectionView.layer.mask = maskLayer
}

【讨论】：

谢谢比尔。我正朝着在 iOS 中创建自定义形状的方向前进，而您的解决方案是朝着这个方向迈出的一大步。

【解决方案2】：

除非您提供填充颜色，否则默认使用黑色填充路径。如果路径未闭合，则填充颜色尝试使用起点和终点进行填充。

【讨论】：