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

 

[johndb]

Thank you for sharing.
Have you tried warwound's wrap https://www.b4x.com/android/forum/threads/touchimageview.15616/

 

[SNOUHyhQs2]

Thank you for sharing.
Have you tried warwound's wrap https://www.b4x.com/android/forum/threads/touchimageview.15616/

yes, I already tried it before wrapping another touchimageview

 

[moster67]

Great!

Make sure to make an announcement in this thread:
https://www.b4x.com/android/forum/threads/subscribe-to-library-updates.25000/

Many users are subscribed to that thread and in this way they will be aware about your work.

 

[SNOUHyhQs2]

Great!

Make sure to make an announcement in this thread:
https://www.b4x.com/android/forum/threads/subscribe-to-library-updates.25000/

Many users are subscribed to that thread and in this way they will be aware about your work.

Ohh.. okay, thanks.

 

[Ivan Aldaz]

Hi, and thanks for sharing this library.
Is there a way to set zoom by code?

 

[SNOUHyhQs2]

Hi, and thanks for sharing this library.
Is there a way to set zoom by code?

i forgot but check setZoom

also the latest library in:
https://github.com/salvadorjhai/B4A-JSTouchImageView

 

[Ivan Aldaz]

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]

How to use the scale function ?

 

[Ivan Aldaz]

How to use the scale function ?

in the latest library (see link in post #7) syntax has changed:

imv.setScaleType(imv.SCALE_TYPE_CENTER_INSIDE)

The same to set bitmap:

imv.setImageBitmap(LoadBitmap(path1, file1))

 

[Ivan Aldaz]

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]

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.

    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]

With double tap you can zoom in (or out) of area image.

Can you modify with only one tap ?

 

[Ivan Aldaz]

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]

@Croid, you can change zoom with only one tap with this code:

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

 

[Croïd]

@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)

 

[Ivan Aldaz]

Try this:

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]

Hi again. Does anybody know how to detect the double-tap event? Or when zoom changes?

 

[CaptKronos]

Just in case anyone needs to determine the tap location within the image:

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

 

[mprimus]

please can you give me an idea how to draw on zoomed images?