Блог

Я создаю круг ниже, используя UIBezierPath. Обратите внимание, что на противоположных сторонах круга есть два разных цвета. Я хотел бы округлить верхнюю и нижнюю части каждого маленького прямоугольника на картинке.

Я хочу, чтобы каждый из прямоугольников (технически это тире) имел закругленную верхнюю и нижнюю части. Вот так:

В настоящее время я использую этот код для создания круга:

 let bounds = self.view.bounds
    let arcCenter = CGPoint(x: bounds.midX, y: bounds.midY)

    let whiteLayer = CAShapeLayer()
    let redLayer = CAShapeLayer()

    whiteLayer.fillColor = UIColor.clear.cgColor
    whiteLayer.strokeColor = UIColor.white.cgColor

    var whiteRing = UIBezierPath(arcCenter: arcCenter, radius: CGFloat(125), startAngle: 0, endAngle: CGFloat.pi, clockwise: false)
    whiteRing.rotateAroundPoint(angle: CGFloat.pi/2, center: arcCenter)
    whiteLayer.lineWidth = 10
    whiteLayer.lineDashPattern = [2, 3]
    whiteLayer.path = whiteRing.cgPath

    redLayer.fillColor = UIColor.clear.cgColor
    redLayer.strokeColor = UIColor.red.cgColor
    var redRing = UIBezierPath(arcCenter: arcCenter, radius: CGFloat(125), startAngle: 0, endAngle: CGFloat.pi, clockwise: true)
    redRing.rotateAroundPoint(angle: CGFloat.pi/2, center: arcCenter)
    redLayer.lineWidth = 10
    redLayer.lineDashPattern = [2, 3]
    redLayer.path = redRing.cgPath
    
    self.view.layer.addSublayer(whiteLayer)
   self.view.layer.addSublayer(redLayer)
  

Честно говоря, я не знаю, возможно ли это с помощью UIBezierPath, я пытался использовать что-то вроде CAReplicatorLayer для достижения этой цели, но, похоже, я не могу понять, как последовательно получать одинаковый интервал между каждой чертой / прямоугольником и двумя отдельными частями круга, чтобы избежать перекрытия белой и красной частей. Сделать это без использования двух разных цветов было бы намного проще, но для моего варианта использования у меня должно быть два разных цвета. Итак, есть ли способ сделать это с помощью UIBezierPath, и если нет, то как бы я использовал CAReplicatorLayer для создания круга на первом изображении с каждой маленькой черточкой / прямоугольником, имеющим закругленный верх и низ?

Вместо того, чтобы прочерчивать круговую траекторию, обведите ряд отрезков, выходящих из центра окружности:

 let center = CGPoint(x: bounds.midX, y: bounds.midY)
let path = UIBezierPath()
let maxRadius = (min(bounds.width, bounds.height) - lineWidth) / 2
let minRadius = maxRadius - tickLength   lineWidth

for i in 0 ..< tickCount {
    let angle = startAngle   (endAngle - startAngle) * CGFloat(i) / CGFloat(tickCount)
    let startPoint = center.point(at: angle, distance: minRadius)
    let endPoint = center.point(at: angle, distance: maxRadius)
    path.move(to: startPoint)
    path.addLine(to: endPoint)
}
  

Который использует этот метод для вычисления начальной и конечной точек всех этих сегментов линии:

 private extension CGPoint {
    func point(at angle: CGFloat, distance: CGFloat) -> CGPoint {
        return CGPoint(x: x   distance * cos(angle), y: y   distance * sin(angle))
    }
}
  

В любом случае, вы можете затем применить ширину линии и округление углов при создании слоя фигуры:

 let shapeLayer = CAShapeLayer()
shapeLayer.lineCap = .round
shapeLayer.lineWidth = lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = ...
shapeLayer.path = path.cgPath
  

Теперь проблема в том, хотите ли вы анимировать изменения в красных / белых штрихах. Если вам нужно это сделать, другой подход заключается в том, чтобы рассмотреть возможность создания галочек в виде маски и анимировать красную обводку под ней. Например.

• Создайте вид с белым фоном.
• Создайте путь Безье для всех отметок.
• Используйте это в слое формы
• Установите маску слоя представления в качестве этого слоя формы.
• Теперь добавьте CAShapeLayer для красного пути и анимируйте его:

Таким образом, вы получите округление углов на ваших отметках, но вы все равно можете выполнять анимацию. И это устраняет любые проблемы, связанные с выстраиванием меток в линию, потому что у вас есть единый путь для всех меток.