H2: Zoom in/out of center of viewport of image control?

[JohnPotier]

Hi all,

I have a form that pops up and displays pictures. I've some code that enables zooming in/out of the image. Code works fine:

Sub ImageCenter3()
        img.Left = (Me.ScaleWidth - img.Width) / 2
        img.Top = (Me.ScaleHeight - img.Height) / 2
End Sub
Private Sub Form_KeyUp(KeyCode As Integer, Shift As Integer)
Dim x As Double
        'me.KeyPreview = True' needs to be on for this event to fire on all presses.
        x = 300 'zoom increment
        If KeyCode = 107 Or KeyCode = 187 Then ' 43 "+" keys -> Zoom in
            img.Stretch = True
            img.Width = img.Width + x
            img.Height = img.Height + x
            Call ImageCenter3
        ElseIf KeyCode = 109 Or KeyCode = 189 Then ' 45 "-" keys -> Zoom out
            img.Stretch = True
            img.Width = img.Width - x
            img.Height = img.Height - x
            Call ImageCenter3
        ElseIf KeyCode = 48 Or KeyCode = 96 Then ' "0" key -> Fit to window
            Call Form_Resize
        ElseIf KeyCode = 49 Or KeyCode = 97 Then ' "1" key -> set to 100%
            img.Stretch = False
            Call ImageCenter3
        ElseIf KeyCode > 49 And KeyCode < 59 Then  ' 2,3,4,5,6,7,8,9 ,factor of *100% zoom
            img.Stretch = True
            x = KeyCode - 48
            img.Width = imgX * x
            img.Height = imgY * x
            Call ImageCenter3
        ElseIf KeyCode > 97 And KeyCode < 106 Then  ' ------- " -------
            img.Stretch = True
            x = KeyCode - 96
            img.Width = imgX * x
            img.Height = imgY * x
            Call ImageCenter3
        End If
        
End Sub

My challenge:
The code above will allways reset the position of the image and zoom in/out from the center of the image (because of the "/ 2" operation in ImageCenter3().
I also have code that enables panning the image.
Q: How can I enable zooming in/out based on the center of what is visible on the form (which might not be the center of the image, if I have panned...)?

[Schmidt]

Not sure, whether you already use the Cairo-VB-wrapper or not - but using it will give you:
- much better stretch-quality (compared to the VB.image-Ctl in Zoom-Mode)
- and much less "hazzle" regarding "Zoom- and Pan-math" (due to its built-in Transform-methods)

Here is a short example, which does combined Panning- and Zooming -
(the blue marked lines below are the ones, which to the "heavy lifting" regarding the math)

Option Explicit

Private CC As cCairoContext, Img As cCairoSurface
Private Zoom As Single, PanX As Single, PanY As Single

Private Sub Form_Load()
  Zoom = 1 'init the Zoomfactor to 1
  Set Img = Cairo.ImageList.AddIconFromResourceFile("", "shell32", 317) 'load a system-icon as the example-image
'  Set Img = Cairo.ImageList.AddImage("", "c:\temp\tulips.jpg") 'or alternatively, load an img from disk
End Sub

Private Sub Form_Resize() 'ensure a Form-covering backbuffer-surface-context in CC
  ScaleMode = vbPixels: Set CC = Cairo.CreateSurface(ScaleWidth, ScaleHeight).CreateContext
  Redraw
End Sub

Private Sub Redraw()
  CC.Paint 1, Cairo.CreateCheckerPattern 'clear the previous Background with a new Pattern
  
  CC.Save
    CC.TranslateDrawings CC.Surface.Width / 2, CC.Surface.Height / 2
    CC.ScaleDrawings Zoom, Zoom
    CC.TranslateDrawings PanX, PanY 'place the pan-related translation after the Scale-Transform in the line above
    
    CC.Paint 1, Img.CreateSurfacePattern(CAIRO_FILTER_GAUSSIAN, CAIRO_EXTEND_NONE, True)
  CC.Restore
  
  Set Picture = CC.Surface.Picture 'set our back-buffer as the new Form-Picture
End Sub

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  Static xPrev As Single, yPrev As Single
  If Button Then PanX = PanX + (X - xPrev) / Zoom: PanY = PanY + (Y - yPrev) / Zoom: Redraw
  xPrev = X: yPrev = Y
End Sub

Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
  Select Case KeyCode
    Case 49 To 57: Zoom = KeyCode - 48 'use Keys 1 to 9 to set the Zoomfactor directly
  End Select
  Redraw
End Sub

The above code will show the following (on a Win11-machine), after checking in the RC6-Project-Reference:


Olaf

[JohnPotier]

Not sure, whether you already use the Cairo-VB-wrapper or not...

Thanks Olaf. Now you're touching on another item I've come across many times. This also reveals how little I understand, but I'll ask anyways :- )

I found the Cairo-VB-wrapper over at "Github: VBCairo", but how do I utilize stuff I find at GitHub?

What do I download, how do I download, and so on...

Stupid questions, I know! :-)

[Zvoni]

Thanks Olaf. Now you're touching on another item I've come across many times. This also reveals how little I understand, but I'll ask anyways :- )

I found the Cairo-VB-wrapper over at "Github: VBCairo", but how do I utilize stuff I find at GitHub?

What do I download, how do I download, and so on...

Stupid questions, I know! :-)

At a guess, these here: https://github.com/VBForumsCommunity...ree/master/bin

[Schmidt]

Thanks Olaf. Now you're touching on another item I've come across many times. This also reveals how little I understand, but I'll ask anyways :- )

I found the Cairo-VB-wrapper over at "Github: VBCairo", but how do I utilize stuff I find at GitHub?

What do I download, how do I download, and so on...

Stupid questions, I know! :-)

That's the wrapper, based on code from "the trick" (exposing the cairo-flat-api - and unmaintained for a few years).

The bigger cairo-wrapper (based on VB-Classes) is downloadable on vbRichClient.com -
(you need to download the "RC6BaseDlls.zip", and register RC6.dll after unpacking - for my example to work)...

Olaf