Android Question Set semi transparency of a panel outside its contained image

Matteo Granatiero

Active Member
Licensed User
For the semi-transparency of the panel use:
B4X:
Dim cd As ColorDrawable
    cd.Initialize ( Colors.ARGB( 100, 0, 0, 0) , 5dip )
    Panel1.Background = cd

The problem is: if I load an image in the panel (which is smaller than the panel panel because I set Gravity.Center, how do I set the rest of the panel with semi-transparency without "coloring" the inside of the image?
I attach image to make the idea
 

Attachments

  • b4.png
    b4.png
    14.4 KB · Views: 263

Matteo Granatiero

Active Member
Licensed User
then, we have a panel with semi-transparent color and an image inside it. This image ("1.png") is a t-shirt and it is transparent inside, my problem is that if I insert this image in the panel I want the inside of the shirt to be transparent or the color inside is not that of the panel but of the form.
Sorry but I can't help you here. Read all your posts and still don't understand what you are trying to do.
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
Guess, I understood. Matteo wants to use transparent png and to make a "hole" in panel according t-shirt contours.
Well, android.graphics.Bitmap offers getPixels & setpixels methods. And this is enough to solve "any" task.

Meanwhile there are reasons to search more simple and fast solution.
Explain -

1) The set of png-files is fixed or you take these files from external sources (website etc)
2) An activity background has solid color ? This color is fixed or you change it in run time ?
 
Upvote 0

Matteo Granatiero

Active Member
Licensed User
Guess, I understood. Matteo wants to use transparent png and to make a "hole" in panel according t-shirt contours.
Well, android.graphics.Bitmap offers getPixels & setpixels methods. And this is enough to solve "any" task.

Meanwhile there are reasons to search more simple and fast solution.
Explain -

1) The set of png-files is fixed or you take these files from external sources (website etc)
2) An activity background has solid color ? This color is fixed or you change it in run time ?

you finally understood me.
Unfortunately, the images are taken from external sources, so there are so many images (50 images)
The background is nothing but a panel that uses the camera function, so it always changes
 
Upvote 0

Matteo Granatiero

Active Member
Licensed User
The t-shirt size is dynamic? If so then how do you calculate the size?

Check BitmapCreatorEffects. There is a DrawThrough method that allows you to draw one bitmap through another. You can probably use it to create the "hole".
The size of the t shirt is not dynamic, but I have many types of t-shirts, sweaters that have different sizes and shapes from the t shirt that I have attached
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
Your images are transparent and have closed contours. So algorithm can be following
1) load original image using LoadBitmap
2) retrive all pixels into array.
3) use algorithm similar "watering can" to replace transparent to semi-transparent color for pixels otside t-shirt.
4) calculate a location and scale a picture
5) create a bitmap for panel and mix it with scaled bitmap for image (getPixels/setPixels).

Not so complex, but at least 100-150 lines and it's necessary to think about performance.
 
Upvote 0

Matteo Granatiero

Active Member
Licensed User
Your images are transparent and have closed contours. So algorithm can be following
1) load original image using LoadBitmap
2) retrive all pixels into array.
3) use algorithm similar "watering can" to replace transparent to semi-transparent color for pixels otside t-shirt.
4) calculate a location and scale a picture
5) create a bitmap for panel and mix it with scaled bitmap for image (getPixels/setPixels).

Not so complex, but at least 100-150 lines and it's necessary to think about performance.
Would you be able to do it? Because I understood the idea but I could not apply it.
 
Upvote 0

Erel

Administrator
Staff member
Licensed User
create a bitmap for panel and mix it with scaled bitmap for image (getPixels/setPixels).
This will yield very bad performance. You need to use BitmapCreator instead.

Finding the contour is possible but it is not a simple task. You should instead fill the shirt shape and use BitmapCreatorEffects to draw through the shirt bitmap.
 
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
The OP's original bitmap is transparent inside and outside the "shirt" is there no "FloodFill" function in the BitmapCreator library they could use to fill in the outer surrounding area?

If there is a FloodFill function then they could draw the "inside", overlay the FloodFilled "shirt" and then return the combined result, basically what Semen suggested in https://www.b4x.com/android/forum/t...-its-contained-image.97623/page-2#post-615470.
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
Finding the contour is possible but it is not a simple task

Actually, relatively simple, At least, for me, because I used something similar in Windows.
Decided to check a performance. To execute getpixels for 1.png (100 * 100) requires 0,2 ms (!) in emulator of API 24.

With setpixels not so nice - bitmap (as result of B4A LoadBitmap) looks immutable.
Probably, it's not possible to avoid Bitmap.copy.
 
Upvote 0

Matteo Granatiero

Active Member
Licensed User
Actually, relatively simple, At least, for me, because I used something similar in Windows.
Decided to check a performance. To execute getpixels for 1.png (100 * 100) requires 0,2 ms (!) in emulator of API 24.



With setpixels not so nice - bitmap (as result of B4A LoadBitmap) looks immutable.
Probably, it's not possible to avoid Bitmap.copy.


could you tell me or forward the project?
 
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
First step - to select a zone inside "t-shirt".
Under my emulator (API 24) requires 60ms for all actions in Activity_Create
 

Attachments

  • test.zip
    11.6 KB · Views: 117
Upvote 0

Semen Matusovskiy

Well-Known Member
Licensed User
In general, there is one step only - to combine two bitmaps and to set united bitmap to panel. It's very simple, but requires an accuracy.
ImageView will be removed at all.
 
Upvote 0
Top