¡Acostúmbrate a escribir juntos! Este es el día 11 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .
Prólogo: Paso a paso, he intentado demasiado, pero desafortunadamente no he llegado al extremo. Me gusta mucho un personaje en un anime. Solo conozco un truco, pero quiero convertirme en esa persona practicando este truco hasta el pináculo.
Palabra del día: Invertir en conocimiento siempre da sus frutos.
En este capítulo, aprenderá a usar Trazado para dibujar líneas, formas y otros gráficos vectoriales.
En primer lugar, la siguiente figura es un ejemplo.
¿Cómo estamos dibujando un rectángulo?
Si ha aprendido python simple anteriormente, debe saber que python tiene un dibujo de "python", es decir, para establecer un eje de coordenadas, y las posiciones de "python" están conectadas para formar una forma.
Del mismo modo, nuestro veloz es también el mismo principio.
Comience creando un nuevo proyecto y asígnele el nombre SwiftUIPath.
Primero intentemos describir el proceso de dibujo con palabras.
Primero, establezca un eje de coordenadas. Este eje de coordenadas es diferente del eje de coordenadas matemático. Es el eje de coordenadas utilizado en el diseño. La esquina superior izquierda es el origen del eje de coordenadas (0, 0).
El lado izquierdo del eje horizontal es el eje X, y el eje vertical hacia abajo es el eje Y.
poner un punto en (0,0);
Dibujar una línea de (0,0) a (0,200);
Dibuja una línea de (0,200) a (300,200);
Dibuja una línea de (300,200) a (300,0);
Dibuja una línea de (300,0) a (0,0);
Finalmente rellénalo con azul.
Luego conviértalo en forma de código.
// 绘制一个矩形
Path() { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x:0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
}
.fill(Color.blue)
复制代码Aquí usamos path() para dibujar el camino. En el cierre del camino, move(to:) mueve un punto a la posición de (0, 0).
Luego use addLine(to:) para dibujar una línea y finalmente rellénela con un color con .fill.
De esta forma hemos completado el dibujo de la imagen base.
Para resumir, primero coloque el gráfico en un eje de coordenadas, obtenga la posición de cada punto y luego use path() en el cierre (cierre: el significado del bloque de código, el código en el ejemplo pertenece a la ruta ) cada vez que se dibuje un punto bastará con una línea.
Ok, a continuación, ampliémoslo, la siguiente imagen es un ejemplo:
En este caso, solo se necesita el borde, no se necesita color de relleno.
¿Recuerdas cómo "acariciamos" una imagen o un botón de la lección anterior?
Sí, usamos el modificador .stroke() para especificar el ancho y el color del borde.
如果是圆角再描边，我们还可以用.overlay()覆盖一层，详情见【SwiftUI第六天】。
因为我们图例是直角，只需要用到.stroke()修饰符。
// 绘制一个矩形
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
}
.stroke(Color.blue,lineWidth: 10)
复制代码我们发现好像少了一段线段。
因为我们没有指定一个步骤来绘制到原始点的直线，所以它显示了一个开放端点路径。
要关闭路径，可以在path闭包的末尾调用closeSubpath()的方法，该方法将自动将当前点与起点连接起来。
// 绘制一个矩形
Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 300, y: 200))
path.addLine(to: CGPoint(x: 300, y: 0))
path.closeSubpath()
}
.stroke(Color.blue,lineWidth: 10)
复制代码恭喜你，你学会了如何使用直线绘制简单的图形！
下一步，我们尝试绘制难度高一点的，带有曲线和圆弧的图形。
以下图为例：
在矩形的基础上，加了一个圆弧。
我们还是用坐标轴画出来，定好每一个点的坐标。
和画直角图形不一样的时，我们弧线用的是贝塞尔曲线，它需要控制1个控制点，确定它的弧度。
以下图为例，贝塞尔曲线的控制点为(150,0)。
我们先尝试用文字表示出来。
先放一个点在(0,40)；
从(0,40)到(15,40)画一条线；
从(15,40)到(285,40)画一条贝塞尔曲线，控制点是(150,0)；
从(285,40)到(300,40)画一条线；
从(300,40)到(300,100)画一条线；
从(300,100)到(0,100)画一条线；
最后填充颜色为蓝色。
不要怕，虽然分析起来有点麻烦，但之后用习惯了就快很多。
不要心急，慢慢来。
接下来，我们用代码的方式实现它。
//绘制一个圆弧
Path() { path in
path.move(to: CGPoint(x: 0, y: 40))
path.addLine(to: CGPoint(x: 15, y: 40))
path.addQuadCurve(to: CGPoint(x: 285, y: 40), control: CGPoint(x: 150, y: 0))
path.addLine(to: CGPoint(x: 300, y: 40))
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 0, y: 100))
}
.fill(Color.blue)
复制代码在这里，我们用到的是.addQuadCurve(to:)的方法。
它可以帮助我们绘制一条贝塞尔曲线，从而实现圆弧的效果。
和上面例子同理，我们可以将填充颜色的.fill变为.stroke，把图形变成线段。
//绘制一个圆弧
Path() { path in
path.move(to: CGPoint(x: 0, y: 40))
path.addLine(to: CGPoint(x: 15, y: 40))
path.addQuadCurve(to: CGPoint(x: 285, y: 40), control: CGPoint(x: 150, y: 0))
path.addLine(to: CGPoint(x: 300, y: 40))
path.addLine(to: CGPoint(x: 300, y: 100))
path.addLine(to: CGPoint(x: 0, y: 100))
}
.stroke(Color.blue, lineWidth: 10)
复制代码当我们的形状既有图形，又有描边时，我们可以用ZStack将两个path闭包包裹在一起。
实现以下的效果：
最后，缺口部分可以调用closeSubpath()的方法闭合线段路径。
恭喜你，又掌握了一个知识点！
好，下面，我们继续。
这一次，尝试画一个半圆弧，如下图所示:
和上面的分析方法一样，我们把这个圆放在一个坐标轴上。
这里，我们画一个半径为200的圆，把圆的圆心坐标放中间一点，比如(200,200)。
//绘制半圆弧
Path { path in
path.move(to: CGPoint(x: 200, y: 200))
path.addArc(center: .init(x: 200, y: 200), radius: 100, startAngle: Angle(degrees: 0.0), endAngle: Angle(degrees: 90), clockwise: true)
}
.fill(Color.green)
复制代码Aquí se presenta un nuevo punto de conocimiento, llamado addArc, que es una API para dibujar arcos proporcionada por SwiftUI para desarrolladores.
Sus parámetros también son relativamente simples:
| parámetro | nombre | describir |
|---|---|---|
| centro | punto central | El punto central del arco, ejemplo: 200,200 |
| radio | radio | El radio del arco, ejemplo: 100 |
| ángulo inicial | ángulo inicial | El ángulo inicial del arco, generalmente 0 |
| ángulo final | ángulo final | El ángulo final del arco, como se muestra en la figura, ya que solo necesitamos 2/3 del arco, podemos ver que el ángulo final es 90 |
| agujas del reloj | ¿Es en el sentido de las agujas del reloj? | El valor predeterminado es verdadero, si es falso, entonces el arco se dibuja en sentido contrario a las agujas del reloj |
De hecho, ¡la programación de SwiftUI es muy simple!
Necesitamos entender qué API están disponibles para nosotros proporcionadas por Apple, qué parámetros hay y qué significan los parámetros.
Más tarde, solo necesita ajustar de acuerdo con el negocio real.
Ok, hasta ahora, el aprendizaje del sendero Path casi ha terminado.
Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~