Ausführliche Erklärung gängiger Methoden der UIBezierPath Bezier-Kurve für iOS-Wissenskompetenz

Hintergrund

In der iOS-Entwicklung kommt es häufig vor, dass einige Grafiken wie Rechtecke, Kreise, Ellipsen, Bögen oder unregelmäßige Polygone gezeichnet werden. Zu diesem Zeitpunkt können wir die Methode draw(_ rect: CGRect) von UIView umschreiben und dann UIBezierPath verwenden zeichnen.

UIBezierPath ist eine Klasse in UIKit, das eine Kapselung von Pfaden im Core Graphics-Framework darstellt.

In Bezug auf das Prinzip der iOS-Zeichnung können Sie den Artikel dieses Bloggers lesen: UIView-Zeichnungs- und Anzeigeprinzip des zugrunde liegenden Prinzips von iOS, Prozessanalyse und Leistungsoptimierung

Grundlegende Eigenschaften und Methodenbeschreibungen

1 UIColor.red.set()

Legen Sie die Linienfarbe fest, die die Pinselfarbe ist.

2 Zeilenbreite

Linienbreite

3 lineCapStyle

Line cap style, eine Aufzählung vom Typ CGLineCap, wie folgt definiert

public enum CGLineCap : Int32, @unchecked Sendable {
    
    /// 指定不绘制端点，即线条结尾处直接结束。
    case butt    = 0

    /// 绘制圆形端点，即线条结尾处绘制一个直径为线条宽度的半圆
    case round   = 1

    /// 绘制方形端点，即线条结尾处绘制半个边长为线条宽度的正方形。
    /// 需要说明的是，这种形状的端点与“butt”形状的端点十分相似，只是采用这种形式的端点的线条略长一点而已
    case square  = 2
}
复制代码

Der Effekt ist wie folgt, die Reihenfolge entspricht der Aufzählungsreihenfolge nacheinander

4 lineJoinStyle

Der Linienverbindungsstil, also der Eckenstil, ist eine Aufzählung vom Typ CGLineJoin und wird wie folgt definiert

public enum CGLineJoin : Int32, @unchecked Sendable {
    
    /// 尖角
    case miter = 0

    /// 圆角
    case round = 1

    /// 缺角
    case bevel = 2
}
复制代码

Der Effekt ist wie folgt, die Reihenfolge entspricht der Aufzählungsreihenfolge nacheinander

5 Takt ()

Der Strich erhält eine Ansicht, die nicht gefüllt ist, dh es wird nur eine gekrümmte Route gezeichnet.

6 füllen()

Die durch Füllen erhaltene innere gefüllte Ansicht füllt die durch die Kurve gebildete geometrische Figur mit der Pinselfarbe.

Rechteck zeichnen

Draw by init(rect: CGRect) Methode, der Code ist wie folgt

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath(rect: CGRect(x: 100, y: 100, width: 200, height: 100))
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.stroke()
        
    let path2 = UIBezierPath(rect: CGRect(x: 100, y: 230, width: 200, height: 200))
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.fill()
}
复制代码

Zeichne ein Rechteck mit abgerundeten Ecken

Es gibt zwei Möglichkeiten: Wenn alle vier Ecken abgerundet werden müssen, können sie mit der Methode init(roundedRect rect: CGRect, cornerRadius: CGFloat) gezeichnet werden.

Wenn Sie nur einige abgerundete Ecken benötigen, können Sie mit der Methode init(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize) zeichnen.

Code zeigen wie unten

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    let path1 = UIBezierPath(roundedRect: CGRect(x: 100, y: 100, width: 200, height: 100), cornerRadius: 10)
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.stroke()
        
    let path2 = UIBezierPath(roundedRect: CGRect(x: 100, y: 230, width: 200, height: 200), byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 10, height: 10))
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.fill()
}
复制代码

Polygon zeichnen

通过move(to point: CGPoint)和addLine(to point: CGPoint)方法绘制，moveToPoint：这个方法是设置起始点，意味着从这个点开始。addLineToPoint：设置想要创建的多边形经过的点，也就是两线相交的那个点，可以连续创建line，每一个line的起点都是先前的终点，终点就是指定的点，将线段连接起来就是我们想要创建的多边形了。最后第五条线是用path.close()得到的，closePath方法不仅结束一个shape的subpath表述，它也在最后一个点和第一个点之间画一条线段，这是一个便利的方法，我们不需要去画最后一条线了。代码如下

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    let path = UIBezierPath()
    path.lineWidth = 5.0
    path.lineCapStyle = .round
    path.lineJoinStyle = .round
    path.move(to: CGPoint(x: 100, y: 300))
    path.addLine(to: CGPoint(x: 200, y: 200))
    path.addLine(to: CGPoint(x: 300, y: 300))
    path.addLine(to: CGPoint(x: 260, y: 400))
    path.addLine(to: CGPoint(x: 140, y: 400))
    path.close()
    path.fill()
}
复制代码

