Trying to better understand CGAffineTransform.... and need a bit of guidance.

Question

Created 2d

Replies 2

Boosts 0

Participants 3

I have a CoreImage pipeline and one of my steps is to rotate my image about the origin (bottom left corner) and then translate it. I'm not seeing the behaviour I'm expecting, and I think my problem is in how I'm combining these two steps. As an example, I start with an identity transform

(lldb) po transform333
▿ CGAffineTransform
  - a : 1.0
  - b : 0.0
  - c : 0.0
  - d : 1.0
  - tx : 0.0
  - ty : 0.0

I then rotate 1.57 radians (approx. 90 degrees, CCW)

        transform333 = transform333.rotated(by: 1.57)
  - a : 0.0007963267107332633
  - b : 0.9999996829318346
  - c : -0.9999996829318346
  - d : 0.0007963267107332633
  - tx : 0.0
  - ty : 0.0

I understand the current contents of the transform. But then I translate by 10, 10:

(lldb) po transform333.translatedBy(x: 10, y: 10)
  - a : 0.0007963267107332633
  - b : 0.9999996829318346
  - c : -0.9999996829318346
  - d : 0.0007963267107332633
  - tx : -9.992033562211013
  - ty : 10.007960096425679

I was expecting tx and ty to be 10 and 10. I have noticed that when I reverse the order of these operations, the transform contents look correct. So I'll most likely just perform the steps in what feels to me like the incorrect order. Is anyone willing/able to point me to an explanation of why the steps I'm performing are giving me these results?

thanks,

mike

Boost

Answer 1

endecotp OP

1d

So I'll most likely just perform the steps in what feels to me like the incorrect order.

Here's an anecdote from about 1990:

A friend was on a transatlantic flight, and the guy sat next to him had a laptop computer - which was a bit of a novelty at the time, and since this was before at-seat power, he also had a large bag of batteries to swap. (Yes, removable batteries!).

My friend was of course watching what the guy was doing. He seemed to be writing 3D graphics code. He would hack around for a bit, then run it, quietly swear, and repeat.

Eventually, my friend had to say something. "Excuse me", "Huh, yeah?", "You're multiplying the matricies in the wrong order. Swap A and B on line 481."

Anyway.

I don't recall the semantics of the Core Graphics transformation functions. There are definitely two ways of thinking about it. My preference with any API of this sort is to form the complete matrix myself and call a single API function to set it. Then I'm in control of what happens and I don't need to worry about whether this particular library does AxB or BxA.

Beware that that's not the only way it can go wrong. There is one affine transformation API - I forget which one, maybe it's SVG? - where rotations are about the center of the image, not the origin!

Good luck.

0

Answer 2

Claude31 OP

1d

If understand, you call rotate then translate ?

Could you show how you create the transforms ? In your case, I think it should be:

        var t = CGAffineTransform.identity
        t = t.translatedBy(x: deltaX, y: -deltaY)
        t = t.rotated(by: rotation)

so when you apply t = Id ° trans ° rot, you apply rot first.

If you call sequentially, this may help: https://stackoverflow.com/questions/24926062/sequence-of-cgaffinetransform-on-a-single-uiview

Note: I also had to test and try before getting the expected result.

0