Zoom and pan.

BlitzMax Forums/BlitzMax Programming/Zoom and pan.

Sanctus

(Posted 2009) [#1]

Hey guys.
Sorry to post again but I have a intresting problem and I just can't figure it out.
I'm trying to make a little map editor (2D) and thus I'd like to use pan and zoom.
So I have these variables to hold my zoom and pan

Global Offx:Float = 0
Global Offy:Float = 0
Global Zoom:Float = 1

In my Draw I use this thing

SetScale(TApp.Zoom, TApp.Zoom)
DrawImage (TImage(map.tileset.TileList.ValueAtIndex(grid[I, J].img)), (sx - TApp.Offx) * TApp.Zoom, (sy - TApp.Offy) * TApp.Zoom)

sx and sy are the basic tile positions (It's isometric and I have to calculate it)

Works fine when I pan, but when I zoom in and out I'd like it to zoom around the place where my mouse is so I'm guessing that has to modify my offset but I can't figure out how to do that.
Could anyone be so nice to help me?

matibee

(Posted 2009) [#2]

Like you say, your zoom value affects your offsets too. Something like..

SetScale(TApp.Zoom, TApp.Zoom)
DrawImage (TImage(map.tileset.TileList.ValueAtIndex(grid[I, J].img)), sx - (TApp.Offx * TApp.Zoom), sy - (TApp.Offy * TApp.Zoom) )

Sanctus

(Posted 2009) [#3]

I tried this the first time and the result is even worse...

Look at this. The distance between the tiles stays the same now.
sx and sy must really be multiplied with the zoom.
There is something with the offx and offy that's not right.

Midimaster

(Posted 2009) [#4]

test this:

write before "DrawImage.....

Print "before: " + sx - TApp.Offx
Print "after: " + (sx - TApp.Offx) * TApp.Zoom

.. to make sure, that the values are as expected

matibee

(Posted 2009) [#5]

Try adjusting the sx & sy according to the zoom value too...

SetScale(TApp.Zoom, TApp.Zoom)
DrawImage (TImage(map.tileset.TileList.ValueAtIndex(grid[I, J].img)), (sx * TApp.Zoom) - (TApp.Offx * TApp.Zoom), (sy * TApp.Zoom) - (TApp.Offy * TApp.Zoom) )

If possible post more code so we can test what were offering :)

_JIM	(Posted 2009) [#6]

Well, I gave him a very handy solution but I'll post it here if anyone needs it:

'2D transformation processing class - VERY useful :)
Type TTransform2D
	Field Matrix:Double[2, 2]
	Field Rotation:Float = 0
	Field ScaleX:Float = 1
	Field ScaleY:Float = 1
	
	Method Init(sx:Float = 1, sy:Float = 1, rot:Float = 0)
		Self.ScaleX = sx
		Self.ScaleY = sy
		Self.Rotation = rot
		Self.Update()
	EndMethod
	
	Method Scale(sx:Float, sy:Float)
		ScaleX = sx
		ScaleY = sy
		
		Self.Update()
	EndMethod
	
	Method Update()
		Matrix[0, 0] = Cos(Rotation)
		Matrix[1, 0] = - Sin(Rotation)
		Matrix[0, 1] = Sin(Rotation)
		Matrix[1, 1] = Cos(Rotation)
	End Method
	
	Method Rotate(angle:Float)
		Rotation = angle
		
		Self.Update()
	EndMethod
	
	Method Transform(x:Float var, y:Float var)
		Local xx:Float
		Local yy:Float
		
		x = x * ScaleX
		y = y * ScaleY
		
		xx = x * Matrix[0, 0] + y * Matrix[1, 0]
		yy = x * Matrix[0, 1] + y * Matrix[1, 1]
		
		x = xx
		y = yy
	End Method
	
	Method ITransform(x:Float var, y:Float var)
		Local xx:Float
		Local yy:Float
		
		Self.Rotation = -Self.Rotation
		Self.Update()
		
		xx = x * Matrix[0, 0] + y * Matrix[1, 0]
		yy = x * Matrix[0, 1] + y * Matrix[1, 1]
		
		Self.Rotation = -Self.Rotation
		Self.Update()
		
		xx = xx / ScaleX
		yy = yy / ScaleY
		
		x = xx
		y = yy
	End Method
End Type

Type TEventHandler
	Method New()
		AddHook EmitEventHook, EventHook, Self
	EndMethod
	
	Method Delete()
		RemoveHook EmitEventHook, EventHook, Self
	EndMethod
	
	Method ProcessEvent:TEvent(event:TEvent) Abstract
	
	Function EventHook:Object(id:Int,data:Object,context:Object)
		Local event:TEvent=TEvent(data)
		If event Return TEventHandler(context).ProcessEvent(event) Else Return data
	EndFunction
EndType

Type TZoomPanControl Extends TEventHandler
	Global ControlsList:TList = New TList
	
	Field Gadget:TGadget
	Field isOpen:Int
	
	Field OX:Float
	Field OY:Float
	Field MX:Float
	Field MY:Float
	Field MousePos:Float[2]
	Field MZSpeed:Int
	
	Field MHit:Byte[4]
	Field MDown:Byte[4]
	
	Field KHit:Byte[256]
	Field KDown:Byte[256]
	
	Field OldOX:Float
	Field OldOY:Float
	
	Field ScaleTarget:Float
	Field ScaleFactor:Float
	Field OldScaleFactor:Float
	
	Field Dragging:Int
	
	Method New()
		AddHook EmitEventHook, EventHook, Self
		ControlsList.AddLast(Self)
	End Method
	
	Method Delete()
		RemoveHook EmitEventHook, EventHook, Self
	End Method
	
	Method SetUp()
		If (Gadget <> Null)
			OX = ClientWidth(Gadget) / 2
			OY = ClientHeight(Gadget) / 2
		EndIf
		OldOX = 0
		OldOY = 0
		Self.ScaleTarget = 100
		Self.ScaleFactor = 1
	End Method
	
	Method Update()
		
		Local tf:TTransform2D = New TTransform2D
		
		Local SzX:Float
		Local SzY:Float

		If (Gadget <> Null)
			SzX = ClientWidth(Gadget)
			SzY = ClientHeight(Gadget)
		End If
		
		Local ZoomCenterX:Float = SzX / 2.0
		Local ZoomCenterY:Float = SzY / 2.0
		
		Local OOX:Float = (Self.OX - ZoomCenterX)
		Local OOY:Float = (Self.OY - ZoomCenterY)
		
		tf.Init(Self.ScaleFactor, Self.ScaleFactor)
		tf.ITransform(OOX, OOY)
		
		Self.OldScaleFactor = Self.ScaleFactor
		Self.ScaleFactor = Self.ScaleFactor - (Self.ScaleFactor - (Float(Self.ScaleTarget) / 100.0)) / 20

		tf.Init(Self.ScaleFactor, Self.ScaleFactor)
		tf.Transform(OOX, OOY)
		
		Self.oX = OOX + ZoomCenterX
		Self.oY = OOY + ZoomCenterY
		
		If (Self.MHit[1])
			Self.Dragging = 1
		End If
		
		If (Self.MDown[1] = 0)
			Self.Dragging = 0
		End If
		
		If (Self.MHit[3])
			Self.MX = Self.MousePos[0]
			Self.MY = Self.MousePos[1]
			Self.OldOX = Self.OX
			Self.OldOY = Self.OY
			ActivateGadget(Self.Gadget)
		End If
		
		If (Self.MDown[3])
			Self.OX = (Self.MousePos[0] - Self.MX) + Self.OldOX
			Self.OY = (Self.MousePos[1] - Self.MY) + Self.OldOY
			ActivateGadget(Self.Gadget)
		Else
			Self.OldOX = Self.OX
			Self.OldOY = Self.OY
		End If
		
		If (KHit[KEY_NUMSUBTRACT] Or (Self.MZSpeed < 0))
			Self.ScaleTarget = Max(Self.ScaleTarget - 10, 10)
		EndIf
		If (Self.KHit[KEY_NUMADD] Or (Self.MZSpeed > 0))
			Self.ScaleTarget = Min(Self.ScaleTarget + 10, 400)
		EndIf
		
		If (Self.KHit[KEY_NUMMULTIPLY])
			Self.ScaleTarget = 100
		EndIf
		
		Self.MHit[3] = 0
		Self.MZSpeed = 0
	End Method
	
	Method ProcessEvent:TEvent(event:TEvent)
		If (isOpen = 0) Then Return(event)
		
		Select event.id
			Case EVENT_MOUSEMOVE
				If event.source = Self.Gadget
					Self.MousePos[0] = event.X
					Self.MousePos[1] = event.Y
					Return Null
				EndIf
				
			Case EVENT_MOUSEWHEEL
				If event.source = Self.Gadget
					Self.MZSpeed:+Int(event.data)
					Return Null
				EndIf

			Case EVENT_MOUSEDOWN
				If (event.source = Self.Gadget)
					Self.MHit[Int(event.data)] = 1
					Self.MDown[Int(event.data)] = 1
					Return Null
				EndIf
			Case EVENT_MOUSEUP
				If (event.source = Self.Gadget)
					Self.MDown[Int(event.data)] = 0
					Return Null
				EndIf
			Case EVENT_KEYDOWN
				If (event.source = Self.Gadget)
					KDown[Int(event.data)] = 1
					KHit[Int(event.data)] = 1
					Return Null
				EndIf
			Case EVENT_KEYUP
				If (event.source = Self.Gadget)
					KDown[Int(event.data)] = 0
					Return Null
				EndIf
		End Select
		Return event
	EndMethod
	
	Method AttachTo(g:TGadget)
		If (g = Null) Then Return
		Local t:TZoomPanControl = TZoomPanControl(GadgetExtra(g))
		
		If (t <> Null)
			t.isOpen = 0
		End If
		
		SetGadgetExtra(g, Self)
		Self.Gadget = g
		Self.isOpen = 1
	End Method
	
	Method Follow(targetx:Float, targety:Float)
		Local SzX:Float = GadgetWidth(Self.Gadget)
		Local SzY:Float = GadgetHeight(Self.Gadget)
		Local xdiff:Float = targetx - (-Self.OX + SzX / 2)
		Local ydiff:Float = targety - (-Self.OY + SzY / 2)
		
		Self.OldOX = Self.OX
		Self.OldOY = Self.OY
		
		Self.OX:-xdiff
		Self.OY:-ydiff
	End Method
End Type

In order to use it, you have to basically call 3 methods:

AttachTo(gadget) - use it when you want the control to handle a specific gadget (used on canvases I presume :) )
SetUp() - just after you attached it for the first time. This resets the parameters
Update() - call per frame to have the zoom update

When you draw your images, all you have to do is:

DrawImage img, imgx * ZPC.ScaleFactor + ZPC.OX, imgy * ZPC.ScaleFactor + ZPC.OY

As always, code is free to use in any way. Credits are welcome :)