CODEWITHSUNDEEP
iosswiftuiviewavfoundation
Chris R.
Chris R.

Reputation: 425

Set corners of UIView (iOS)

I have the following problem: I'm scanning a QR Code with AVFoundation. This works quite well and I can also create a border around the code by adding a subview and set the frame attribute by subview.frame = qrCodeObject.bounds. This only has the problem that the border is only a rectangle and dismisses the perspective of the QR code.

I know that the qrCodeObject has a property corners which incorporates the top right, top left, bottom right and bottom left points of the QR code detected.

My question is now: how can I apply those corner points to the "border" view to make this border to have the same perspective as the QR code? Or in other words: how to "transform" the view according to the corner points?

Thanks a lot in advance!

UPDATE: Here you can see the problem: the red box is a UIView, having it's frame property set to the QR codes bounds property. This misses perspective. I would like to transform the UIView (the red box) to following the corners property of the QR code, which includes the top right, top left, bottom right and bottom left points (CGPoint) of the QR code. It is important to apply this to a UIView, because I later want to apply it to an ImageView. Also a mask is not usable, as it just hides part of the view, but does not stretch or transform the content of the view.

QR code and box

Upvotes: 1

Views: 1616

Answers (4)

Chris R.
Chris R.

Reputation: 425

I found a solution: AGGeometryKit did the trick: https://github.com/hfossli/AGGeometryKit/

Thanks everybody for helping!

Upvotes: 1

Joshua Kaden
Joshua Kaden

Reputation: 1230

CATransform3DRotate could be your friend, here.

https://guides.codepath.com/ios/Using-Perspective-Transforms might be a good starting point.

Upvotes: 0

Duncan C
Duncan C

Reputation: 131418

Ok, the problem you are facing is that a CGRect can only represent a rectangle that is not tilted or distorted. What you are dealing with is an image that has different kinds of perspective distortion.

I haven't tried to do this, but it sounds like AVFoundation gives you 4 CGPoint objects for a reason. You need to draw those 4 CGPoints using a UIBezierPath rather than trying to draw a CGRect. Simply create a bezier path that moves to the first point, then draws lines to each subsequent point, and finally, back to the first point. That will give you a quadrilateral that takes into account the distortion of your QR code.

Upvotes: 0

Moshe
Moshe

Reputation: 58087

You can't transform a CGRect that way, as far as I know. (At least I'm unaware of any framework that can do that kind of image processing.)

What you can do is to draw a polygon using the points of the qrCodeObject.

In drawRect of your UIView, change use CGContext and CGPath to draw the path you'd like.

You want your drawing UIView to be the same size as the one showing the QR code so that you don't have to translate the points onto a second coordinate space.

This answer has directions if you need more guidance on how to do that.

Upvotes: 0

Related Questions