绘制椭圆

通过init(ovalIn rect: CGRect)方法绘制，如果传入的rect是一个矩形，则得到矩形的内切椭圆，如果传入的rect是一个正方形，则得到正方形的内切圆。代码如下

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath(ovalIn: CGRect(x: 100, y: 100, width: 200, height: 100))
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.stroke()
        
    let path2 = UIBezierPath(ovalIn: CGRect(x: 100, y: 230, width: 200, height: 200))
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.fill()
}
复制代码

绘制一段弧线

通过init(arcCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)方法绘制，其中arcCenter指圆心坐标，radius指圆的半径，startAngle指圆弧的起始角度，endAngle指圆弧的结束角度，clockwise指是否顺时针方向绘制。其中圆弧的角度参考系如下

代码如下

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath(arcCenter: CGPoint(x: 200, y: 250), radius: 100, startAngle: 180 / 180 * .pi, endAngle: 45 / 180 * .pi, clockwise: true)
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.stroke()
        
    let path2 = UIBezierPath(arcCenter: CGPoint(x: 200, y: 450), radius: 100, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.fill()
}
复制代码

绘制二次贝塞尔曲线

通过addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)方法绘制，曲线段在当前点开始，在指定的点结束，一个控制点的切线定义，图示如下

代码如下

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath()
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.move(to: CGPoint(x: 100, y: 200))
    path1.addQuadCurve(to: CGPoint(x: 300, y: 200), controlPoint: CGPoint(x: 100, y: 100))
    path1.stroke()
        
    let path2 = UIBezierPath()
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.move(to: CGPoint(x: 100, y: 250))
    path2.addQuadCurve(to: CGPoint(x: 300, y: 250), controlPoint: CGPoint(x: 250, y: 400))
    path2.fill()
}
复制代码

绘制三次贝塞尔曲线

通过addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)方法绘制，曲线段在当前点开始，在指定的点结束，两个控制点的切线定义，图示如下

代码如下

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath()
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.move(to: CGPoint(x: 100, y: 200))
    path1.addCurve(to: CGPoint(x: 300, y: 200), controlPoint1: CGPoint(x: 150, y: 50), controlPoint2: CGPoint(x: 250, y: 350))
    path1.stroke()
        
    let path2 = UIBezierPath()
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.move(to: CGPoint(x: 100, y: 350))
    path2.addCurve(to: CGPoint(x: 300, y: 350), controlPoint1: CGPoint(x: 150, y: 200), controlPoint2: CGPoint(x: 250, y: 500))
    path2.fill()
}
复制代码

绘制虚线

Zeichnen mit der Methode setLineDash(_ pattern: UnsafePointer?, count: Int, phase: CGfloat).

Dabei ist Muster ein Array im C-Stil aus Gleitkommawerten, das die Längen (in Punkten) von Liniensegmenten und Lücken im Muster enthält. Die Werte im Array wechseln sich ab, beginnend mit der ersten Segmentlänge, gefolgt von der ersten Lückenlänge, gefolgt von der zweiten Segmentlänge und so weiter.

count ist die Anzahl der Werte im Muster, also die Anzahl der gepunkteten Array-Elemente.

Phase ist, wo die gestrichelte Linie beginnt, d. h. der Versatz, bei dem mit dem Zeichnen des Musters begonnen werden soll, gemessen entlang der Punkte des gestrichelten Musters. Beispielsweise bewirkt ein Phasenwert von 6 für das Muster 5-2-3-2, dass die Zeichnung in der Mitte der ersten Lücke beginnt.

Code zeigen wie unten

override func draw(_ rect: CGRect) {
    UIColor.red.set()
    
    let path1 = UIBezierPath()
    path1.lineWidth = 5.0
    path1.lineCapStyle = .round
    path1.lineJoinStyle = .round
    path1.move(to: CGPoint(x: 50, y: 200))
    path1.addLine(to: CGPoint(x: 400, y: 200))
    var dashConfig1:[CGFloat] = [10.0, 15.0]
    path1.setLineDash(&dashConfig1, count: dashConfig1.count, phase: 0)
    path1.stroke()
        
    let path2 = UIBezierPath()
    path2.lineWidth = 5.0
    path2.lineCapStyle = .round
    path2.lineJoinStyle = .round
    path2.move(to: CGPoint(x: 50, y: 250))
    path2.addLine(to: CGPoint(x: 400, y: 250))
    var dashConfig2:[CGFloat] = [10.0, 15.0, 15.0, 25.0]
    path2.setLineDash(&dashConfig2, count: dashConfig2.count, phase: 0)
    path2.stroke()
}
复制代码