How to add multiple bezier paths into same view swift 3

Question

I have added a triangle in this way

// draw the line graph

    UIColor.white.setFill()
    UIColor.white.setStroke()

    ///--------SETUP FIRST TRIANGLE-----------------------------------------------
    //set up the points line
    let graphPath = UIBezierPath()
    //go to start of line
    graphPath.move(to: CGPoint.init(x: rect.minX, y: rect.minY))
    graphPath.addLine(to: CGPoint.init(x: (rect.maxX/2.0), y: (rect.maxY/2.0)))
    graphPath.addLine(to: CGPoint.init(x: rect.minX, y: rect.maxY))
    graphPath.stroke()
    //2 - make a copy of the path
    let clippingPath = graphPath.copy() as! UIBezierPath

    //3 - add lines to the copied path to complete the clip area
    clippingPath.addLine(to: CGPoint.init(x: rect.minX, y: rect.minY))
    clippingPath.close()

    //4 - add the clipping path to the context
    clippingPath.addClip()

    let startPoint = CGPoint(x:(rect.maxX/2.0), y: (rect.maxY/2.0))
    let endPoint = CGPoint(x:rect.minX, y:(rect.maxY/2.0))
    let gradient=self.getGradient(tiangleNo: 1)
    let context = UIGraphicsGetCurrentContext()
    context!.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: 0))

This is drawing a triangle that I wanted. Now I want to draw another triangle. So I did like this.

///------------SECOND TRIANGLE -----------------------------------------------


    let graphPath2 = UIBezierPath()

    graphPath2.move(to: CGPoint.init(x: rect.minX, y: rect.minY))
    graphPath2.addLine(to: CGPoint.init(x: rect.maxX, y: rect.minY))
    graphPath2.addLine(to: CGPoint.init(x: (rect.maxX/2.0), y: (rect.minY/2.0)))
    graphPath2.stroke()

    let oldPath1=clippingPath.copy() as! UIBezierPath
    oldPath1.append(graphPath2)

    let startPoint2 = CGPoint(x:(rect.maxX/2.0), y: (rect.maxY/2.0))
    let endPoint2 = CGPoint(x:(rect.maxX/2.0), y:rect.minY)
    let gradient2=self.getGradient(tiangleNo: 2)
    let context2 = UIGraphicsGetCurrentContext()
    context2!.drawLinearGradient(gradient2, start: startPoint2, end: endPoint2, options: CGGradientDrawingOptions(rawValue: 0))

But this just adding a triangle inside the previous one.rectis the my UIScreen rectangle

hope this helps: https://stackoverflow.com/questions/21776253/triangular-uiview-or-uiimageview — Tejas Ardeshna, Jun 02 '17 at 11:37

Thilina Chamath Hewagama · Accepted Answer · 2017-06-02T11:50:12.303

Simple Solution

You can write a function like this

func drawTriangle(point1:CGPoint, point2:CGPoint, point3:CGPoint) {

    let path = UIBezierPath()
    path.move(to: point1)
    path.addLine(to: point2)
    path.addLine(to: point3)
    path.close()

    path.lineWidth = 2.0
    UIColor.red.setFill()
    path.fill()

}

Draw triagles by calling the function

//Triagle 1

let pointA = CGPoint(x: 0, y: 0)
let pointB = CGPoint(x: 100, y: 0)
let pointC = CGPoint(x: 0, y: 100)

drawTriangle(point1: pointA, point2: pointB, point3: pointC)

//Triagle 2

let pointD = CGPoint(x: 120, y: 0)
let pointE = CGPoint(x: 220, y: 0)
let pointF = CGPoint(x: 220, y: 100)

drawTriangle(point1: pointD, point2: pointE, point3: pointF)

You will get something like this,

Thanks, But how to add gradient color for this path? I set let context = UIGraphicsGetCurrentContext() context!.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: 0)) then it makes whole area in that color — Randi, Jun 02 '17 at 12:50

How to add multiple bezier paths into same view swift 3

1 Answers1

Simple Solution

Draw triagles by calling the function

You will get something like this,