1

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

Chris R.
  • 415
  • 2
  • 5
  • 15
  • It's not clear what you are asking. Are you trying to deal with the parallax distortion you get when the phone is not perfectly parallel to the plane of the QR code you are scanning? (Sometimes called a "keystone" effect.) Do you want to draw 4 lines around the QR code that have the same perspective distortion that the QR code has, or do you want to transform the image of the QR code to make it look square again? – Duncan C Mar 25 '16 at 14:17
  • I just updated my question to make it more clear. Thanks for your help in advance! – Chris R. Mar 25 '16 at 14:25
  • Are the corner's `CGPoint`s? – Moshe Mar 25 '16 at 14:28
  • Yes, it's an array of `CGPoint`'s – Chris R. Mar 25 '16 at 14:29

4 Answers4

1

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

Thanks everybody for helping!

Chris R.
  • 415
  • 2
  • 5
  • 15
0

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.

Community
  • 1
  • 1
Moshe
  • 57,511
  • 78
  • 272
  • 425
  • It's "easy" to "photoshop-distort" or "four-corner skew" or "perspective skew" a rectangle in iOS .. the two key QA are this one http://stackoverflow.com/a/2352402/294884 and this one http://stackoverflow.com/questions/9470493/transforming-a-rectangle-image-into-a-quadrilateral-using-a-catransform3d/12820877#12820877 Hope it helps! – Fattie May 21 '16 at 13:36
0

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.

Duncan C
  • 128,072
  • 22
  • 173
  • 272
0

CATransform3DRotate could be your friend, here.

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

Joshua Kaden
  • 1,210
  • 11
  • 16