ios - 用侧曲线 UIBezierPath 画一条对角线

Question

我想像下面这样用侧曲线画对角线

代码:

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)

    }

输出:

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

Answer 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
}