交易所app安装到桌面上,交易所app源码

2022-08-01 22:32:27 新股聚焦

　　充分利用这条路。　　

　　在这篇文章的结尾，你会知道：　　

　　如何使用路径，如何添加弧线，如何创建饼图，如何在饼图中划分线段　　

　　开始吧 　　

　　我们先画出我们的吃豆人。开个玩笑，我们先试着为我们的饼图画一个简单的弧线。　　

　　为了画一个简单的弧线，我们将使用Path并编写以下代码：　　

　　path { path in path . move(to : start point)path . add arc(center : start point，radius: 90，startAngle:度(270度)，Endangle:degrees (0度)，顺时针3360 true)}。Fill (color.gray)要画圆弧，首先要为我们的绘制路径设置一个起点。　　

　　我们通过移动来设置绘制路径的起点。　　

　　接下来，我们将从这个起点画一条弧。为此，我们将在这里使用addArc。可以看到addArc接受了一些参数。　　

　　中心-指定用于定义圆弧的圆的中心点(在当前坐标系中)半径-指定用于定义圆弧起始角度的圆的半径-指定圆弧的起始角度(以弧度为单位)endAngle-指定圆弧的终止角度(以弧度为单位)顺时针-绘制圆弧的方向输入上面的代码后，我们可以看到类似下面的东西。　　

　　填充其他细分 　　

　　现在您已经知道如何使用addArc，您可以轻松地创建包含不同段的饼图。　　

　　要得到一个包含不同线段的饼图，我们需要的是覆盖每个新的弧线或保持每个线段在另一个之上。使用ZStack可以很容易做到这一点。　　

　　我们只需要创建一些具有不同开始和结束角度的圆弧。为了适应这种变化，我们将添加更多的圆弧，并将初始圆弧的起始角度稍微修改为150度，而不是仅仅270度来吸引人。　　

　　在添加了3个新路径并修改了初始路径后，我们的代码将如下所示。　　

　　z stack { Path { Path in Path . move(to : start point)Path . add arc(center : start point，radius: 90，startAngle:度(150)，端角：度(0)，clockwise: true) }。fill(color . gray)Path { Path in Path . move(to : start point)Path . add arc(center : start point，radius: 90，startAngle:度(270)，端角：度(150)，clockwise: true) }。填充(color . red)Path { Path in Path . move(to : start point)Path . add arc(center : start point，radius: 90，startAngle:度(290)，端角：度(270)，clockwise: true) }。填充(color . orange)Path { Path in Path . move(to : start point)Path . add arc(center : start point，radius: 90，startAngle:度(360)，端角：度(290)，clockwise: true) }。fill(color . yellow)} 　　

　　突出显示细分 　　

　　为了从饼图中突出显示特定的段或者移动/隔离特定的段，我们需要对该特定的段应用偏移修改器。　　

　　作为曼联球迷，我会把红色部分从饼状图中隔离出来。为此，我将为红色的路径设置一个负的偏移值。　　

　　路径{ p 　　

ath 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)