一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して11日目です。クリックしてイベントの詳細をご覧ください。
序文：段階的に、私はやりすぎましたが、残念ながら私は極端なことを1つもしていません。アニメのキャラクターが大好きで、トリックは1つしか知りませんが、このトリックを頂点まで実践して、そんな人になりたいです。
今日の言葉：知識への投資は常に報われます。
この章では、パスを使用して線、図形、その他のベクターグラフィックを描画する方法を学習します。
まず、次の図は一例です。
どのように長方形を描きますか？
以前に単純なPythonを学習したことがある場合は、Pythonには「python」描画、つまり座標軸を確立するためのものがあり、「python」の位置が接続されて形状を形成していることを知っておく必要があります。
同様に、私たちの迅速さも同じ原則です。
新しいプロジェクトを作成することから始めて、SwiftUIPathという名前を付けます。
まず、描画プロセスを言葉で説明してみましょう。
まず、座標軸を設定します。この座標軸は、数学的な座標軸とは異なり、設計で使用される座標軸です。左上隅は、座標軸（0、0）の原点です。
横軸の左側がX軸、下の縦軸がY軸です。
（0,0）にポイントを置きます。
（0,0）から（0,200）まで線を引きます。
（0,200）から（300,200）まで線を引きます。
（300,200）から（300,0）まで線を引きます。
（300,0）から（0,0）まで線を引きます。
最後に青で塗りつぶします。
次に、それをコード形式に変換します。
// 绘制一个矩形
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)
复制代码ここでは、path（）を使用してパスを描画します。パスクロージャでは、move（to :)はポイントを（0、0）の位置に移動します。
次に、addLine（to :)を使用して線を描画し、最後に.fillを使用して色で塗りつぶします。
このようにして、ベースイメージの描画が完了しました。
要約すると、最初にグラフを座標軸に配置し、その各ポイントの位置を取得してから、クロージャーでpath（）を使用します（クロージャー：コードブロックの意味、例のコードはパスに属します） ）ポイントが描画されるたびに1本の線で十分です。
さて、次に、それを拡張しましょう。次の図は例です。
この場合、境界線のみが必要であり、塗りつぶしの色は必要ありません。
前のレッスンの画像またはボタンをどのように「ストローク」したか覚えていますか？
はい、.stroke（）修飾子を使用して、境界線の幅と色を指定しました。
如果是圆角再描边，我们还可以用.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)
复制代码ここでは、addArcと呼ばれる新しいナレッジポイントが導入されています。これは、SwiftUIが開発者向けに提供する円弧を描画するためのAPIです。
そのパラメータも比較的単純です。
| パラメータ | 名前 | 説明 |
|---|---|---|
| 中心 | 中心点 | 円弧の中心点、例：200,200 |
| 半径 | 半径 | 円弧の半径、例：100 |
| startAngle | 開始角度 | 円弧の開始角度、通常は0 |
| endAngle | 終了角度 | 図に示すように、円弧の終了角度は、円弧の2/3しか必要ないため、終了角度が90度であることがわかります。 |
| 時計回り | 時計回りですか | デフォルトはtrueです。falseの場合、円弧は反時計回りに描画されます。 |
実際、SwiftUIプログラミングは非常に簡単です。
Appleが提供するAPI、そこにあるパラメーター、およびパラメーターの意味を理解する必要があります。
後で、実際のビジネスに応じて調整するだけで済みます。
さて、これまでのところ、パスパスの学習はほぼ終わりです。
このコラムがお役に立てば、いいね、コメント、フォローしてください〜