Canvas drawing

C

cammel8

Member
Licensed User
Longtime User
OK, so I made my app and everything is working just fine. Now I want to add the ability to draw in the app. Think about watching a football game. When the commentator draws on the T.V. with his teleprompter thing. I have checked a lot of the tutorials and I cannot just find a tutorial that explains just the drawing of a line on a canvas using touch. The closest I found was erels tutorial on signature capture but when I take out the signature stuff it no longer works. All I need to know is how to draw a simple line over an image.



Any help would be appreciated.
 
Sort by date Sort by votes
Informatix

Informatix

Expert
Licensed User
Longtime User
cammel8 said:
OK, so I made my app and everything is working just fine. Now I want to add the ability to draw in the app. Think about watching a football game. When the commentator draws on the T.V. with his teleprompter thing. I have checked a lot of the tutorials and I cannot just find a tutorial that explains just the drawing of a line on a canvas using touch. The closest I found was erels tutorial on signature capture but when I take out the signature stuff it no longer works. All I need to know is how to draw a simple line over an image.



Any help would be appreciated.
Click to expand...

Take a look at the Gestures library.
 
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
Informatix said:
Take a look at the Gestures library.
Click to expand...

first off Informatix, your my freakin hero right now just in case you were wondering.

So now onto my next issue. OK, I got it working but now when I try to erase it wont erase. I have tried:

B4X: 
Panel1.Color=Colors.Transparent
Canvas1.Initialize(Panel1)

I have also tried:

B4X: 
Panel1.SetBackgroundImage(table)
Canvas1.Initialize(Panel1)

I also tried :

B4X: 
Panel1.RemoveView
Activity.AddView(Panel1,13%x,0,93%x,100%y)

I even tried :

B4X: 
Panel1.RemoveView
Activity.AddView(Panel1,13%x,0,93%x,100%y)
Panel1.SetBackgroundImage(table)
Canvas1.Initialize(Panel1)

then I tried combining everything into one and tried that:

B4X: 
Panel1.Color=Colors.Transparent
Canvas1.Initialize(Panel1)
Panel1.RemoveView
Activity.AddView(Panel1,13%x,0,93%x,100%y)
Panel1.SetBackgroundImage(table)
Canvas1.Initialize(Panel1)

I also tried invalidating panel1 too but I don't have the code I used for it.

Now I have no idea what to try from here. Any ideas?
 
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
thedesolatesoul said:
You are going the wrong route for erasing.

You should just draw a transparent rectange over the whole thing.

B4X: 
Dim r as Rect
r.Initialize(0,0,Panel1.Width,Panel1.Height)
Canvas1.DrawRect(r,colors.Transparent,True,1)
Canvas1.Invalidate
Click to expand...

I tried this and it throws a error for the line canvas1.invalidate. When I look at the possible members for canvas it does not even list invalidate as a member. I tried invalidating the panel1 instead thinking maybe that was it but it don't work either. Any ideas?
 
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
NJDude said:
Take a look at the attached sample, contains a very simple drawing/clearing routine.
Click to expand...

ok i used :

B4X: 
DestRect.Initialize(0dip, 0dip, 100%x, 100%y)
Canvas1.DrawRect(DestRect, Colors.Transparent, True, 1dip)
Panel1.Invalidate

Still doesnt work


I am including a copy of my code if someone can figure it out and let me know. Cause i am at wits end. Its gotta be something i am missing but after hours of trying different thinkgs its gotta be something im doing wrong. I am using all the Suggestions i have found so far and not of them work.

B4X: 
Activity.LoadLayout("1")
Activity.Title = ("Pool Whiteboard") 
Activity.TitleColor = Colors.Black

Panel1.RemoveView
Activity.AddView(Panel1,13%x,0,93%x,100%y)
Cue_panel.RemoveView
Activity.AddView(Cue_panel,0,0,20%x,35%y)
#End Region
#Region Add balls

cueball_float.Initialize(Panel1,7%x,0,3.75%x,6%y,Me)
cueball_float.EnableTitleBar(False)
Dim cueballbit As BitmapDrawable 
   cueballbit.Initialize(LoadBitmap(File.DirAssets, "cue.png"))
cueball_float.SetBackground(cueballbit)
cueball_float.SetBorder(Colors.Transparent,0)
cueball_float.StillVisible = 170
cueball_float.TouchSlop=0

oneball_float.Initialize(Panel1,12%x,0,3.75%x,6%y,Me)
oneball_float.EnableTitleBar(False)
Dim oneballbit As BitmapDrawable 
   oneballbit.Initialize(LoadBitmap(File.DirAssets, "1.png"))
oneball_float.SetBackground(oneballbit)
oneball_float.SetBorder(Colors.Transparent,0)
oneball_float.StillVisible = 170
oneball_float.TouchSlop=0

twoball_float.Initialize(Panel1,17%x,0,3.75%x,6%y,Me)
twoball_float.EnableTitleBar(False)
Dim twoballbit As BitmapDrawable 
   twoballbit.Initialize(LoadBitmap(File.DirAssets, "2.png"))
twoball_float.SetBackground(twoballbit)
twoball_float.SetBorder(Colors.Transparent,0)
twoball_float.StillVisible = 170
twoball_float.TouchSlop=0

threeball_float.Initialize(Panel1,22%x,0,3.75%x,6%y,Me)
threeball_float.EnableTitleBar(False)
Dim threeballbit As BitmapDrawable 
   threeballbit.Initialize(LoadBitmap(File.DirAssets, "3.png"))
threeball_float.SetBackground(threeballbit)
threeball_float.SetBorder(Colors.Transparent,0)
threeball_float.StillVisible = 170
threeball_float.TouchSlop=0

fourball_float.Initialize(Panel1,27%x,0,3.75%x,6%y,Me)
fourball_float.EnableTitleBar(False)
Dim fourballbit As BitmapDrawable 
   fourballbit.Initialize(LoadBitmap(File.DirAssets, "4.png"))
fourball_float.SetBackground(fourballbit)
fourball_float.SetBorder(Colors.Transparent,0)
fourball_float.StillVisible = 170
fourball_float.TouchSlop=0

fiveball_float.Initialize(Panel1,32%x,0,3.75%x,6%y,Me)
fiveball_float.EnableTitleBar(False)
Dim fiveballbit As BitmapDrawable 
   fiveballbit.Initialize(LoadBitmap(File.DirAssets, "5.png"))
fiveball_float.SetBackground(fiveballbit)
fiveball_float.SetBorder(Colors.Transparent,0)
fiveball_float.StillVisible = 170
fiveball_float.TouchSlop=0

sixball_float.Initialize(Panel1,37%x,0,3.75%x,6%y,Me)
sixball_float.EnableTitleBar(False)
Dim sixballbit As BitmapDrawable 
   sixballbit.Initialize(LoadBitmap(File.DirAssets, "6.png"))
sixball_float.SetBackground(sixballbit)
sixball_float.SetBorder(Colors.Transparent,0)
sixball_float.StillVisible = 170
sixball_float.TouchSlop=0

sevenball_float.Initialize(Panel1,42%x,0,3.75%x,6%y,Me)
sevenball_float.EnableTitleBar(False)
Dim sevenballbit As BitmapDrawable 
   sevenballbit.Initialize(LoadBitmap(File.DirAssets, "7.png"))
sevenball_float.SetBackground(sevenballbit)
sevenball_float.SetBorder(Colors.Transparent,0)
sevenball_float.StillVisible = 170
sevenball_float.TouchSlop=0

eightball_float.Initialize(Panel1,47%x,0,3.75%x,6%y,Me)
eightball_float.EnableTitleBar(False)
Dim eightballbit As BitmapDrawable 
   eightballbit.Initialize(LoadBitmap(File.DirAssets, "8.png"))
eightball_float.SetBackground(eightballbit)
eightball_float.SetBorder(Colors.Transparent,0)
eightball_float.StillVisible = 170
eightball_float.TouchSlop=0

nineball_float.Initialize(Panel1,52%x,0,3.75%x,6%y,Me)
nineball_float.EnableTitleBar(False)
Dim nineballbit As BitmapDrawable 
   nineballbit.Initialize(LoadBitmap(File.DirAssets, "9.png"))
nineball_float.SetBackground(nineballbit)
nineball_float.SetBorder(Colors.Transparent,0)
nineball_float.StillVisible = 170
nineball_float.TouchSlop=0

tenball_float.Initialize(Panel1,57%x,0,3.75%x,6%y,Me)
tenball_float.EnableTitleBar(False)
Dim tenballbit As BitmapDrawable 
   tenballbit.Initialize(LoadBitmap(File.DirAssets, "10.png"))
tenball_float.SetBackground(tenballbit)
tenball_float.SetBorder(Colors.Transparent,0)
tenball_float.StillVisible = 170
tenball_float.TouchSlop=0

elevenball_float.Initialize(Panel1,62%x,0,3.75%x,6%y,Me)
elevenball_float.EnableTitleBar(False)
Dim elevenballbit As BitmapDrawable 
   elevenballbit.Initialize(LoadBitmap(File.DirAssets, "11.png"))
elevenball_float.SetBackground(elevenballbit)
elevenball_float.SetBorder(Colors.Transparent,0)
elevenball_float.StillVisible = 170
elevenball_float.TouchSlop=0

twelveball_float.Initialize(Panel1,67%x,0,3.75%x,6%y,Me)
twelveball_float.EnableTitleBar(False)
Dim twelveballbit As BitmapDrawable 
   twelveballbit.Initialize(LoadBitmap(File.DirAssets, "12.png"))
twelveball_float.SetBackground(twelveballbit)
twelveball_float.SetBorder(Colors.Transparent,0)
twelveball_float.StillVisible = 170
twelveball_float.TouchSlop=0

thirteenball_float.Initialize(Panel1,72%x,0,3.75%x,6%y,Me)
thirteenball_float.EnableTitleBar(False)
Dim thirteenballbit As BitmapDrawable 
   thirteenballbit.Initialize(LoadBitmap(File.DirAssets, "13.png"))
thirteenball_float.SetBackground(thirteenballbit)
thirteenball_float.SetBorder(Colors.Transparent,0)
thirteenball_float.StillVisible = 170
thirteenball_float.TouchSlop=0

fourteenball_float.Initialize(Panel1,77%x,0,3.75%x,6%y,Me)
fourteenball_float.EnableTitleBar(False)
Dim fourteenballbit As BitmapDrawable 
   fourteenballbit.Initialize(LoadBitmap(File.DirAssets, "14.png"))
fourteenball_float.SetBackground(fourteenballbit)
fourteenball_float.SetBorder(Colors.Transparent,0)
fourteenball_float.StillVisible = 170
fourteenball_float.TouchSlop=0

fifteenball_float.Initialize(Panel1,82%x,0,3.75%x,6%y,Me)
fifteenball_float.EnableTitleBar(False)
Dim fifteenballbit As BitmapDrawable 
   fifteenballbit.Initialize(LoadBitmap(File.DirAssets, "15.png"))
fifteenball_float.SetBackground(fifteenballbit)
fifteenball_float.SetBorder(Colors.Transparent,0)
fifteenball_float.StillVisible = 170
fifteenball_float.TouchSlop=0


reddot_float.Initialize(Cue_panel,7.495%x,14.5%y,5%x,6%y,Me)
reddot_float.EnableTitleBar(False)
Dim reddotballbit As BitmapDrawable 
   reddotballbit.Initialize(LoadBitmap(File.DirAssets, "reddot.png"))
reddot_float.SetBackground(reddotballbit)
reddot_float.SetBorder(Colors.Transparent,0)
reddot_float.StillVisible = 55
reddot_float.TouchSlop=0
 

#End Region
#Region removeviews

oneball.RemoveView
twoball.RemoveView
threeball.RemoveView
fourball.RemoveView
fiveball.RemoveView
sixball.RemoveView
sevenball.RemoveView
eightball.RemoveView
nineball.RemoveView
tenball.RemoveView
elevenball.RemoveView
thelveball.RemoveView
thirteenball.RemoveView
fourteenball.RemoveView
fifteenball.RemoveView
cueball.RemoveView

