如何绘制两条没有连接线的圆弧路径？答案

【问题标题】：How to draw two arc path without connect line?如何绘制两条没有连接线的圆弧路径？
【发布时间】：2018-06-26 10:16:56
【问题描述】：

我正在使用CGMutablePath 绘制一个 wifi 标志。当我通过addArc(center:radius:startAngle:endAngle:clockwise:transform:)绘制第二条弧线时，它会自动画一条线，就像If the path already contains a subpath, this method adds a line connecting the current point to the starting point of the arc.指定的文档一样。没有这条线我怎么画？谢谢

【问题讨论】：

移动点。
@ElTomato 所以我必须计算下一个弧路径的起点并移动到下一个点？
我不太清楚，因为你没有显示一行代码。但不只是移动圆心的问题吗？另外，我并不是真正的 iOS 用户。

标签： swift core-graphics cgpath

【解决方案1】：

如果您想从前一点绘制一条没有直线的圆弧，您需要在添加圆弧之前使用move(to:) 将路径移动到圆弧的起点。弧的起点可以计算为：

center.x + radius * cos(startAngle)
center.y + radius * sin(startAngle)

您可以利用 CGPath 的功能来创建笔触副本，而不是自己计算点来创建每个弧的轮廓。这样做，您只需要为图标的每个“条”创建一条弧线的基本路径：

let basePath = CGMutablePath()

let center     = CGPoint.zero
let startAngle = CGFloat.pi * 0.75 // 135 degrees
let endAngle   = CGFloat.pi * 0.25 //  45 degrees

let radii: [CGFloat] = [10, 20, 30, 40]

for radius in radii {
    // Move to the start point of the arc
    basePath.move(to: CGPoint(x: center.x + radius * cos(startAngle),
                              y: center.y + radius * sin(startAngle)))
    // Add the arc, starting at that same point
    basePath.addArc(center: center, radius: radius,
                    startAngle: startAngle, endAngle: endAngle,
                    clockwise: true)
}

这将创建一个像这样的基本形状，没有任何厚度：

接下来，您通过抚摸创建基本路径的副本。在这里您可以配置图标条的粗细和末端的样式（方形或圆形）：

let stroked = basePath.copy(strokingWithWidth: 5, // The width/thickness of each stroked arc
                            lineCap: .square,     // Make square corners for the ends of each arc
                            lineJoin: .miter, miterLimit: 0)

形成这样的形状：

【讨论】：

优秀的答案。（已投票。）你是为这个问题写的代码，还是手头有它？
我注意到的一件事是，您的示例代码被编写为假设所有弧的中心点是 CGPoint.zero。将其编写为使用任意中心点不是更有用吗？
我修改了一些我手头的 Bezier 路径代码，并在那个 Playground 中截取了 UIBezierPath 预览的屏幕截图。

【解决方案2】：

是的，El Tomato 告诉了你需要做什么。由于addArc(center:radius:startAngle:endAngle:clockwise:transform:) 会从路径中的最后一点到弧的起点绘制一条线，因此您需要先使用move(to:transform:) 移动到新弧的起点，然后再添加它。

如果addArc(center:radius:startAngle:endAngle:clockwise:transform:) 带有一个标志来控制它是否画一条线到它的起点，那就太好了，但它似乎没有。

计算起点会涉及到一点触发。

【讨论】：

【解决方案3】：

在添加第二个弧之前使用move(to:transform:)。查看更多详情here。

【讨论】：