How to draw a line from one point to the next point in Swift

Question

I would like to know how to draw a line from one point to another where the user touch the first point and the next point he touches, it create a line in between. I know that using UIBezierPath will be useful in here but I am still new to Swift and iOS platform so any guidance will helpful.

I have created a function called drawLineFromPoint but does not work for me.

import UIKit
import GLKit
class ViewController: GLKViewController {
private var context: EAGLContext?

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    EAGLcontext()
    // Gesture Code
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first{

        let position = touch.location(in: view)
        var dot = UIView(frame: CGRect(x: position.x, y: position.y, width: 10, height: 10))
        dot.backgroundColor = .red
        view.addSubview(dot)
        // View the x and y coordinates
        print(position)

    }
}

//Not sure how to do this part ???
func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

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

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.green.cgColor
    shapeLayer.lineWidth = 1.0

    view.layer.addSublayer(shapeLayer)
}

//Create EAGL Context for the GLKView
private func EAGLcontext() {

    context = EAGLContext(api: .openGLES2)

    EAGLContext.setCurrent(context)

    if let view = self.view as? GLKView, let context = context {

        view.context = context
        delegate = self
    }
}

override func glkView(_ view: GLKView, drawIn rect: CGRect) {
    //Set the color
    glClearColor(0.85, 0.85, 0.85, 1.0)

    glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
    }
}


extension ViewController: GLKViewControllerDelegate {
func glkViewControllerUpdate(_ controller: GLKViewController) {     
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
    }   
}

Possible duplicat of https://stackoverflow.com/questions/31569051/how-to-draw-a-line-in-the-simplest-way-in-swifte — Titouan, Aug 28 '19 at 08:23

Vasilis D. · Accepted Answer · 2019-08-28T12:30:46.027

0

Based On your code I changed some things and this code Works please check.

    class ViewController: UIViewController {


        var lastPosition: CGPoint?
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view.
            // Gesture Code
        }

        override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
            if let touch = touches.first{

                let position = touch.location(in: view)
            if let lastPosition = self.lastPosition {
                self.drawLineFromPoint(start: lastPosition, toPoint: position, ofColor: UIColor.red, inView: self.view)
            }
                self.lastPosition = position
                // View the x and y coordinates
                let dot = UIView(frame: CGRect(x: position.x, y: position.y, width: 10, height: 10))
                dot.backgroundColor = .red
                view.addSubview(dot)
                print(position)

            }
        }

        override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
            if let touch = touches.first, let lastPosition = self.lastPosition{

                let position = touch.location(in: view)
                self.drawLineFromPoint(start: lastPosition, toPoint: position, ofColor: UIColor.red, inView: self.view)
                self.lastPosition = position
                let dot = UIView(frame: CGRect(x: position.x, y: position.y, width: 10, height: 10))
                dot.backgroundColor = .red
                view.addSubview(dot)
            }
        }

        //Not sure how to do this part ???
        func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {

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

            let shapeLayer = CAShapeLayer()
            shapeLayer.path = path.cgPath
            shapeLayer.strokeColor = UIColor.green.cgColor
            shapeLayer.lineWidth = 1.0

            view.layer.addSublayer(shapeLayer)
        }

    }

edited Aug 28 '19 at 12:30

answered Aug 28 '19 at 08:25

Vasilis D.

1,416
13
21

Hi, thank you for your help. It can draw a green line but when I touch on the screen it does not create a red dot. The green line draws when I start to drag. – Roshan Dx Aug 28 '19 at 08:39
I did add back the var dot but if you touch a point and drag it to a location, it does not create the second point and the green line appear if you drag around the screen. – Roshan Dx Aug 28 '19 at 08:52
Yupe it did but how to make it automatically create a line from a point to a point instead of dragging it. Should i call the drawLineFromPoint in the touchesEnded so when the user click the next point, it form a straight line from the previous point ? – Roshan Dx Aug 28 '19 at 09:11
aaa Now I got it just a moment ' – Vasilis D. Aug 28 '19 at 09:11
Ready, please check – Vasilis D. Aug 28 '19 at 09:13
It works but only if you touch at a point and drag to another point then it creates a red dot and a green line in between. Is it possible to touch on the screen to create a red dot and the second touch will create another red dot with the green line connection to the first red dot ? The whole idea is for the user to touch and create the dots and it connects with each other without user dragging around/ – Roshan Dx Aug 28 '19 at 09:24
Sorry to say but I did try some coding before I ask a question and would like a guidance for my problem @trojanfoe – Roshan Dx Aug 28 '19 at 10:02
So to understand the problem you want to continue the green line to all the dots?? – Vasilis D. Aug 28 '19 at 11:03
Yes, so each time a dot is created a line connects the dots. – Roshan Dx Aug 28 '19 at 11:34
Ok I added three more lines in touchesBegan function. This does that. Let me know if this is what you want – Vasilis D. Aug 28 '19 at 12:31

How to draw a line from one point to the next point in Swift

1 Answers1