Рисование слоя Shape с использованием Coregraphics - iOS

Question

Я пытаюсь получить следующую форму, используя coregraphics.

Я могу создать закругленный прямоугольник

func createRoundedRect() {
          let path = UIBezierPath(roundedRect: self.bounds, cornerRadius: 15.0)

            // Specify the point that the path should start get drawn.
           path.move(to: CGPoint(x: 0.0, y: 0.0))

           // Create a line between the starting point and the bottom-left side of the view.
           path.addLine(to: CGPoint(x: 0.0, y: self.frame.size.height))

           // Create the bottom line (bottom-left to bottom-right).
           path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))

           // Create the vertical line from the bottom-right to the top-right side.
           path.addLine(to: CGPoint(x: self.frame.size.width, y: 0.0))

           // Close the path. This will create the last line automatically.
           path.close()
    }

Но я не уверен, как сделать вид выше форма. Любая помощь или идея приветствуется.

Answer 1

Вы визуализируете это только двумя дугами, одна для верхней части и одна для нижней. Просто используйте жирный lineWidth и установите strokeColor равным fillColor для достижения желаемого радиуса угла.

Например:

@IBDesignable
class TvView: UIView {
    override class var layerClass: AnyClass { CAShapeLayer.self }
    var shapeLayer: CAShapeLayer { return layer as! CAShapeLayer}

    @IBInspectable var curveHeight:  CGFloat = 10 { didSet { setNeedsLayout() } }
    @IBInspectable var cornerRadius: CGFloat = 10 { didSet { setNeedsLayout() } }

    override func layoutSubviews() {
        super.layoutSubviews()
        shapeLayer.fillColor = UIColor.red.cgColor
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.path = path()?.cgPath
        shapeLayer.lineWidth = cornerRadius * 2
        shapeLayer.lineJoin = .round
    }

    func path() -> UIBezierPath? {
        let rect = bounds.insetBy(dx: cornerRadius, dy: cornerRadius)

        guard
            rect.height > 2 * curveHeight,
            rect.width > 0,
            curveHeight > 0
        else {
            return nil
        }

        let angle: CGFloat = 2 * (atan2(curveHeight, rect.width / 2))
        let radius = rect.width / 2 / sin(angle)
        let path = UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.minY + radius), radius: radius, startAngle: .pi * 3 / 2 - angle, endAngle: .pi * 3 / 2 + angle, clockwise: true)
        path.addArc(withCenter: CGPoint(x: rect.midX, y: rect.maxY - radius), radius: radius, startAngle: .pi / 2 - angle, endAngle: .pi / 2 + angle, clockwise: true)
        path.close()
        return path
    }
}

Используя тот же цвет обводки и заливки, который дает:

Или, чтобы вы могли видеть, что происходит, здесь это с обводкой, отображаемой в другом цвет: