Android Question panel with a transparent hole

klaus

Expert

Licensed User

Longtime User

• Sep 6, 2014

• #2

Have a look at the Beginner's Guide chapter 15.2.3 Simple draw functions.
There you have a picture and on top a panel with a round hole which can be moved, you could use a Path instead of the circle.
The source code is included in the guide zip file.

 

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 6, 2014

• #3

Task is to have the picture container of non-rectangled shape.

 

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Sep 6, 2014

• #4

Could you be more precise on what you want to do.
First post: Is that possible to have a panel (containing a picture) with some custom shaped transparent hole ?
Second post: Task is to have the picture container of non-rectangled shape.
One time it's a custom shaped transparent hole and the second time a custom shaped picture ?

 

Upvote 0

LucaMs

Expert

Licensed User

Longtime User

• Sep 6, 2014

• #5

http://www.b4x.com/android/forum/threads/draw-round-bitmap.41240/

 

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #6

Seems, i could not get what wanted.
Let's say more sharp: how to show one picture in a circle (like in the transparent hole) over another picture background ?
It looks like you see through the hole in the door. Door is pictured, and in the hole picture is changed.

Klaus' layer0, if not grey, but with a picture - is not transparent.
So, in Klaus' sample "SimpleDrawFunctions" - if grey mask is replaced by some loaded picture, and round "hole" with another picture over it - this is the task.

 

Last edited: Sep 7, 2014

Upvote 0

S

strat

Active Member

Licensed User

Longtime User

• Sep 7, 2014

• #7

If you use two panels and two picture, it is simple. For this, you have to understand how you can create a transparent picture. I uploaded two images here. You can use these pictures.

Assign the pictures to the panels and use this code.

B4X:

panel2.color=colors.transparent

I assume panel2 is at the top.
If you want draw shapes runtime, you must use trasnparent color on the top panel.

 

Attachments

• 1.jpg

  56.8 KB · Views: 293
• 2.png

  2 KB · Views: 304

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #8

See the left-top corner - i need this. This is not working sample yet.

 

Attachments

• Clipboard01.png

  223.3 KB · Views: 314

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #9

LucasMs, thanks for http://www.b4x.com/android/forum/threads/draw-round-bitmap.41240/
finally i've make that i wanted by this sample.
Slow for whole the screen, but enough.

B4X:

Sub CreateBitmap As Canvas
Dim bmp As Bitmap
bmp.InitializeMutable(100%x, 100%y)     ' !!!
Dim cvs As Canvas
cvs.Initialize2(bmp)
Dim r As Rect
r.Initialize(0, 0, bmp.Width, bmp.Height)
cvs.DrawRect(r, Colors.Transparent, True, 0)
Dim p As Path
p.Initialize(0, 0)
Dim jo As JavaObject = p

Dim radius = 50dip, x, y As Float
x = CurX
y = CurY

jo.RunMethod("addCircle", Array As Object(x, y, radius, "CW"))
cvs.ClipPath(p)
Return cvs
End Sub

Sub pnl_Touch (Action As Int, X As Float, Y As Float)
CurX = X
CurY = Y
Draw
End Sub

 

Upvote 0

LucaMs

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #10

so?

 

Attachments

• lm Hole.zip

  212.9 KB · Views: 271

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #11

LucaMs said:

so?

Click to expand...

So... you are the expert indeed, like Erel the Master
thanks.

Just enough

B4X:

Sub pnl_Touch (Action As Int, X As Float, Y As Float)
Private cnv As Canvas
pnl.SetBackgroundImage(LoadBitmap(File.DirAssets, "banner.jpg"))
cnv.Initialize(pnl)
cnv.DrawCircle(X, Y, 60dip, Colors.Transparent, True, -1)
End Sub

 

Last edited: Sep 7, 2014

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #12

Is this what you are looking for ?
You can move the background image with the finger.

 

Attachments

• LookThroughDoor.png

  219.2 KB · Views: 259
• LookThroughDoor.zip

  284 KB · Views: 340

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 7, 2014

• #13

Yes ! I already made so with just simple round hole
But your variant is more universal, Klaus !

It's for app to compare pictures.

 

Last edited: Sep 7, 2014

Upvote 0

peacemaker

Expert

Licensed User

Longtime User

• Sep 8, 2014

• #14

Here is the app i needed to do
Comparing two pictures: choose a new wallpaper coparing to the old one, for ex.

 

Attachments

• newppr_v.0.2.apk

  160.3 KB · Views: 256
• 01.png

  427.7 KB · Views: 328
• 02.png

  379.4 KB · Views: 336

Last edited: Sep 8, 2014

Upvote 0