Merging ImageView's Bitmaps into one

[Cableguy]

I've been for the past hour trying to merge two Imageviews into one...
I Know I need to use the canvas, but is the how that escapes me...

I have Imageview1, wich is, by a canvas, the left-most part of a wider image...
In Imageview2 I have a "simple" image... Now I wanht to merge the "visible" parte of Imageview1 with imageview2...

Both files are png with alpha(transparent) areas...
So what I am doing is initializing the canvas with Imageview1, wich should cipy the backgroung on it into the canvas, and then using drawBitmap, I am Loading the Imageview2 bitmap file, again, into the canvas...
My result is only partially correct...I do get the Loaded file into the canvas...but the Imageview1 backgroung, that should have been copied in the initialization, is lost...

Is there any actual examples of this done???

 

[klaus]

Could you show the code you used ?
How did you load the initial image of ImageView1 ?
Is the bigger image a bitmap ?

I see it that way with csvImageView1, the canvas of ImageView1, you should copy the 'visible' part of the big image with csvImageView1.DrawImage and then add also with csvImageView1.DrawImage copy the second image.

The code below does it:

Sub Globals
    Dim ImageView1, ImageView2 As ImageView
    Dim bmpImage As Bitmap
    Dim btnCopy As Button
    Dim cvsImageView1 As Canvas
    Dim rectSrc, rectDest As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ImageView1.Initialize("")
    Activity.AddView(ImageView1,10dip, 10dip, 310dip, 310dip)

    ImageView2.Initialize("")
    Activity.AddView(ImageView2,200dip, 320dip, 60dip, 60dip)
    ImageView2.Bitmap = LoadBitmap(File.DirAssets, "btngps0.png")

    btnCopy.Initialize("btnCopy")
    Activity.AddView(btnCopy,10dip, 320dip, 60dip, 60dip)
    btnCopy.Text = "Copy"

    bmpImage.Initialize(File.DirAssets, "Rose1.jpg")
    cvsImageView1.Initialize(ImageView1)

    rectSrc.Initialize(0, 0, 300, 300)
    rectDest.Initialize(0, 0, 300dip, 300dip)
    cvsImageView1.DrawBitmap(bmpImage, rectSrc, rectDest)

End Sub

Sub btnCopy_Click
    rectSrc.Initialize(0, 0, 60, 60)
    rectDest.Initialize(100dip, 100dip, 160dip, 160dip)
    cvsImageView1.DrawBitmap(ImageView2.Bitmap, rectSrc, rectDest)
    ImageView1.Invalidate
End Sub

Attached the test project.

EDIT: 2014.06.03 amended some bugs reported in post #6.

Best regards.

 

[Cableguy]

I've managed to, going throu very small steps, to arrive to my goal...and managed to merge the two images...
Now I have a hole new problem...

I have, as I said, a wider than the screen image, that I load to a Bitmap object, and then set that to be an Imageview, sized to the bitmap size* the density, so that I could still have the same ratio of my image ( originaly a xxx*480pixel image)...
I am using this with an animaion, so I slide the imageview from one side to the other of the screen...This works very well in either of my current 3 devices.. a 320x480x1, a 480x600x1 and my SGS, wich is 480x600x1,5)
Then I show a 320x380pixel image, resised to FILL, over the current imageview last position... and this is what I want to merge, so I defined two rectangles as needed by the canvas drawbitmap... and THIS is whats very odd to me...
I can get the images to merge, BUT my rectangles ( shown image) is very diferent from the density 1 devices to the SGS...
I cant work out were I am going wrong...

These are my rectangles:
Dim SRect As Rect ' The source
SRect.Initialize(ImageView1.Width-Activity.Width,0,Imageview1.Width,Image1.Height)
Dim DRect As Rect ' The destination
Drect.Initialize(0,0,320dip,480dip)

In the iitial imageview1( wich is the wider one) I set Left value like:
Imageview1.Left = Activity.Width-Imageview1.Width
So that I only show the left-most portion of my image

Were is that my Math is wrong????

 

[klaus]

Imageview1.Left = Activity.Width-Imageview1.Width shows the right most part of the image !
Imageview1.Left = 0 shows the left most part of the image !
If you set DRect.Initialize(0,0, Imageview1.Width, Imageview1.Height)
You draw on the left most part of ImageView1.
If you want to draw somewhere else in ImageView1 you must change the Left and Right parameters.

Best regards.

 

[Cableguy]

I meant Right-most and wrote left most... my bad...
Anyway that is not my issue... my issue is defining the source rectangle and it is puzzling me...

EDIT: It took me some eating time, and some stepping to figure out the best way to debug/code my intention...
Going one step at a time, and eliminating some useless/retundant code, I have managed to merge my two images in the correct position..
My problem was that my "base" image eas a WIDE one, an only the Right-Most part of it was visible after a short animation...and it was within THAT part of the image I wanted to merge my second one...
Thanks for trying to help, Klaus, and even though I didn't use any of your coe/ suggestios, you got me thinking in the Right direction..

 

[Johan Schoeman]

Could you show the code you used ?
How did you load the initial image of ImageView1 ?
Is the bigger image a bitmap ?

I see it that way with csvImageView1, the canvas of ImageView1, you should copy the 'visible' part of the big image with csvImageView1.DrawImage and then add also with csvImageView1.DrawImage copy the second image.

The code below does it:

Sub Globals
    Dim ImageView1, ImageView2 As ImageView
    Dim bmpImage As Bitmap
    Dim btnCopy As Button
    Dim cvsImageView1 As Canvas
    Dim rectSrc, rectDest As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ImageView1.Initialize("")
    Activity.AddView(ImageView1,10dip, 10dip, 310dip, 310dip)
   
    ImageView2.Initialize("")
    Activity.AddView(ImageView2,200dip, 320dip, 60dip, 60dip)
    ImageView2.Bitmap = LoadBitmap(File.DirAssets, "btngps0.png")

    btnCopy.Initialize("btnCopy")
    Activity.AddView(btnCopy,10dip, 320dip, 60dip, 60dip)
    btnCopy.Text = "Copy"
   
    bmpImage.Initialize(File.DirAssets, "Rose1.jpg")
    cvsImageView1.Initialize(ImageView1)
   
    rectSrc.Initialize(0, 0, 300, 300)
    rectDest.Initialize(0, 0, 300, 300)
    cvsImageView1.DrawBitmap(bmpImage, rectSrc, rectDest)
   
End Sub

Sub btnCopy_Click
    rectSrc.Initialize(0, 0, 60dip, 60dip)
    rectDest.Initialize(100dip, 100dip, 160dip, 160dip)
    cvsImageView1.DrawBitmap(ImageView2.Bitmap, rectSrc, rectDest)
End Sub

Attached the test project.

Best regards.

Hi Klaus, clicking on copy does not show the two pics combined into one. Should the sub not be:

Sub btnCopy_Click

rectSrc.Initialize(0, 0, 60dip, 60dip)
rectDest.Initialize(100dip, 100dip, 160dip, 160dip)
cvsImageView1.DrawBitmap(ImageView2.Bitmap, rectSrc, rectDest)
ImageView1.Invalidate

End Sub

It then shows the combined effect. Just asking. But very useful and thanks for this post!

 

[klaus]

You are right !
I amended the zip file in post #2.
I removed the dip from the values in the rectSrc initializations.