Finger painting

Question

I found this little code example to make a finger drawing:
http://marakana.com/tutorials/android/2d-graphics-example.html

Here are some of the relevant code:

List<Point> points = new ArrayList<Point>(); @Override public void onDraw(Canvas canvas) { for (Point point : points) { canvas.drawCircle(point.x, point.y, 5, paint); } } public boolean onTouch(View view, MotionEvent event) { Point point = new Point(); point.x = event.getX(); point.y = event.getY(); points.add(point); invalidate(); Log.d(TAG, "point: " + point); return true; } 

I looked at it and saw that they add points to the ArrayList, and then loop through the ArrayList, it does not look like this is a very optimized approach to this. Is there a better approach or is it a good approach?

After testing on my Samsung GS3, I painted the entire screen with a circle size of 20, and the closer it got to a full color image, the slower it took to draw, and then the circles became spaced.

Answer 1

No, that makes sense in this example.

He goes over all the points that he wants to draw. This means that it adds every point to the array, so it can completely move all objects.

You will often see this in game programming.

---

It is also very extensible.

• You can add as many points as you want.
• It supports polymorphism.
• You do not need to create variables for multiple points> Less code

Answer 2

First, use a stroke (not circles) to draw a line. Secondly, approximate. Here is the summary:

• Change the Paint to use a stroke with width=5 . This reduces the need to draw so many circles.

• Select a threshold value, for example 3px , after which you add a point to onTouch() .

   if (Math.abs(previousX - event.getX()) < THRESHOLD && Math.abs(previousY - event.getY()) < THRESHOLD) { return; } previousX = event.getX(); previousY = event.getY(); // drawing update goes here 

  This should reduce the number of (inconspicuous) points.

• Use the Picture or Path class to draw a line and use Canvas.drawPath() or Canvas.drawPicture() . This, especially for a large number of points, will really speed up the drawing, since all drawing commands will be transferred to the internal drawing function in one call.

• Simplify the form if necessary. For example, you can remove high points (which would be ideal for using a circular buffer ), use the Ramer-Douglas-Picker algorithm, which is quite easy to implement, gives good results and has O(nlogn) complexity.