# Thread: [RESOLVED] Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

1. ## [RESOLVED] Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Hi all, I'm learning VB6 Cairo, and I'm pretty impressed with it(!) Today however, I'm stuck at image rotation. I've been crawling, slowly through Olaf's tech demos, and the Pycairo documentation online. But, for the life of me I cannot decipher why images wont rotate nicely.

Attached are my feeble attempts at trying to rotate the first image by 45 degrees.

It's a transparent image, so I don't know if that affects things later.
I've followed the Pycairo stuff, which moves the image-middle to the origin and rotates it there.
But no matter what I do the coord rotation always occurs at the top left corner of the image, no matter where I put the image. If I translate it or copy to another surface, it gets clipped.

The image is 200px x 200px, It's called "Picture" and lives in the cairo imagelist.

I've been trying this mess below and modfiying it till my eyes bleed. But no luck.
Dim Matrix_Plan As cCairoMatrix
Set Matrix_Plan = Cairo.CreateIdentityMatrix
Matrix_Plan.TranslateCoords -100, -100
Matrix_Plan.RotateCoordsDeg 45
Set Test_Screen.Matrix = Matrix_Plan
Test_Screen.RenderSurfaceContent Cairo.ImageList.Item("Picture"), 0, 0, , , CAIRO_FILTER_BEST

Does anyone know the less-pain way to rotate a simple image? I'm totally stuck in the mud at this point....

2. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Originally Posted by -Corso->
Does anyone know the less-pain way to rotate a simple image? I'm totally stuck in the mud at this point....
You had everything right basically, but missed out on the usual:
- backtranslation with half the ImageWidth and -Height (after the Rotate-Methodcall)

Here is a simple example-setup:
Code:
```Option Explicit

Private Test_Screen As cCairoContext

End Sub

Private Sub Form_Resize()
ScaleMode = vbPixels
Set Test_Screen = Cairo.CreateSurface(ScaleWidth, ScaleHeight).CreateContext
RefreshScreen
End Sub

Private Sub RefreshScreen()
With Test_Screen
.Paint 1, Cairo.CreateSolidPatternLng(vbWhite)

DrawPicTo Test_Screen, Cairo.ImageList("Picture"), _
.Surface.Width / 2, .Surface.Height / 2, 45

.MatrixResetToIdentity
Set Picture = .Surface.Picture
End With
End Sub```
In addition to the above you can now experiment with several "DrawPicTo"-routines...:

Number one is doing it basically like in your code:
Code:
```Private Sub DrawPicTo(CC As cCairoContext, Pic As cCairoSurface, x, y, AngleDeg)
CC.Save
Dim Matrix_Plan As cCairoMatrix
Set Matrix_Plan = Cairo.CreateIdentityMatrix

Matrix_Plan.TranslateCoords x, y
Matrix_Plan.RotateCoordsDeg AngleDeg
'Matrix_Plan.ScaleCoords 2, 2 '<- optionally scale the image
Matrix_Plan.TranslateCoords -Pic.Width / 2, -Pic.Height / 2

Set CC.Matrix = Matrix_Plan
CC.RenderSurfaceContent Pic, 0, 0, , , CAIRO_FILTER_BEST
CC.Restore
End Sub```
Number two is a variant, which should (as the above one) work with RC5 and RC6:
Code:
```Private Sub DrawPicTo(CC As cCairoContext, Pic As cCairoSurface, x, y, AngleDeg)
CC.Save
CC.TranslateDrawings x, y
CC.RotateDrawingsDeg AngleDeg
'CC.ScaleDrawings 2, 2 '<- optionally scale the image
CC.TranslateDrawings -Pic.Width / 2, -Pic.Height / 2

CC.RenderSurfaceContent Pic, 0, 0, , , CAIRO_FILTER_BEST
CC.Restore
End Sub```
And number 3 is one, which is using the Paint-Method (on a pre-centered Pattern which was wrapped around the Pic-Surface)
Code:
```Private Sub DrawPicTo(CC As cCairoContext, Pic As cCairoSurface, x, y, AngleDeg)
CC.Save
CC.TranslateDrawings x, y
CC.RotateDrawingsDeg AngleDeg
'CC.ScaleDrawings 2, 2 '<- optionally scale the image
CC.Paint 1, Pic.CreateSurfacePattern(CAIRO_FILTER_BEST, , True)
CC.Restore
End Sub```
HTH

Olaf

3. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

I struggled with the same issue for a while myself while putting together this Codebank entry: https://www.vbforums.com/showthread....p-Rotate-Crop)

I eventually found this page that helped: https://cairo.freedesktop.org/cookbo...m_about_point/, and there are a number of other good examples in the Cairo Cookbook that are worth a look: https://cairo.freedesktop.org/cookbook/

4. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

How to rotate an image at any angle, and there are no extra blank pixels around?Then save as a new picture

5. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Originally Posted by xiaoyao
How to rotate an image at any angle, and there are no extra blank pixels around?Then save as a new picture
Let me ask you something -- when you take a photo with your phone at 45 degrees does it load at 45 degrees on your PC? Why not, the camera lenses (the hardware) is rotated at 45 degree?

What could "no extra blank pixels around" possibly mean?

cheers,
</wqw>

6. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Only thing I can think of is perhaps the larges square (or rectangle) that when centred and cropped will only contain pixels from the original image?

7. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Its an old question from xiaoyao and has been answered multiple times.
Unfortunately he apparently doesn't understand any of the answers.

Essentially, he wants the smallest square that will encompass the rotated image, so the square will expand out during rotation to one of the ordinal 45 degree angles, but shrink back to the smallest size possible at the 90 degree rotations.

He's been given sin/cos calculations that can give him the size, and GDI+ answers, i.e. using the graphics object matrix and give it the four coordinates in an array and a rotation value and have it return the four coordinates rotated.

But, another month has gone by and he is still asking the question.

8. ## Re: Cairo based Image Rotation, it's all a M-e-S-s. [L-Plate Learner Edition]

Thank you Olaf and JPBro,
Thanks to Olaf's example, I realized I had the the order of operations reversed...
This fixed it all...
Matrix_Plan.TranslateCoords 100, 100
Matrix_Plan.RotateCoordsDeg 45
Matrix_Plan.TranslateCoords -100, -100

Let the screaming begin! AHHHHHHH I'm such a dummmmmy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ARGHHHHHHHHHHHHHHH!!!!!!!!!!!
Many thanks again. I'll just go into the corner and slap myself with a hose pipe till I remember.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•