如何在没有连接线的情况下绘制两条圆弧路径？

Question

我正在使用CGMutablePath绘制 wifi 徽标。当我绘制第二条弧 by 时 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.。没有这条线我怎么画？谢谢

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

形成这样的形状：