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
B4X:
' 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)
B4X:
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
 

Attachments

  • JSTouchImageView.zip
    21 KB · Views: 988
Last edited:

Ivan Aldaz

Member
Licensed User
Longtime User
Great! I had the old .jar and .xml files (nov'16), and there was no 'setZoom' method.

Works like a charm. Thank you.
 

Croïd

Active Member
Licensed User
Longtime User
How to use the scale function ?



js.PNG
 

Ivan Aldaz

Member
Licensed User
Longtime User
Is there a way to know left and top values of the image when zoomed? I need it to avoid a jump to the center when changing zoom with a zoombar, instead of pinch. With these values I could know focusX and focusY for setZoom2 method.
 

SNOUHyhQs2

Member
Licensed User
Longtime User
Is there a way to know left and top values of the image when zoomed? I need it to avoid a jump to the center when changing zoom with a zoombar, instead of pinch. With these values I could know focusX and focusY for setZoom2 method.

Library & sample updated on GitHub.

Not sure if this is what you want.

B4X:
    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)
 

Croïd

Active Member
Licensed User
Longtime User
With double tap you can zoom in (or out) of area image.

Can you modify with only one tap ?
 

Ivan Aldaz

Member
Licensed User
Longtime User
Thank you, salvadorjhai, that's exactly what I wanted. The values I needed for changing zoom by code with setZoom2 method keeping scroll position were focusX = point.GetField("x") and focusY = point.GetField("y").
 

Ivan Aldaz

Member
Licensed User
Longtime User
@Croid, you can change zoom with only one tap with this code:

B4X:
Sub imv_OnItemClick
   
    imv.SetZoom1(imv.CurrentZoom * 1.2)
       
End Sub
 

Croïd

Active Member
Licensed User
Longtime User
@Croid, you can change zoom with only one tap with this code:

Thanks Ivan, but the problem with current zoom, is that the image is centered !

I search zoom resize image only on where tap (as double tap)
 
Last edited:

Ivan Aldaz

Member
Licensed User
Longtime User
Try this:

B4X:
Sub imv_OnItemClick

   Dim point As JavaObject = imv.ScrollPosition
    imv.setZoom2(imv.CurrentZoom * 1.5, point.GetField("x"), point.GetField("y"))

End Sub
 

Ivan Aldaz

Member
Licensed User
Longtime User
Hi again. Does anybody know how to detect the double-tap event? Or when zoom changes?
 
Last edited:

CaptKronos

Active Member
Licensed User
Longtime User
Just in case anyone needs to determine the tap location within the image:

B4X:
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("mDownFocusX")
    Dim ptY As Object = rGD.GetField("mDownFocusY")
    Dim aPointObject As JavaObject = rTI.RunMethod4("transformCoordTouchToBitmap", _
            Array As Object(ptX,ptY,False), Array As String("java.lang.float", _ 
            "java.lang.float","java.lang.boolean"))
    Dim x, y As Float
    x = aPointObject.getfield("x")/aMarker.theimage.Width
    y = aPointObject.getfield("y")/aMarker.theimage.height
End Sub
 
Top