B4A Library JSTouchImageView Library - pinch, pan & zoom image

This is a wrap of this library: https://github.com/MikeOrtiz/TouchImageView

Latest library (if anyone is interested) is here: GitHub

And will share it to you guys "as-is".

Initialize and set Image

' add JSTouchImageView on your activity via code or from designer
Dim touchImage As JSTouchImageView
touchImage.Initialize("touchImage")
Activity.AddView(touchImage, 0dip, 0dip, 100%x, 100%y)

' set image bitmap
touchImage.setImageBitmap(LoadBitmap(File.DirAssets, "image.jpeg"))

Get ScrollPosition and ZoomedRect (Using JavaObject)

Dim point As JavaObject = touchImage.ScrollPosition
Dim rect As JavaObject = touchImage.ZoomedRect

Dim currentZoom As Float = touchImage.CurrentZoom
Dim isZoomed As Boolean = touchImage.IsZoomed

LogColor($"x: ${point.GetField("x")} y: ${point.GetField("y")}"$, Colors.Blue)
LogColor($"left: ${rect.GetField("left")} top: ${rect.GetField("top")}"$, Colors.Blue)
LogColor($"right: ${rect.GetField("right")} bottom: ${rect.GetField("bottom")}"$, Colors.Blue)
LogColor($"currentZoom: ${currentZoom} isZoomed: ${isZoomed}"$, Colors.Blue)

PS: If you like my work, donation is open for people would like to buy me a bread (not beer) lol!
Donate Now

 

[Ivan Aldaz]

I think you can use a transparent panel, so the gestures are not taken by the zoomed image. You'll have to calculate the coordinates in the zoomed image where you have to place the drawn lines.

 

[CaptKronos]

The following approach is pretty straightforward.

Sub Globals
    Private touchImage As JSTouchImageView
    Private c As Canvas
    Private bmp As Bitmap
    Private bmpRect As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Dim bmpMut As Bitmap
    bmp=LoadBitmap(File.DirAssets, "1523261604.jpg")
    bmpMut.InitializeMutable(bmp.Width,bmp.Height)
    c.Initialize2(bmpMut)
    bmpRect.Initialize(0,0,bmp.Width,bmp.Height)
    c.DrawBitmap(bmp,Null,bmpRect)
    touchImage.Initialize("touchImage")
    Activity.AddView(touchImage, 0dip, 0dip, 100%x, 100%y)
    touchImage.SetImageBitmap(c.Bitmap)
    touchImage.SetScaleType(touchImage.SCALE_TYPE_MATRIX)
End Sub

Sub drawAMark( x As Int, y As Int)
    If x<0 Or x>bmp.Width Or y<0 Or y>bmp.Height Then
        'out of bounds
    Else
        c.drawLine(x-10dip, y+10dip, x+10dip, y-10dip,Colors.Red,2)
        c.drawLine(x-10dip,y-10dip,x+10dip,y+10dip,Colors.Red,2)
        touchImage.SetImageBitmap(c.Bitmap)
    End If
End Sub

Sub touchImage_OnItemClick
    Dim rTI As Reflector, rGD As Reflector
    rTI.Target=touchImage
    Dim mGD As JavaObject = rTI.GetField("mGestureDetector")
    rGD.Target=mGD
    Dim ptX As Object = rGD.GetField("mLastFocusX")
    Dim ptY As Object = rGD.GetField("mLastFocusY")
    Dim aPointF As JavaObject = rTI.RunMethod4("transformCoordTouchToBitmap", _
            Array As Object(ptX,ptY,False), Array As String("java.lang.float", _ 
            "java.lang.float","java.lang.boolean"))
    drawAMark(aPointF.getfield("x"), aPointF.getfield("y"))
End Sub

 

[Harris]

Just implemented in my android app....
Without any special consideration / configuration - IT WORKS GREAT!

Normally, I don't like using contributed libs (vs preferred classes), since I am handcuffed (to the supplier)... Not here however...
Works fine across all versions of (most modern) android and better than I expected. Don't need or want anything else.

You did a great and complete job - and I thank you.