3

I'm quite new to drawing in Cocoa, and working on an experimental app involving a hexagonal grid. In order to simplify this, I want to skew the coordinate system so that the Y axis is rotated 30 degrees to the left. I came across this in Apple's Cocoa Drawing Guide, which indicates it is possible:

Combining a non-uniform scaling transform with a rotation transform can also give your content a skewed effect.

However, I cannot understand how this would work, or locate any examples.

How can I set up an NSAffineTransform so that the X axis remains horizontal and the Y axis is rotated counteclockwise by 30 degrees?

mbmcavoy
  • 2,628
  • 5
  • 23
  • 34

1 Answers1

3

Unfortunately, there is no easy way to do this as you would with transforms, rotations, etc.

You have to create a transform matrix:

0            tan(skewy)   0
tan(skewx)   0            0
0            0            1

Using setTransformStruct: with an NSAffineTransformStruct:

typedef struct _NSAffineTransformStruct {
  CGFloat m11, m12, m21, m22;
  CGFloat tX, tY;
} NSAffineTransformStruct;

For skewing, m11, m22, tx, and ty are zero; m12 is tan(skewx) and m21 is tan(skewy)

There is much more information on matrices in Apple's documentation: https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CocoaDrawingGuide/Transforms/Transforms.html#//apple_ref/doc/uid/TP40003290-CH204-BCIIICJI

Hope this helps!

sgonzalez
  • 1,086
  • 9
  • 24
  • This certainly looks promising, and I will try this as soon as possible. I missed the setTransformStruct: method in my reading, and was thinking you had to use the other "easy" methods to set the transform. I've been aware of the existence of tranform matrices as well, but they are ... intimidating. I appreciate that your answer shows a clear direction withough just doing the work for me! – mbmcavoy Oct 05 '12 at 19:52
  • I was able to achieve the skewing effect, although some of the values you show are not correct. As I wanted to rotate the Y axis (not just skew it), my NSAffineTransformStruct values were {1, 0, sin(-30), cos(-30), 0, 0}. Thanks for the help! – mbmcavoy Oct 06 '12 at 04:50