UIBezierPath，如何绘制"QuadCurve"

Question

我正在尝试使用 UIBezierPath 绘制形状，但我不完全理解如何需要使用“addQuadCurve”，我首先从中心圆孔向左绘制曲线，但无法理解如何绘制右边缘。

我做错了什么？

结果需要什么：我的结果：

形状代码：

class CustomShapeOfBottomOne: UIView {

    // init the view with a rectangular frame
    override init(frame: CGRect)
    {
      super.init(frame: frame)
      backgroundColor = UIColor.clear
    }
    // init the view by deserialisation
    required init?(coder aDecoder: NSCoder)
    {
      super.init(coder: aDecoder)
      backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect)
    {
        
        let fillColor = UIColor(red: 0.118, green: 0.118, blue: 0.149, alpha: 1.000)
        
        let path = UIBezierPath()
        let viewWidth = frame.width
        let viewHeight = frame.height - 20
        
        path.move(to: CGPoint(x: (viewWidth - viewWidth) + 10, y: 0))
        
        path.addLine(to: CGPoint(x: (viewWidth / 2) - 35 - 10, y: 0))
        
        // center left edge
        
        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) - 35, y: (11/2.0)), controlPoint: CGPoint(x: (viewWidth / 2 ) - 35, y: 0))
        // end left edge
        
        path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 35, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi * Double.pi), clockwise: false)
        
        // How to draw this curve?
        
        // center right edge
//        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) + 35 + 10 , y: 0), controlPoint: CGPoint(x: (viewWidth / 2 ) + 35 - 10, y: 10))
        
        
        // end right edge
        
        path.addLine(to: CGPoint(x: viewWidth - 10, y: 0))
                
        path.addArc(withCenter: CGPoint(x: viewWidth - 10, y: (viewHeight - viewHeight) + 10),
                    radius: 10,
                    startAngle: CGFloat(Double.pi / 2), // 90 degree
                    endAngle: CGFloat(0), // 0 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth, y: (viewHeight - viewHeight) + viewHeight + 10))
        
        path.addArc(withCenter: CGPoint(x:  viewWidth - 10, y: (viewHeight - viewHeight) + viewHeight + 10),
                    radius: 10,
                    startAngle: CGFloat(0), // 360 degree
                endAngle: CGFloat((3 * Double.pi) / 2 ), // 270 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth - 10, y: (viewHeight - viewHeight) + viewHeight + 10 + 10))
        path.addLine(to: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + viewHeight + 10 + 10))
        
        path.addArc(withCenter: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + viewHeight + 10),
                    radius: 10,
                    startAngle: CGFloat((3 * Double.pi) / 2), // 270 degree
                    endAngle: CGFloat(Double.pi ), // 180 degree
                clockwise: true)
        
        path.addLine(to: CGPoint(x: viewWidth - viewWidth, y: (viewHeight - viewHeight) + viewHeight + 10))
        path.addLine(to: CGPoint(x: viewWidth - viewWidth, y: (viewHeight - viewHeight) + 10))
        
        path.addArc(withCenter: CGPoint(x: (viewWidth - viewWidth) + 10, y: (viewHeight - viewHeight) + 10),
                    radius: 10,
                    startAngle: CGFloat(Double.pi), // 180 degree
                endAngle: CGFloat(Double.pi / 2 ), // 90 degree
                clockwise: true)
        
        path.close()
        fillColor.setFill()
        path.fill()
    }
}

举例说明需要更改的地方或解释我哪里做错了？

Answer 1

在方格纸上画出你想做什么。绘制您正在使用的所有直线、四边形曲线和弧线段。

我想你会发现你的弧线一直延伸到形状的顶部，覆盖了你想要的圆角。您需要降低圆弧的 Y 位置，使圆弧的起点和终点从内部圆角的末端开始，圆角略低于形状的顶部。

Answer 2

我使用“addCurve”而不是“addQuadCurve”解决了这个问题。我要替换的代码

来自：

// center left edge
        
        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) - 35, y: (11/2.0)), controlPoint: CGPoint(x: (viewWidth / 2 ) - 35, y: 0))
        // end left edge
        
        path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 35, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi * Double.pi), clockwise: false)
        
        // How to draw this curve?
        
        // center right edge
//        path.addQuadCurve(to: CGPoint(x: (viewWidth / 2 ) + 35 + 10 , y: 0), controlPoint: CGPoint(x: (viewWidth / 2 ) + 35 - 10, y: 10))
        
        
        // end right edge

至：

// 居中左边缘

    path.addCurve(to: CGPoint(x: (viewWidth / 2) - 35.9, y: 10), controlPoint1: CGPoint(x: (viewWidth / 2) - 35, y: 0), controlPoint2: CGPoint(x: (viewWidth / 2) - 35, y: 10))
    // end left edge
    
    path.addArc(withCenter: CGPoint(x: viewWidth / 2, y: 0), radius: 36.5, startAngle: CGFloat(Double.pi), endAngle: CGFloat(2 * Double.pi), clockwise: false)
    
    // How to draw this curve?
    
    // center right edge
    path.addCurve(to: CGPoint(x: (viewWidth / 2) + 35 + 8, y: 0), controlPoint1: CGPoint(x: (viewWidth / 2) + 36, y: 10), controlPoint2: CGPoint(x: (viewWidth / 2) + 35, y: 0))

    // end right edge

结果：

UIBezierPath，如何绘制"QuadCurve"

UIBezierPath, how to draw "QuadCurve"

swift

drawing

uibezierpath

curve