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 post - 1 participant

Read full topic