B4A Library JSTouchImageView Library - pinch, pan & zoom image

SNOUHyhQs2 · Nov 19, 2016

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

johndb · Nov 19, 2016

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

SNOUHyhQs2 · Nov 19, 2016

johndb said:
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 · Nov 19, 2016

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 · Nov 19, 2016

moster67 said:
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 · Jun 25, 2017

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

SNOUHyhQs2 · Jun 26, 2017

Ivan Aldaz said:
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 · Jun 27, 2017

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 · Jul 1, 2017

How to use the scale function ?

Ivan Aldaz · Jul 1, 2017

Croïd said:
How to use the scale function ?

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

B4X:

imv.setScaleType(imv.SCALE_TYPE_CENTER_INSIDE)

The same to set bitmap:

B4X:

imv.setImageBitmap(LoadBitmap(path1, file1))

Ivan Aldaz · Jul 1, 2017

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 · Jul 2, 2017

Ivan Aldaz said:
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 · Jul 2, 2017

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

Can you modify with only one tap ?

Ivan Aldaz · Jul 2, 2017

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 · Jul 2, 2017

@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 · Jul 2, 2017

Ivan Aldaz said:
@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 · Jul 2, 2017

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 · Jul 3, 2017

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

CaptKronos · Feb 15, 2018

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

mprimus · Feb 15, 2018

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

B4A Library JSTouchImageView Library - pinch, pan & zoom image

Attachments

Active Member

Member

Expert

Member

Member

Member

Member

Active Member

Member

Member

Member

Active Member

Member

Member

Active Member

Member

Member

Active Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency