七爪源码：使用 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：如何创建饼图中分割段？