Explicación detallada de los métodos comunes de la curva UIBezierPath Bezier para la alfabetización del conocimiento de iOS

antecedentes

En el desarrollo de iOS, a menudo se encuentra para dibujar algunos gráficos, como rectángulos, círculos, elipses, arcos o polígonos irregulares. En este momento, podemos reescribir el método draw(_ rect: CGRect) de UIView, y luego usar UIBezierPath para dibujar.

UIBezierPath es una clase en UIKit, que es una encapsulación de rutas en el marco Core Graphics.

Con respecto al principio del dibujo de iOS, puede consultar el artículo de este blogger : Dibujo de UIView y principio de visualización del principio subyacente de iOS, análisis de procesos y optimización del rendimiento

Propiedades básicas y descripciones de métodos.

1 UIColor.red.set()

Establezca el color de la línea, que es el color del pincel.

2 ancho de línea

Grosor de línea

3 líneaCapStyle

Estilo de remate de línea, una enumeración de tipo CGLineCap, definida de la siguiente manera

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

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

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

El efecto es el siguiente, el orden corresponde al orden de enumeración uno por uno

4 líneaJoinStyle

El estilo de unión de línea, es decir, el estilo de esquina, es una enumeración de tipo CGLineJoin y se define de la siguiente manera

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

    /// 圆角
    case round = 1

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

El efecto es el siguiente, el orden corresponde al orden de enumeración uno por uno

5 tiempos()

Lo que obtiene el trazo es una vista que no se rellena, es decir, solo se dibuja un recorrido curvo.

6 llenar()

La vista rellena interior obtenida por relleno rellenará la figura geométrica formada por la curva con el color del pincel.

dibujar rectángulo

Dibujar por método init(rect: CGRect), el código es el siguiente

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()
}
复制代码

Dibuja un rectángulo con esquinas redondeadas.

Hay dos formas: si es necesario redondear las cuatro esquinas, se pueden dibujar con el método init(roundedRect rect: CGRect, cornerRadius: CGFloat).

Si solo necesita algunas esquinas redondeadas, puede dibujar con el método init(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize).

el código se muestra a continuación

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()
}
复制代码

dibujar polígono

通过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()
}
复制代码

绘制虚线

Dibujar mediante el método setLineDash(_ patrón: UnsafePointer?, recuento: Int, fase: CGFloat).

donde patrón es una matriz de estilo C de valores de coma flotante que contienen las longitudes (en puntos) de los segmentos de línea y los espacios en el patrón. Los valores en la matriz se alternan, comenzando con la longitud del primer segmento, seguida de la longitud del primer espacio, seguida de la longitud del segundo segmento, y así sucesivamente.

count es la cantidad de valores en el patrón, es decir, la cantidad de elementos de la matriz punteada.

La fase es donde comienza la línea discontinua, es decir, el desplazamiento en el que comienza a dibujar el patrón, medido a lo largo de los puntos del patrón discontinuo. Por ejemplo, un valor de fase de 6 para el patrón 5-2-3-2 hará que el dibujo comience en el medio del primer espacio.

el código se muestra a continuación

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()
}
复制代码