Drawing rectangles using the CGPoint coordinate system - SWIFT

Question

I am able to draw a rectangle using the code below (works). However, I am using the Vison framework to detect rectangles but it is giving me back CGPoint values that is less than 1.0. When I enter these coordinates to draw a rectangle I get nothing back. Please can some advise?

Works - i get a rectangle

    let rectangle = UIBezierPath.init()

    rectangle.move(to: CGPoint.init(x: 100, y: 100))
    rectangle.addLine(to: CGPoint.init(x: 200, y: 130))
    rectangle.addLine(to: CGPoint.init(x: 300, y: 400))
    rectangle.addLine(to: CGPoint.init(x: 100, y: 500))

    rectangle.close()

    let rec = CAShapeLayer.init()
    rec.path = rectangle.cgPath
    rec.fillColor = UIColor.red.cgColor
    self.view.layer.addSublayer(rec)

Does not work (no rectangle):

    let rectangle = UIBezierPath.init()

    rectangle.move(to: CGPoint.init(x: 0.154599294066429, y: 0.904223263263702))

    rectangle.addLine(to: CGPoint.init(x: 0.8810795545578, y: 0.970198452472687))
    rectangle.addLine(to: CGPoint.init(x: 0.16680309176445, y: 0.0157230049371719))
    rectangle.addLine(to: CGPoint.init(x: 0.878569722175598, y: 0.128135353326797))

    rectangle.close()

    let rec = CAShapeLayer.init()
    rec.path = rectangle.cgPath
    rec.fillColor = UIColor.red.cgColor
    self.view.layer.addSublayer(rec)

How big is that second rect supposed to be? – Fogmeister May 15 '18 at 08:04 — Fogmeister, May 15 '18 at 08:04

score 1 · Answer 1 · answered May 15 '18 at 07:57

Let's just analyse what it is you've got here. In the first example, you're drawing a rectangle of size of roughly 200px by 400px, ish... Of course, this will display exactly as you expect it to.

In the second example, you're drawing a rectangle of roughly 0.7px by 0.8px, ish. Now think about this logically, how is the screen supposed to represent 0.7 of a pixel? It can't! A pixel is the smallest representation you can have, that is, a single coloured square.

The code doesn't work because of physical constraints of the screen/system. You need to be using size (and position) values greater than 1 to see the rectangle. The Vision framework is no different, it will only see what you can see, if that makes sense.

score 1 · Accepted Answer · answered May 15 '18 at 08:04

The points returned by the Vision framework are coordinates represented by a percentage from the full size of the viewport. If your viewport is 640 x 480 (for example) then your first point is CGPoint(x: 0.154599294066429 * 640, y: 0.904223263263702 * 480). Taking that into account change your code to something like this and it should be fine:

let rectangle = UIBezierPath.init()
let width = // your width - Maybe UIScreen.main.bounds.size.width ?
let height = // your height - Maybe UIScreen.main.bounds.size.height ?

rectangle.move(to: CGPoint.init(x: width  * 0.154599294066429, y: height * 0.904223263263702))

rectangle.addLine(to: CGPoint.init(x: width * 0.8810795545578, y: height * 0.970198452472687))
rectangle.addLine(to: CGPoint.init(x: width * 0.16680309176445, y: height * 0.0157230049371719))
rectangle.addLine(to: CGPoint.init(x: width * 0.878569722175598, y: height * 0.128135353326797))

rectangle.close()

let rec = CAShapeLayer.init()
rec.path = rectangle.cgPath
rec.fillColor = UIColor.red.cgColor
self.view.layer.addSublayer(rec)

Drawing rectangles using the CGPoint coordinate system - SWIFT

2 Answers2