B4J Question Fit image center imageview

Douglas Farias

Expert
Licensed 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
The code you have linked to Draws on a canvas, you should be able to do the same in B4j using Canvas.DrawImage2
 

Douglas Farias

Expert
Licensed 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
 

stevel05

Expert
Licensed 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.
 

Douglas Farias

Expert
Licensed 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
 

stevel05

Expert
Licensed 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)
 

stevel05

Expert
Licensed 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)
 

Douglas Farias

Expert
Licensed 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

stevel05

Expert
Licensed 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

Top