Doodle undoing the last change or erasing it.

[Annie]

I was making a doodle app , where the user picks an image from the gallery or takes it from a camera. Then he doodles over it. But the problem is that the clear canvas component clears the complete canvas rather than just the part that the user wants. I tried for an undo option but their is no such block available to undo the doodle drawing.

Plus white eraser would just paint a white color all over the canvas, making the background image also white which is not needed...

 Can somebody plzz help. ?

[Scott Ferguson]

Sure.

The solution is to create a list of lists that will contain the x1,y1,x2,y2 values for drawline to allow an undo.

Inside the Canvas Dragged event block place blocks to add the four values to a row in the list of lists.

Each time the Dragged event is triggered, a four-value item is added to that list.

The list builds until the user stops drawing.

To undo, the user would press the undo button causing the last item of the list to be removed, screen to be cleared then the list iterated through and each set of values attached to a drawline block.

The user can repeatedly press the undo button to remove more line segments until all have been removed, if desired.

To allow undo and redo, use a pointer index into the list that moves in the - direction for undo and the + direction for redo rather than deleting the last item as with undo.

---

sf

[Scott Ferguson]

The user responded via email:

So I hv to  use the lists component in the built-in blocks..?

And Do I have to add items to list first or call canvas.draw line first..?

On Oct 14, 2015 3:37 PM, "Scott Ferguson" <scottfr...@gmail.com> wrote:

Sure.

The solution is to create a list of lists that will contain the x1,y1,x2,y2 values for drawline to allow an undo.

Inside the Canvas Dragged event block place blocks to add the four values to a row in the list of lists.

Each time the Dragged event is triggered, a four-value item is added to that list.

The list builds until the user stops drawing.

To undo, the user would press the undo button causing the last item of the list to be removed, screen to be cleared then the list iterated through and each set of values attached to a drawline block.

The user can repeatedly press the undo button to remove more line segments until all have been removed, if desired.

---

sf

[Scott Ferguson]

My thinking was faulty on my previous explanation so it is no wonder that there is some confusion.

These blocks will remove the lines on the canvas starting with the last one drawn and working backward from there (undo).

In the example below, the last line drawn on the face is a frown:

The Undo button is pressed, removing the frown, then a smile is drawn:

---

sf

[Annie]

 So, the idea is that when the undo button is clicked,the last positions of x and y are removed.And the clear canvas component is called which clears the canvas.Then again, the canvas.draw line component is called and the complete list of positions of x and y are passed, excluding the last because they have been removed from the list already.And then ,in the end,excluding the last all the lines are redrawn on the canvas. Got it.

Thank you so much.

It was a great help. 

[Scott Ferguson]

You are very welcome!

Happy Inventing!

---

sf