使用UIBezierPath在Swift中创建三角形

Question

我正在尝试理解如何使用Swift创建三角形形状。我找到了这段代码可以创建一个三角形。

class TriangleLayer: CAShapeLayer {

  let innerPadding: CGFloat = 30.0  

  override init() {
    super.init()
    fillColor = Colors.red.CGColor
    strokeColor = Colors.red.CGColor
    lineWidth = 7.0
    lineCap = kCALineCapRound
    lineJoin = kCALineJoinRound
    path = trianglePathSmall.CGPath
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  var trianglePathSmall: UIBezierPath {
     let trianglePath = UIBezierPath()
     trianglePath.moveToPoint(CGPoint(x: 5.0 + innerPadding, y: 95.0))     // #1
     trianglePath.addLineToPoint(CGPoint(x: 50.0, y: 12.5 + innerPadding)) // #2
     trianglePath.addLineToPoint(CGPoint(x: 95.0 - innerPadding, y: 95.0)) // #3
     trianglePath.closePath()
     return trianglePath
 }

这段代码创建了一个形状，就像这样出现在屏幕中央。

我试着调整和玩弄它来理解它的工作原理；然而，到了这个时候，我意识到我有点迷失了逻辑。我在脑海中将上面三角形的CGPoint放在了一个x-y坐标系上，它看起来像是：

 #1 x:35, y:95          #3 x:65, y:95
           #2 x:50, y: 42.5 

但如果我将这些点放在x-y轴上，三角形就会倒过来。

我想要实现的是轴所表达的意思，而我想要实现...

         .   .                                .
                 <like this.   not this> 
           .                                .   .

---

- senty

---

这是苹果关于二维绘图的文档。 - undefined

0,0在左上角，所以Y轴向下递增。 - undefined

https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html - undefined

Answer 1

你只是将坐标轴颠倒了。坐标系从0,0开始，在X轴向右延伸，在Y轴向下延伸。

所以你的点实际上是：

           #2 x:50, y: 42.5 
 #1 x:35, y:95          #3 x:65, y:95

要获得您想要的三角形，您需要像这样：

 #1 x:35, y:95          #3 x:65, y:95
           #2 x:50, y: 147.5 

- Wain

Answer 2

结果三角形

代码在swift5中

//TriangleView

extension UIView {

    func setRightTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width //you can use triangleView.frame.size.height
        let path = CGMutablePath()

        path.move(to: CGPoint(x: heightWidth/2, y: 0))
        path.addLine(to: CGPoint(x:heightWidth, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth/2, y:heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setLeftTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: heightWidth/2, y: 0))
        path.addLine(to: CGPoint(x:0, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth/2, y:heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setUpTriangle(targetView:UIView?){
     let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: 0, y: heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth, y:heightWidth))
        path.addLine(to: CGPoint(x:0, y:heightWidth))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setDownTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x:heightWidth/2, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth, y:0))
        path.addLine(to: CGPoint(x:0, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }
}

- Akshay Khadke

Answer 3

Swift 4.*

最简单的方法是使用AutoLayout：

1. 打开你的Storyboard，拖动一个UIView到UIViewController中，将其定位并设置大小（这就是三角形所在的位置）。将视图背景设置为透明。
2. 创建一个新的类，可以随意命名（我命名为TriangleView）。这将是该类的内容：

class TriangleView: UIView {

//    predefined variables that can be changed
    var startPoint: CGPoint = CGPoint(x: 0.0, y: 0.5)
    var endPoint: CGPoint = CGPoint(x: 1.0, y: 0.5)
    var firstGradientColor: UIColor = UIColor.white
    var secondGradientColor: UIColor = UIColor.blue

    let gradient: CAGradientLayer = CAGradientLayer()

    override func draw(_ rect: CGRect) {
        let height = self.layer.frame.size.height
        let width = self.layer.frame.size.width

//        draw the triangle 
        let path = UIBezierPath()
        path.move(to: CGPoint(x: width / 2, y: 0))
        path.addLine(to: CGPoint(x: width, y: height))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.close()

//        draw the triangle 'upside down'
//        let path = UIBezierPath()
//        path.move(to: CGPoint(x: 0, y: 0))
//        path.addLine(to: CGPoint(x: width, y: 0))
//        path.addLine(to: CGPoint(x: width / 2, y: height))
//        path.close()

//        add path to layer
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.lineWidth = 1.0

//        Add the gradient for the view background if needed
        gradient.colors = [firstGradientColor.cgColor, secondGradiendColor.cgColor]
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.frame = self.bounds
        gradient.mask = shapeLayer

        self.layer.addSublayer(gradient)
    }
}

3. 打开你的Storyboard，选择UIView，在Identity Inspector中写入类名TriangleView

4. 享受你的三角形！ :)

- Đorđe Nilović