B4J Question [Solved] How do I erase the red dot on the canvas?

[Mark Read]

I feel pretty stupid asking but this is my first attempt with graphics. I have two canvas views on top of each other. The lower one has a grid, the upper a red dot. With the mouse I move the red dot around but it whites out the grid underneath. I tried to make the "old" dot transparent but then I get a trail. How do I erase the old dot whilst keeping the grid visible and intact?

Sub Class_Globals
    Private Root As B4XView
    Private fx As JFX
    Private xui As XUI
    Private Canvas1 As Canvas
    Private ColorFormBackground = fx.Colors.White As Paint
    Private ColorBall = fx.Colors.Red As Paint
    Private ox, oy, nx, ny As Double
'    Private BallWidth, BallHeight, BallRadius As Double
    Private BallRadius As Double
    Private GridCanvas As Canvas
    Private indent As Int=30
End Sub

Public Sub Initialize
'    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    
'    BallWidth=10
'    BallHeight=10
    BallRadius=5
    ox=Canvas1.Width/2
    oy=Canvas1.Height/2
'    Canvas1.DrawRect(ox, oy,BallWidth,BallHeight,ColorBall,True,1)
    Canvas1.DrawCircle(ox, oy,BallRadius,ColorBall,True,1)
    'Canvas1.Visible=False
    DrawGrid
End Sub

'You can see the list of page related events in the B4XPagesManager object. The event name is B4XPage.

Sub DrawGrid
    'Remember 0,0 is top left
    'GridCanvas.DrawLine(GridCanvas.Left+indent,GridCanvas.top+indent,GridCanvas.Left+indent,GridCanvas.Height-indent,fx.Colors.Black,1)
    'GridCanvas.DrawLine(GridCanvas.Left+indent,GridCanvas.Height-indent,GridCanvas.Width,GridCanvas.Height-indent,fx.Colors.Black,1)
    For c=1 To Floor(GridCanvas.Width/indent)-1
        'Draw Y-Lines
        GridCanvas.DrawLine(GridCanvas.Left+(indent*c),GridCanvas.top+indent,GridCanvas.Left+(indent*c),GridCanvas.Height-indent,fx.Colors.Black,1)
        'Draw X-Lines
        GridCanvas.DrawLine(GridCanvas.Left+indent,GridCanvas.Height-(indent*c),GridCanvas.Width,GridCanvas.Height-(indent*c),fx.Colors.Black,1)
    Next
End Sub



Private Sub Canvas1_MousePressed (EventData As MouseEvent)
'    ox = EventData.X
'    oy = EventData.Y
'    Log("Pressed: " & ox & "," & oy)   
End Sub

Private Sub Canvas1_MouseDragged (EventData As MouseEvent)
    nx = EventData.X
    ny = EventData.Y
    
    'Check boundaries
    If nx<indent Then nx=indent
    If nx>Canvas1.Width Then nx=Canvas1.Width
    If ny<0 Then ny=0
    If ny>Canvas1.Height-indent Then ny=Canvas1.Height-indent
    
'    Log("Dragged: " & nx & "," & ny)
'    Canvas1.DrawRect(ox-2, oy-2,BallWidth+4,BallHeight+4,ColorFormBackground,True,1)
    Canvas1.DrawCircle(ox-2, oy-2,BallRadius+4,ColorFormBackground,True,1)    'erase old ball
    ox=nx
    oy=ny
'    Canvas1.DrawRect(nx, ny,BallWidth,BallHeight,ColorBall,True,1)
    Canvas1.DrawCircle(nx, ny,BallRadius,ColorBall,True,1)                    'Draw new ball
End Sub

Sub Canvas1_MouseReleased (EventData As MouseEvent)
    nx = EventData.X
    ny = EventData.Y
'    Canvas1.DrawRect(nx-2, ny-2,BallWidth+4,BallHeight+4,ColorFormBackground,True,1)
'    Canvas1.DrawRect(nx, ny,BallWidth,BallHeight,ColorBall,True,1)
    Canvas1.DrawCircle(nx-2, ny-2,BallRadius+4,ColorFormBackground,True,1)
    Canvas1.DrawCircle(nx, ny,BallRadius,ColorBall,True,1)
    ox=nx
    oy=ny
End Sub

 

[Daestrum]

Try clearing the ball with a transparent colour, the top canvas needs to have transparent fill.

Sorry just read you already tried that.

 

[Mark Read]

Setting the top canvas to transparent fill and filling the ball with transparent gives me a red trail.

 

[Daestrum]

try

    Private ColorFormBackground = fx.Colors.Transparent As Paint

change

  'Canvas1.DrawCircle(ox-2, oy-2,BallRadius+4,ColorFormBackground,True,1)    'erase old ball

to

' modify numbers to suit ball size
    Canvas1.ClearRect(ox-5, oy-5,10,10)

 

[Mark Read]

Canvas1.ClearRect(ox-5, oy-5,10,10)

That does the trick, modified to:

Canvas1.ClearRect(ox-5, oy-5,BallRadius*2+4,BallRadius*2+4)

with ColorFormBackground set to tranparent.

Many thanks.

 

[klaus]

Attached you find your project modified using two Panes as B4XView and two B4XCanvases and therefore cross-platfom.

As your project is a B4XPages project you should click on this line on top of the B4XMainPage module to zip the project.

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

 

[Mark Read]

Thank you Klaus, your code is much smaller and easier to understand. As I said in my first post, I am relatively new to graphics so any help or suggestions are more than welcome.

 

[Mark Read]

If I might just ask a second question. I have read the booklet from Klaus on graphics. Why is it necessary to add a B4XView to the B4XCanvas when I can draw on the canvas and have the touch events? The B4XViews are added in the designer but not the canvas or is the B4XView converted to a canvas? Sorry for the question but I would like to understand.

 

[klaus]

B4J is different than B4A and B4i.
B4J has a specific drawing object Canvas which is independent with its own user interface events.
These events are different from B4A and B4i.
B4A and B4i have a Canvas drawing class which is obligatory connected to another object like a Panel or ImageView.
The Panel has the Touch event which is used for the user interface, an ImageView does not have a Touch event.
The B4XCanvas is a drawing class similar to B4A and B4i connected to Panel declared as a B4XView.
It has the same Touch event like B4A. With the advantage that it is cross-platform, the same code for all three platforms.

 

[Mark Read]

Thanks for the explanation.