#End Region
#Region rotatestick

   bmp = LoadBitmap(File.DirAssets, "poolcue.png")
   ivRotateCue.Initialize("")
   ivRotateCue.Gravity = Gravity.NO_GRAVITY

   Activity.AddView(ivRotateCue, 10, 50%y, bmp.Width * Density, bmp.Height * Density)
   Dim r As Reflector
   r.Target = ivRotateCue
   r.SetOnTouchListener("CueTouch")
   angle = MinAngle
   ivRotateCue.SetBackgroundImage(bp.Rotate(bmp, bmp.Width, bmp.Height, angle, True))
   angleLbl.Initialize("")
   Activity.AddView(angleLbl,0,90%y,20%x,70%y)
#End Region

   Canvas1.Initialize(Panel1) 'Initialize the canvas (drawer) and makes it draw on the activity (form).
   ClearBtn.Initialize(ClearBtn)
   Activity.AddView(ClearBtn,0,30%y, 150dip, 40dip)
Sub panel1_Touch(Action As Int, tx As Float, ty As Float)
    Canvas1.DrawCircle(tx, ty,5dip, Colors.white, True, 2dip)
    Panel1.Invalidate3(tx - 7dip, ty - 7dip, tx + 7dip, ty + 7dip)
End Sub
Sub clearbtn_Click
Dim DestRect As Rect

            DestRect.Initialize(0dip, 0dip, 100%x, 100%y)
            
            Canvas1.DrawRect(DestRect, Colors.Transparent, True, 1dip)
         
            Panel1.Invalidate


'Dim r As Rect
'r.Initialize(0,0,Panel1.Width,Panel1.Height)
'Canvas1.DrawRect(r,Colors.Transparent,True,1)
'Panel1.Invalidate

'   Panel1.Color=Colors.Transparent
'   Canvas1.Initialize(Panel1)
'   
   'Dim table As Bitmap
   'table.Initialize(File.DirAssets,"table.png")
'   Panel1.RemoveView
'   Activity.AddView(Panel1,13%x,0,93%x,100%y)
'   Panel1.SetBackgroundImage(table)
'   Canvas1.Initialize(Panel1)
End Sub
 
Last edited:
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
i figured it out. It was all the pictures i had in it that where so big i deleted all the pictures and now it fits so here it is.
 
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
OK So I am still stuck on this part where I need to erase. I have been working on this now for six hours straight. reading every tutorial i can find and trying new things. I truly am at wits end. I cant for the life of me figure out whats wrong. I have come to the conclusion that the app I'm making truly hates me. If there is anyone out there that can look over the code for me and figure out whats wrong I would really appreciate it. Thanks in advance.
 
Upvote 0
klaus

klaus

Expert
Licensed User
Longtime User
Unfortunately we cannot test your program without the images.
Are the images big?
You could try to make a second zip file with the images.

From what i've seen in your code you should try to use
B4X: 
Dim rectPanel1 as Rect
rectPanel1.Initialize(0, 0, Panel1.Width, Panel1.Height)
Canvas1.DrawBitmap(LoadBitmap(File.DirAssets, "table.png"), Null, rectPanel1)
rectPanel1.Invalidate
If you want 'rubber banding' graphics you'll need a second panel for the temporary drawing.

Attached a small test program.

Best regards.
 

Attachments

  • DrawPanel.zip
    34.6 KB · Views: 572
Upvote 0
C

cammel8

Member
Licensed User
Longtime User
Informatix said:
I found. The problem was in the button initialization. Replace it by:
B4X: 
ClearBtn.Initialize("clearbtn")

Here's the simplest code to erase your canvas:
B4X: 
Sub clearbtn_Click
   Canvas1.DrawColor(Colors.Transparent)
   Panel1.Invalidate
End Sub
Click to expand...

I knew it had t be something stupid. I tried for hours all different kinds of stuff and never even thought to look if I had initialized the button correctly. That's a six hour lesson well learned. Thank you so much.
 
Upvote 0
You must log in or register to reply here.
Top