Swift中使用UIBezierPath和CAShapeLayer绘制内凹曲边三角形的代码修改问询

背景 #

我现有一段简单代码，使用UIBezierPath和CAShapeLayer绘制了三条边均为直线的三角形，运行效果见示意图A。
我现在需要将该三角形的最长边修改为向内凹陷的曲线，预期效果见示意图B。

问题 #

需要对下方代码做出哪些修改才能实现三角形最长边内凹的效果？要如何为路径设置曲线属性？

现有代码 #

func drawShape() {
    
    let path1 = UIBezierPath()
    path1.move(to: CGPoint(x: 50, y: 600))
    path1.addLine(to: CGPoint(x: 300, y: 600))
    path1.addLine(to: CGPoint(x: 300, y: 50))
    path1.close()
    
    let shape1 = CAShapeLayer()
    shape1.path = path1.cgPath
    shape1.fillColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1).cgColor
    
    view.layer.insertSublayer(shape1, at: 1)

}

效果示意图 #

你只需将最长边的直线绘制逻辑替换为二次贝塞尔曲线绘制即可，具体修改如下：
原有代码中path1.addLine(to: CGPoint(x: 300, y: 600))是绘制底部最长边的直线段，把这行替换为addQuadCurve(to:controlPoint:)方法调用，控制点设置在两个端点中点偏上的位置即可实现向内凹陷的效果。

修改后的完整代码：

func drawShape() {
    
    let path1 = UIBezierPath()
    path1.move(to: CGPoint(x: 50, y: 600))
    // 替换原直线绘制，用二次贝塞尔曲线实现内凹效果
    path1.addQuadCurve(to: CGPoint(x: 300, y: 600), controlPoint: CGPoint(x: 175, y: 550))
    path1.addLine(to: CGPoint(x: 300, y: 50))
    path1.close()
    
    let shape1 = CAShapeLayer()
    shape1.path = path1.cgPath
    shape1.fillColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1).cgColor
    
    view.layer.insertSublayer(shape1, at: 1)
}

参数说明 #

• 上述代码中的controlPoint是控制曲线弧度的控制点，示例中取的是两个端点x坐标的中点（(50+300)/2=175），y坐标设置为550，相比原直线的y值600更靠上，所以曲线会向内凹陷。
• 你可以自行调整控制点的y值修改凹陷程度：y值越小，凹陷越深；y值越接近600，凹陷越浅。如果需要更复杂的曲线效果，也可以使用addCurve(to:controlPoint1:controlPoint2:)方法设置两个控制点自定义曲率。

内容的提问来源于stack exchange，提问作者user4806509