[Swift 5] Draw a line.

Misa Nan Hello, this is @Zhalen.

In this article, of this image,

I will introduce a method that draws a straight line at any place like this.

Usage: How to use

In conclusion, it can be used in this way.

UIViewController-viewDidLoad

<UIView>.drawLine(start: <CGPoint>, end: <CGPoint>, color: <UIcolor>, weight: <CGFloat>, rounded: <Bool>)

Let's create a custom class first

To draw a line, create a generic custom class called BezierView and reuse it.

class BezierView: UIView {
    
    var start: CGPoint = .zero
    var end: CGPoint = .zero
    var weight: CGFloat = 2.0
    var color: UIColor = .gray
    var isRounded: Bool = true
 
    override init(frame: CGRect) {
        super.init(frame: frame);
        self.backgroundColor = UIColor.clear;
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        
        let line = UIBezierPath()
        line.move(to: start)
        line.addLine(to: end)
        line.close()
        color.setStroke()
        line.lineWidth = weight
        line.lineCapStyle = isRounded ? .round : .square
        line.stroke()
        self.isUserInteractionEnabled = false
    }
 
}

here

    var start: CGPoint = .zero
    var end: CGPoint = .zero
    var weight: CGFloat = 2.0
    var color: UIColor = .gray
    var isRounded: Bool = true

There is, but this is the default value, each

    var start: CGPoint = //Line starting point
    var end: CGPoint = //Line end point
    var weight: CGFloat = //Line thickness
    var color: UIColor = //Line color
    var isRounded: Bool = //Whether to round the corners

Represents. Use this information to create an extension.

Here is the extension.

extension UIView {
    func drawLine(start: CGPoint, end: CGPoint, color: UIColor, weight: CGFloat, rounded: Bool) {
        let line: BezierView = BezierView(frame: CGRect(x: 0, y: 0, width: max(start.x , end.x)+weight, height: max(start.y, end.y)+weight))
        line.start = start
        line.end = end
        line.color = color
        line.weight = weight
        line.isRounded = rounded
        self.addSubview(line)
    }
}

I've defined a simple extension here, but if you want to define it more generally, use multiple points.

extension UIView {
    func drawLine(points: [CGPoint], color: UIColor, weight: CGFloat, rounded: Bool) {
        guard points.count >= 2 else { fatalError("Line is not drawable because points are less than 2") }
        for i in 0..<points.count-1 {
            self.drawLine(start: points[i], end: points[i+1], color: color, weight: weight, rounded: rounded)
        }
    }
}

It is also possible to do like. Actually, the polygonal line in the above image uses this one with `points`. There is no loss in writing, so let's write this as well just in case.

The full code for copy and paste.

class BezierView: UIView {

    var start: CGPoint = .zero
    var end: CGPoint = .zero
    var weight: CGFloat = 2.0
    var color: UIColor = .gray
    var isRounded: Bool = true

    override init(frame: CGRect) {
        super.init(frame: frame);
        self.backgroundColor = UIColor.clear;
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {

        let line = UIBezierPath()
        line.move(to: start)
        line.addLine(to: end)
        line.close()
        color.setStroke()
        line.lineWidth = weight
        line.lineCapStyle = isRounded ? .round : .square
        line.stroke()
        self.isUserInteractionEnabled = false
    }

}
extension UIView {
    func drawLine(start: CGPoint, end: CGPoint, color: UIColor, weight: CGFloat, rounded: Bool) {
        let line: BezierView = BezierView(frame: CGRect(x: 0, y: 0, width: max(start.x , end.x)+weight, height: max(start.y, end.y)+weight))
        line.start = start
        line.end = end
        line.color = color
        line.weight = weight
        line.isRounded = rounded
        self.addSubview(line)
    }
    func drawLine(points: [CGPoint], color: UIColor, weight: CGFloat, rounded: Bool) {
        guard points.count >= 2 else { fatalError("Line is not drawable because points are less than 2") }
        for i in 0..<points.count-1 {
            self.drawLine(start: points[i], end: points[i+1], color: color, weight: weight, rounded: rounded)
        }
    }
}

It's a promotion

Just the other day, we released a questionnaire-specific SNS " Vote. "!

This app is useful not only when you are at a loss or worried about your choice, but also in practical aspects such as corporate A/B testing and test marketing! The design is very sophisticated, and anyone can easily take questionnaires and votes.

Click here to install: https://apps.apple.com/us/app/vote/id1542436046