B4J Question Fit image center imageview

Douglas Farias

Expert
Licensed User
Longtime User
hi all, how can i fit a image at center of my image view on b4j?
i dont find
dim lala as rect <<

how to convert this code
ImageView Bitmap centered

to b4j to fit the image at center? i need make a crop center at the image

i m loading a image from my pc, the path and file name as in a list, this os working fine, but if the image its horizontal this is very strange
B4X:
Sub listaimagens_SelectedIndexChanged(Index As Int)
    Log(Index)
    Log(listaimagens.Items.Get(Index))
    Log(File.GetFileParent(listaimagens.Items.Get(Index)))
    Log(File.GetName(listaimagens.Items.Get(Index)))
    imgimagens.PreserveRatio = True
    imgimagens.SetImage(fx.LoadImageSample(File.GetFileParent(listaimagens.Items.Get(Index)), File.GetName(listaimagens.Items.Get(Index)),imgimagens.Width, imgimagens.Height))
End Sub
 

stevel05

Expert
Licensed User
Longtime User
The code you have linked to Draws on a canvas, you should be able to do the same in B4j using Canvas.DrawImage2
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
thx @stevel05
i make this
B4X:
Sub FitCenterBitmap(Imv As ImageView, Dir As String, FileName As String)
    Private bmp As Image = fx.LoadImage(Dir, FileName)
    Private cvs As Canvas
    cvs.Initialize(Imv)
    Dim rectDest As rect
    Dim delta As Int
    If bmp.Width / bmp.Height > Imv.Width / Imv.Height Then
        delta = (Imv.Height - bmp.Height / bmp.Width * Imv.Width) / 2
        rectDest.Initialize
        rectDest.left = 0
        rectDest.top = delta
        rectDest.right = Imv.Width
        rectDest.bottom = Imv.Height - delta
    Else
        delta = (Imv.Width - bmp.Width / bmp.Height * Imv.Height) / 2       
        rectDest.Initialize
        rectDest.left = delta
        rectDest.top = 0
        rectDest.right = Imv.Width - delta
        rectDest.bottom = Imv.Height
       
    End If
    'cvs.DrawImage( )
    cvs.DrawBitmap(bmp, Null, rectDest )
    Imv.Invalidate
End Sub

but i dont understand the
cvs.DrawBitmap(bmp, Null, rectDest )
how to translate this? on the b4j is cvs.DrawImage, and need x, y i dont understand this values
 
Upvote 0

stevel05

Expert
Licensed User
Longtime User
Using DrawImage2 with B4j requires discreet values for the source image and target location instead of a rectangle.

The source values will be from your loaded image (bmp) So : 0,0,bmp.width,bmp.height .

The Destination values are where in the canvas you want to draw it instead of using a rectangle as a target.

B4X:
    Dim bmp As Image = fx.LoadImage(File.DirAssets,"icon.png")
    Dim Left As Int = (canvas1.Width - bmp.Width) / 2
    Dim Top As Int = (canvas1.Height - bmp.Height) / 2
    canvas1.DrawImage2(bmp,0,0,bmp.Width,bmp.Height,Left,Top,bmp.Width,bmp.Height)

Will draw the icon.png at it's original size in the center of the canvas.
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
but how to load the image from canvas at the imageview?
i have try this
B4X:
    Private canvas1 As Canvas
    canvas1.Initialize("canvas")
    Dim bmp As Image = fx.LoadImage(File.GetFileParent(listaimagens.Items.Get(Index)) ,File.GetName(listaimagens.Items.Get(Index)) )
    Dim Left As Int = (canvas1.Width - bmp.Width) / 2
    Dim Top As Int = (canvas1.Height - bmp.Height) / 2
    canvas1.DrawImage2(bmp,0,0,bmp.Width,bmp.Height,Left,Top,bmp.Width,bmp.Height)
    imgimagens.SetImage(canvas1.Snapshot)
but dont work, any error..

in my case, i need to crop center the image on the imageview
i have try
imgimagens.SetImage(canvas1.Snapshot)
canvas1.Snapshot ' as image
 
Upvote 0

stevel05

Expert
Licensed User
Longtime User
The easiest way to do that would be to set the canvas to the size of the target image view, then draw the image on the canvas at the size you want, then just copy the canvas as you already have done:

B4X:
Dim bmp As Image = fx.LoadImage(File.DirAssets,"icon.png")
    Dim TargetWidth As Int = bmp.Width * 1.5
    Dim TargetHeight As Int = bmp.Height * 1.5
   
    Dim Left As Int = (canvas1.Width - TargetWidth) / 2
    Dim Top As Int = (canvas1.Height - TargetHeight) / 2
    canvas1.DrawImage2(bmp,0,0,bmp.Width,bmp.Height,Left,Top,TargetWidth,TargetHeight)
    imageview1.SetImage(canvas1.Snapshot)
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
its very strange, the code looks correct but dont show any image on the imageview o_O
and dont show any log error
 
Upvote 0

stevel05

Expert
Licensed User
Longtime User
If you don't want to draw the whole of the source image, you can change the source locations:

B4X:
    Dim TargetWidth As Int = bmp.Width * 1.5
    Dim TargetHeight As Int = bmp.Height * 1.5
   
    Dim Left As Int = (canvas1.Width - TargetWidth) / 2
    Dim Top As Int = (canvas1.Height - TargetHeight) / 2
    'Reduce the source dimension by 10 all round to get the center of the original image
    canvas1.DrawImage2(bmp,10,10,bmp.Width - 20,bmp.Height - 20,Left,Top,TargetWidth,TargetHeight)
    imageview1.SetImage(canvas1.Snapshot)
 
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
thx man, now this works fine, last question
how to give - zoom? this example give so much zoom at big images, i need to show the complete image at canvas.

look at image 1, is your example result,
look at image 2 is what i need, but dont know explain in english *-*
3 = original file
 

Attachments

  • 1.png
    1.png
    199.2 KB · Views: 491
  • 2.png
    2.png
    174.3 KB · Views: 406
  • 3.jpg
    3.jpg
    315.4 KB · Views: 323
Upvote 0

stevel05

Expert
Licensed User
Longtime User
OK, you want to keep the aspect ratio and draw the new image with the height of the target image view. You'll need to draw a background on the canvas before drawing the image:

Try this: (and file attached)

B4X:
    Dim bmp As Image = fx.LoadImage(File.DirAssets,"3.jpg")
   
    Dim Ratio As Float = imageview1.Height / bmp.Height
    Dim TargetHeight As Int = imageview1.Height
    Dim TargetWidth As Int = bmp.Width * Ratio
   
    'Draw a background onto the canvas before drawing the image
   
    Dim Left As Int = (canvas1.Width - TargetWidth) / 2
    Dim Top As Int = (canvas1.Height - TargetHeight) / 2
    canvas1.DrawImage2(bmp,0,0,bmp.Width,bmp.Height,Left,Top,TargetWidth,TargetHeight)
    imageview1.SetImage(canvas1.Snapshot)
 

Attachments

  • CIT1.zip
    303.3 KB · Views: 355
Upvote 0

Douglas Farias

Expert
Licensed User
Longtime User
thank you man, you can post this code on code snippets xD, here works perfect now thx again
 
Upvote 0
Top