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: 1,039
Last edited:

Ivan Aldaz

Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
The following approach is pretty straightforward.

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

Expert
Licensed User
Longtime User
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.
 
Hi, how do I fix this error?
B4X:
Error in G:\sdk\tools\..\extras\b4a_local\unpacked-jstouchimageview.androidx-63707868678000\dex_v1\jstouchimageview.zip:classes.dex:
Type com.ortiz.touch.TouchImageView$DoubleTapZoom is defined multiple times: G:\sdk\tools\..\extras\b4a_local\unpacked-jstouchimageview.androidx-63707868678000\dex_v1\jstouchimageview.zip:classes.dex, D:\MyFiles\project\project\NewSourcev1\v1\project\Objects\dexed\com\ortiz\touch\TouchImageView$DoubleTapZoom.dex
Compilation failed
Exception in thread "main" java.lang.RuntimeException: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, origin: G:\sdk\tools\..\extras\b4a_local\unpacked-jstouchimageview.androidx-63707868678000\dex_v1\jstouchimageview.zip:classes.dex
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:98)
    at com.android.tools.r8.D8.main(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:4)
Caused by: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, origin: G:\sdk\tools\..\extras\b4a_local\unpacked-jstouchimageview.androidx-63707868678000\dex_v1\jstouchimageview.zip:classes.dex
    at Version.fakeStackEntry(Version_3.3.20-dev+aosp1.java:0)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:75)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:28)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:27)
    at com.android.tools.r8.internal.vj.b(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:2)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:17)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:85)
    ... 1 more
Caused by: com.android.tools.r8.internal.f: Type com.ortiz.touch.TouchImageView$DoubleTapZoom is defined multiple times: G:\sdk\tools\..\extras\b4a_local\unpacked-jstouchimageview.androidx-63707868678000\dex_v1\jstouchimageview.zip:classes.dex, D:\MyFiles\project\project\NewSourcev1\v1\project\Objects\dexed\com\ortiz\touch\TouchImageView$DoubleTapZoom.dex
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:14)
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.internal.cN.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:36)
    at com.android.tools.r8.internal.cN.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:10)
    at java.base/java.util.concurrent.ConcurrentHashMap.merge(ConcurrentHashMap.java:2048)
    at com.android.tools.r8.internal.cN.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:6)
    at com.android.tools.r8.graph.E2$a.e(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:4)
    at com.android.tools.r8.dex.b.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:105)
    at com.android.tools.r8.dex.b.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:28)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:25)
    at com.android.tools.r8.D8.d(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:609)
    at com.android.tools.r8.D8.c(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:1)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:24)
    ... 5 more
 

CaptKronos

Active Member
Licensed User
Longtime User
I suggest you start a new thread to ask your question. But I can confirm I am still using this library on the latest version of Android with the latest version of B4A, and it still works. Produce the smallest possible test project which shows your problem and post it in a new thread.
 
Top