[使用Coregraphics绘制图形图层-iOS

Question

我正在尝试使用核心图形实现以下形状。

我能够创建一个四舍五入的矩形

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
    }
}

将相同的颜色用于笔触和填充，将产生：

或者，所以您可以看到发生了什么，这就是笔触以不同的颜色呈现的情况：