七爪源码：使用 SwiftUI 创建分段饼图
最大限度地利用路径在本文结束时，您将了解：
[*]如何使用路径
[*]如何添加弧
[*]关于 Arc 的参数
[*]如何创建饼图
[*]如何在饼图中分割段
开始吧
我们将首先画出我们的吃豆人。 开玩笑，我们将首先尝试为我们的饼图绘制一个简单的弧线。
为了绘制一个简单的 Arc，我们将使用 Path 并编写以下代码：
Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(0), clockwise: true)}.fill(Color.gray)要绘制弧线，我们必须首先为我们的绘制路径设置一个起点。
我们通过使用设置绘图路径起点的移动来做到这一点。
接下来，我们将从该起点绘制一条弧线。 为此，我们将在这里使用 addArc 你可以看到 addArc 接受了一些参数
[*]center - 指定用于定义圆弧的圆的中心点（在当前坐标系中）
[*]radius - 指定用于定义圆弧的圆的半径
[*]startAngle - 指定弧的起始角度（以弧度为单位）
[*]endAngle - 指定弧的结束角度（以弧度为单位）
[*]clockwise - 绘制圆弧的方向
输入上面的代码后，我们可以看到类似下面的内容。
填充其他细分
现在，您已经了解了如何使用 addArc，您可以轻松地创建具有不同段的饼图。
要获得具有不同段的饼图，我们需要的是覆盖每个新的弧或将每个段保持在另一个之上。 这可以使用 ZStack 轻松完成。
我们只需要创建一些具有不同开始和结束角度的弧。 为了适应这种变化，我们将添加更多的弧，并将初始弧的起始角度稍微修改为 150 度，而不是仅仅为了吸引人的 270 度。
添加 3 个新路径并修改我们的初始路径后，我们的代码现在将如下所示。
ZStack { Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(150), endAngle: .degrees(0), clockwise: true) } .fill(Color.gray) Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(150), clockwise: true) } .fill(Color.red) Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(290), endAngle: .degrees(270), clockwise: true) } .fill(Color.orange) Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(360), endAngle: .degrees(290), clockwise: true) } .fill(Color.yellow) }
突出显示细分
为了突出显示特定段或从饼图中移动/隔离特定段，我们需要将偏移量修改器应用于该特定段。
作为一名曼联球迷，我会将红色部分与饼图隔离开来。 为此，我将为 Red's Path 设置一个负偏移值。
Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(150), clockwise: true) } .fill(Color.red) .offset(x: -20, y: -20)现在我们的饼图将如下图所示。
细化细分
我们可以在这个饼图上做很多细节。 为了让它看起来更有吸引力，我会给它一个标题和偏移边框，这样分割的部分看起来会更加突出。
为了添加边框，我们将简单地做一个笔画，为了给出一个标题，我们将为路径创建一个覆盖并添加与以下代码相同的文本。
但这不应该在现有段上完成，我们将复制需要用边框颜色分割的段。 所以代码现在看起来像这样。
Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(150), clockwise: true) } .fill(Color.red) .offset(x: -20, y: -20) .overlay( Text("MUFC") .font(.system(.body)) .bold() .foregroundColor(.white) .offset(x: -20, y: -150) )Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(150), clockwise: true) } .stroke(Color(red: 0.5, green: 0.2, blue: 0.2), lineWidth: 10) .offset(x: -20, y: -20)
检查代码你可以看到我已经复制了红色路径。 但是在我使用的第一个填充中，我用文本给出了覆盖，而在第二个使用笔划的地方，我没有给出覆盖，而是它遵循相同的偏移量。
如您所见，这里有一些问题，我们必须给出的笔划也没有覆盖底部。 那么我们该如何解决呢？
我们只需要告诉 Path 关闭它的 Subpath 。
通过编写：path.closeSubpath()，代码现在看起来像这样：
Path { path in path.move(to: startPoint) path.addArc(center: startPoint, radius: 90, startAngle: .degrees(270), endAngle: .degrees(150), clockwise: true) path.closeSubpath() } .stroke(Color(red: 0.5, green: 0.2, blue: 0.2), lineWidth: 10) .offset(x: -20, y: -20)
我希望您了解如何使用 SwiftUI 创建分段饼图。 如果您有任何疑问或建议，请告诉我。
更多APP/小程序/网站源码资源，请搜索"七爪网源码交易平台"！
原文地址：https://m.toutiao.com/i7109840289531085316/ 如何在饼图中分割段？ ZStack：如何创建饼图中分割段？
页:
[1]