Как нарисовать два пути дуги без соединительной линии?

Question

Я использую CGMutablePath, чтобы нарисовать логотип Wi-Fi. Когда я рисую вторую дугу с помощью 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

Да, Эль Томато сказал тебе, что тебе нужно делать. Поскольку addArc(center:radius:startAngle:endAngle:clockwise:transform:) рисует линию от последней точки вашего пути к началу дуги, вам нужно использовать move(to:transform:), чтобы сначала перейти к начальной точке новой дуги, прежде чем добавить ее.

Было бы неплохо, если бы addArc(center:radius:startAngle:endAngle:clockwise:transform:) взял флаг, который контролировал, будет ли он проводить линию к своей начальной точке или нет, но это не так.

Вычисление начальной точки потребует небольшой триггера.

Answer 2

Если вы хотите нарисовать дугу без линии от предыдущей точки, вам нужно переместить путь к началу дуги - используя 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)

В результате получается такая форма:

Answer 3

Просто используйте move(to:transform:) перед добавлением второй дуги. Подробнее здесь .