Share My Creation Draw on Canvas with Undo Button

hi

this is a very simple way that show you how you can create a paint app with a undo function.
what the app does is very simple

on every mouse_press/mouse_release a list with all points are stored and added to the drawing object.
because we have now for each path a separate list we can just remove it and like this we have an UNDO function in our painting app.

have a look

#Region Project Attributes
    #MainFormWidth: 400
    #MainFormHeight: 400
#End Region

Sub Process_Globals
    Type point(x As Float, y As Float)
    Type path(color As Int, pathlist As List)
    Private fx As JFX
    Private MainForm As Form
    Private cnv As Canvas
    Private drawing As List
    Private isDrawing As Boolean
    Private btn As Button
    Private path As path
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show

    drawing.Initialize
    path.Initialize
    path.pathlist.Initialize

    cnv.Initialize("cnv")
    btn.Initialize("btn")
    btn.Text = "Undo"
    
    MainForm.RootPane.AddNode(cnv,0,0,MainForm.Width,MainForm.Height)
    MainForm.RootPane.AddNode(btn,MainForm.Width*0.75,MainForm.Height*0.05,MainForm.Width*0.2,MainForm.Height*0.1)
    cnv.ClearRect(0,0,cnv.Width,cnv.Height)
End Sub

Sub MainForm_MousePressed (EventData As MouseEvent)
    path.pathlist.Clear
    path.color = fx.Colors.To32Bit(fx.Colors.RGB(Rnd(0,255),Rnd(0,255),Rnd(0,255)))
    isDrawing = True
End Sub

Sub MainForm_MouseDragged (EventData As MouseEvent)
    If isDrawing Then
        Dim p As point
        p.Initialize
        p.x = EventData.X
        p.y = EventData.Y
        path.pathlist.Add(p)
        cnv.DrawCircle(p.x,p.y,4,fx.Colors.From32Bit(path.color),True,2)
    End If
End Sub

Sub MainForm_MouseReleased (EventData As MouseEvent)
    isDrawing = False
    Dim l As path
    l.Initialize
    l.pathlist.Initialize
    l.pathlist.AddAll(path.pathlist)
    l.color = path.color
    drawing.Add(l)
End Sub

Sub btn_MouseClicked (EventData As MouseEvent)
    If drawing.Size = 0 Then Return
    drawing.RemoveAt(drawing.Size-1)
    cnv.ClearRect(0,0,cnv.Width,cnv.Height)
    For Each l As path In drawing
        For Each p As point In l.pathlist
            cnv.DrawCircle(p.x,p.y,4,fx.Colors.From32Bit(l.color),True,2)
        Next
    Next
End Sub

 

[ilan]

btw, the cool thing in this way is you can upload those points to a server and like this store the whole image and use it whenever you want, and also people that will download it will have the possibility to use the undo function and edit the image.

 

[Erel]

You can add UndoManager to this solution and provide an undo / redo functionality: https://www.b4x.com/android/forum/threads/b4x-class-undomanager.73019/#content

 

[ilan]

You can add UndoManager to this solution and provide an undo / redo functionality: https://www.b4x.com/android/forum/threads/b4x-class-undomanager.73019/#content

I need first to learn how it works but it looks very interesting