CODEWITHSUNDEEP
iosswiftuibezierpath
William Falcon
William Falcon

Reputation: 9823

Draw a line with UIBezierPath

First time using BezierPaths, wondering how this function is actually supposed to be implemented. Currently the bezier path moves within the frame of the image, as opposed to drawing on screen.

Is there a better way to do it? 

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

    var maxWidth = abs(start.x - end.x)
    var maxHeight = abs(start.y - end.y)

    var contextSize : CGSize!
    if maxWidth == 0 {
        contextSize = CGSize(width: 1, height: maxHeight)
    }else {
        contextSize = CGSize(width: maxWidth, height: 1)
    }

    //design the path
    UIGraphicsBeginImageContextWithOptions(contextSize, false, 0)
    var path = UIBezierPath()
    path.lineWidth = 1.0
    lineColor.set()

    //draw the path and make visible
    path.moveToPoint(start)
    path.addLineToPoint(end)
    path.stroke()

    //create image from path and add to subview
    var image = UIGraphicsGetImageFromCurrentImageContext()
    var imageView = UIImageView(image: image)
    view.addSubview(imageView)
    UIGraphicsEndImageContext()
}

Upvotes: 42

Views: 41908

Answers (4)

William Falcon
William Falcon

Reputation: 9823

Ended up doing it this way:

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {
    
    //design the path
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)
    
    //design path in layer
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = lineColor.CGColor
    shapeLayer.lineWidth = 1.0
    
    view.layer.addSublayer(shapeLayer)
}

Upvotes: 76

Neha
Neha

Reputation: 742

Swift 4

func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

    //design the path
    let path = UIBezierPath()
    path.move(to: start)
    path.addLine(to: end)

    //design path in layer
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = lineColor.cgColor
    shapeLayer.lineWidth = 1.0

    view.layer.addSublayer(shapeLayer)
}

Upvotes: 9

Jan
Jan

Reputation: 2384

To draw horizontal line on top:

let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: 0))
path.addLineToPoint(CGPoint(x: yourView.frame.width, y: 0))

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.CGPath
shapeLayer.strokeColor = UIColor.lightGrayColor().CGColor
shapeLayer.lineWidth = 0.5

yourView.layer.addSublayer(shapeLayer)

To draw horizontal line on bottom:

let path = UIBezierPath()
path.moveToPoint(CGPoint(x: 0, y: yourView.frame.height))
path.addLineToPoint(CGPoint(x: yourView.frame.width, y: yourView.frame.height))

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.CGPath
shapeLayer.strokeColor = UIColor.lightGrayColor().CGColor
shapeLayer.lineWidth = 0.5

yourView.layer.addSublayer(shapeLayer)

Upvotes: 2

user2640633
user2640633

Reputation:

Swift 3.1 Version of William Falcon's Answer + Improved

This is just an updated version of already accepted answer, and I just added a little bit more to it.

func drawLineFromPointToPoint(startX: Int, toEndingX endX: Int, startingY startY: Int, toEndingY endY: Int, ofColor lineColor: UIColor, widthOfLine lineWidth: CGFloat, inView view: UIView) {

    let path = UIBezierPath()
    path.move(to: CGPoint(x: startX, y: startY))
    path.addLine(to: CGPoint(x: endX, y: endY))

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = lineColor.cgColor
    shapeLayer.lineWidth = lineWidth

    view.layer.addSublayer(shapeLayer)

}

And of course the implementation would be 

drawLineFromPointToPoint(startX: Int, toEndingX: Int, startingY: Int, toEndingY: Int, ofColor: UIColor, widthOfLine: CGFloat, inView: UIView)

What I changed from accepted answer

I changed the vars to lets, and made it easier to input the start and end of both the x and the y. I also allow the user to change the width of the line.

I chose for the values to be of type Int, but you can change those to be the other allowed options.

Upvotes: 10

Related Questions