UIBezierPath，如何绘制"QuadCurve" [英] UIBezierPath, how to draw "QuadCurve"

问题描述

我尝试使用UIBezierPath绘制形状，但我不完全了解如何使用"addQuadCurve"，我首先从中心圆孔向左绘制Curve，但不知道如何绘制右边缘.

I am try draw shape using UIBezierPath, but I am not completely understand how need to use "addQuadCurve", I am draw first Curve left from the center cirle hole but can't understand how to draw right edge.

我做错了什么?

结果需要什么:我的结果是:

Result What need: My result:

形状代码:

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()
    }
}

给我举个例子，什么需要改变或向我解释我在哪里犯了错?

Show me example what need change or explain me where I did mistake?

推荐答案

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

I am solved this problem using "addCurve" instead of "addQuadCurve". code which I am replace

来自:

// 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"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！