2 Finger zoom on mobile devices

Real beginner at mobile interface design - and had a rough time finding information about 2-finger “gestures” in my app (saw a bunch of references about “gestures”, but nothing I could sink my teeth into - and my abilities as far as includes go is … well, nil.

My “Hard Code” solution became the following:
Used a bunch of global properties:
Public Property mScrollYStart As Double
Public Property mDifference As Double
Public Property mDistanceStart As Double
Public Property mDistanceStop As Double
Public Property mScale As Double = 1
Public Property mScaleFinish As Double = 1
Public Property mScrollRangeX As Double
Public Property mScrollRangeY As Double
Public Property mScrollXDifference As Double
Public Property mScrollXStart As Double
Public Property mScrollYDifference As Double

In my canvas, I used the following:
Paint Event: (Butterfly1 is the image I used)

g.DrawPicture Butterfly1, 0-mScrollXDifference, 0-mScrollYDifference, me.Width*mScale, me.Height*mScale, 0, 0, Butterfly1.Width, Butterfly1.Height

PointerDown Event:

Dim dLength, dHeight, dDistance As Double

Select Case pointerInfo.Count
  
Case 1
  
Case 2
  
  If pointerInfo(0).Position.X <> pointerInfo(1).Position.X Then // Make sure we moved
    
    // Get the X distance
    If pointerInfo(0).Position.X > pointerInfo(1).Position.X Then
      dLength = pointerInfo(0).Position.X - pointerInfo(1).Position.X
    Else
      dLength = pointerInfo(1).Position.X - pointerInfo(0).Position.X
    End If
  End If
  
  If pointerInfo(0).Position.Y <> pointerInfo(1).Position.Y Then // Make sure we moved
    
    // Get the Y distance
    If pointerInfo(0).Position.Y > pointerInfo(1).Position.Y Then
      dHeight = pointerInfo(0).Position.Y - pointerInfo(1).Position.Y
    Else
      dHeight = pointerInfo(1).Position.Y - pointerInfo(0).Position.Y
    End If
  End If
  
  // pythagorean theorem - get the distance between the two points based on X distance and Y distance
  dDistance = Sqrt((dLength * dLength) + (dHeight * dHeight))
  mDistanceStart = dDistance
  
End Select

mScrollXStart = position.X + mScrollXDifference
mScrollYStart = position.Y + mScrollYDifference

PointerDrag Event:

Dim sX, sY, sP1, sP2 As String
Dim iX, iY As Integer
Dim dLength, dHeight, dDistance, dDifference As Double

If pointerInfo.Count = 2 Then
  
  If pointerInfo(0).Position.X <> pointerInfo(1).Position.X Then // Make sure we moved
    
    // Get the X distance
    If pointerInfo(0).Position.X > pointerInfo(1).Position.X Then
      dLength = pointerInfo(0).Position.X - pointerInfo(1).Position.X
    Else
      dLength = pointerInfo(1).Position.X - pointerInfo(0).Position.X
    End If
  End If
  
  If pointerInfo(0).Position.Y <> pointerInfo(1).Position.Y Then // Make sure we moved
    
    // Get the Y distance
    If pointerInfo(0).Position.Y > pointerInfo(1).Position.Y Then
      dHeight = pointerInfo(0).Position.Y - pointerInfo(1).Position.Y
    Else
      dHeight = pointerInfo(1).Position.Y - pointerInfo(0).Position.Y
    End If
  End If
  
  // pythagorean theorem - get the distance between the two points based on X distance and Y distance
  dDistance = Sqrt((dLength * dLength) + (dHeight * dHeight))
  mDistanceStop = dDistance
  
  dDifference = mDistanceStop - mDistanceStart
  mDifference = dDifference
  
  If mScale > 1 Then
    mScale = mScaleFinish + mDifference/100
  Else
    mScale = 1 + mDifference/100
  End If
  
  If mScale<1 Then
    mScale = 1
  End If
  
  If mScale >4 Then
    mScale = 4
  End If
  
End If

mScrollXDifference = mScrollXStart - position.X
mScrollYDifference = mScrollYStart - position.Y

If  mScrollXDifference<0 then
  mScrollXDifference = 0
End If

If  mScrollYDifference<0 then
  mScrollYDifference = 0
End If

// Set the scroll range
mScrollRangeX = (me.Width * mScale) - me.Width
mScrollRangeY = (me.Height * mScale) - me.Height

If  mScrollXDifference > mScrollRangeX then
  mScrollXDifference = mScrollRangeX
End If

If  mScrollYDifference > mScrollRangeY then
  mScrollYDifference = mScrollRangeY
End If
Me.Refresh

PointerUp Event:

Select Case pointerInfo.Count
Case 1
  //Ignore
Case 2
  mScaleFinish = mScale
End Select
Me.Refresh

And it seems to work (yes, I could “pretty it up” by having the scale based on the center of the 2-finger touch point, maybe next week)

Thoughts?
Is there a cleaner, more efficient, “simpler” way to accomplish this? (Like I said - I’m lost with declares, etc. (I know - gonna get a bunch of responses “Learn Declares!!!”)

BUT - would this not work cross-platform? (iOS and Android)

1 Like

I appreciate you posting this Marc. I tried to make the declares work for pinch to zoom a month or two ago, but alas couldn’t get them sorted out correctly and ran out of time. I had never thought of simply using the native Xojo events and I’ll definitely give this a shot in my own app once I revisit this.

Anyone else have some working declares for pinch to zoom? Lots of discussions over the years in the forum on this, alas many weren’t fully complete and IIRC might have even used disallowed Apple APIs.