6

I am trying to skew a rectangle so the two vertical sides are slanted but parallel and the top and bottom are horizontal.

I am trying to use CGAffineTransform and have found this code but I am not figuring out what to put in the various parts.

imageView.layer.somethingMagic.imageRightTop = (CGPoint){ 230, 30 };
                imageView.layer.somethingMagic.imageRightBottom = (CGPoint){ 300, 150 };

#define CGAffineTransformDistort(t, x, y) (CGAffineTransformConcat(t, CGAffineTransformMake(1, y, x, 1, 0, 0)))
#define CGAffineTransformMakeDistort(x, y) (CGAffineTransformDistort(CGAffineTransformIdentity, x, y))

although this is said to be easy I don't know what to put in the different places.

I assume image view would be my image that I want to change however what goes into somethingMagic. and imageRightTop and imageRightBottom.

Also how do I define t.

If there is a more thorough explanation I would appreciate it since in most cases I found only this as the explanation of what to do to skew a rectangle.

Thanks

Firo
  • 15,448
  • 3
  • 54
  • 74
user1114881
  • 731
  • 1
  • 12
  • 25
  • more excellent answers here ... http://stackoverflow.com/questions/6203738/iphone-skew-a-calayer – Fattie May 21 '16 at 17:44
  • Hear is a good article by 'Eduardo Irías' for [Swift Transforms](https://medium.com/weeronline/swift-transforms-5981398b437d) on medium.com – SHS Nov 10 '20 at 13:52

1 Answers1

11

Let's assume you have a variable named imageView holding a reference to your UIImageView.
I wrote a little sample to demonstrate how you could get this behavior. What this code does is creating a new CGAffineTransform matrix. This matrix has the same values as the identity transform matrix with one exception: the value at location [2,1]. This value is controlled by the c-parameter of the CGAffineTransformMake-function and controls the shearing along the x-axis. You can change the amount of shearing by setting shearValue.

The code:

Objective-C

CGFloat shearValue = 0.3f; // You can change this to anything you want
CGAffineTransform shearTransform = CGAffineTransformMake(1.f, 0.f, shearValue, 1.f, 0.f, 0.f);
[imageView setTransform:shearTransform];

Swift 5

let shearValue = CGFloat(0.3) // You can change this to anything you want
let shearTransform = CGAffineTransform(a: 1, b: 0, c: shearValue, d: 1, tx: 0, ty: 0)
imageView.transform = shearTransform

And here's what the shearTransform-matrix looks like:

[1     0     0]  
[0.3   1     0]  
[0     0     1]
Ky -
  • 30,724
  • 51
  • 192
  • 308
s1m0n
  • 7,825
  • 1
  • 32
  • 45
  • this is great. just what I needed. However I had applied `self.imageViewreflex.transform =CGAffineTransformMakeScale(1,-1);` to the uiimageView to turn it upside down, but by applying this, your code, it's no longer upside down. Do you know what happened and how to get the upside down back. – user1114881 Sep 13 '13 at 07:31
  • figured this out just changed fourth value to a negative. – user1114881 Sep 13 '13 at 14:29
  • @s1m0n, Which value provides a shear in the Y dimension? – Duncan C Jan 16 '17 at 20:23
  • @DuncanC, transpose s1m0n's matrix and you'll get a Y dimension shear – igrek Jun 22 '18 at 15:48