在 Swift 中使用 UIBezierPath 和 CAShapeLayer 绘制具有弯曲边和直边的三角形答案

【问题标题】：Draw Triangle With Curved Side And Straight Sides Using UIBezierPath and CAShapeLayer In Swift在 Swift 中使用 UIBezierPath 和 CAShapeLayer 绘制具有弯曲边和直边的三角形
【发布时间】：2021-08-29 20:17:22
【问题描述】：

背景

我有一些使用 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)

}

图片

【问题讨论】：

最简单的方法是将最长边的addLine(to:) 替换为addCurve(to:controlPoint:)（即二次贝塞尔曲线），其中“到”点不变，但“控制点”是三角形内的某个点。您在三角形内为该控制点选择的点将决定贝塞尔曲线的形状。通过选择两个端点之间等距的控制点，我会偏向对称曲线，但是您的曲线看起来并不对称。
谢谢罗伯。我有代码path1.addQuadCurve(to: CGPoint(x: 50, y: 600), controlPoint: CGPoint(x: (300-50), y: (600*0.5)))，它似乎以预期的方式工作。将进一步试验。

标签： ios swift optimization uibezierpath cashapelayer

【解决方案1】：

我在关闭路径之前添加了addQuadCurve。它给出了预期的结果。

代码

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.addQuadCurve(to: CGPoint(x: 50, y: 600), controlPoint: CGPoint(x: (300-50), y: (600*0.5)))
    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)

}

图片

【讨论】：

您能否将结果图片添加到您的答案中？
当然可以。图片已添加。与模拟版几乎相同。
看起来你成功了。（已投票）