Android How to draw a smooth line following your finger

Question

http://marakana.com/tutorials/android/2d-graphics-example.html

I am using this example below. But when I move my fingers too fast across the screen the line turns to individual dots.

I am not sure whether I can speed up the drawing. Or I should connect the two last points with a straight line. The second of these two solutions seems like a good option, except when moving your finger very fast you will have long sections of a straight line then sharp curves.

If there are any other solutions it would be great to hear them.

Thanks for any help in advance.

Solution 1

An easy solution, as you mentioned, is to simply connect the points with a straight line. Here's the code to do so:

public void onDraw(Canvas canvas) {
    Path path = new Path();
    boolean first = true;
    for(Point point : points){
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }
        else{
            path.lineTo(point.x, point.y);
        }
    }
    canvas.drawPath(path, paint);
}

make sure you change your paint from fill to stroke:

paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setColor(Color.WHITE);

Another option is to connect the points with iterpolation using the quadTo method:

public void onDraw(Canvas canvas) {
    Path path = new Path();
    boolean first = true;
    for(int i = 0; i < points.size(); i += 2){
        Point point = points.get(i);
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }

        else if(i < points.size() - 1){
            Point next = points.get(i + 1);
            path.quadTo(point.x, point.y, next.x, next.y);
        }
        else{
            path.lineTo(point.x, point.y);
        }
    }

    canvas.drawPath(path, paint);
}

This still results in some sharp edges.

If you're really ambitious, you can start to calculate the cubic splines as follows:

public void onDraw(Canvas canvas) {
    Path path = new Path();

    if(points.size() > 1){
        for(int i = points.size() - 2; i < points.size(); i++){
            if(i >= 0){
                Point point = points.get(i);

                if(i == 0){
                    Point next = points.get(i + 1);
                    point.dx = ((next.x - point.x) / 3);
                    point.dy = ((next.y - point.y) / 3);
                }
                else if(i == points.size() - 1){
                    Point prev = points.get(i - 1);
                    point.dx = ((point.x - prev.x) / 3);
                    point.dy = ((point.y - prev.y) / 3);
                }
                else{
                    Point next = points.get(i + 1);
                    Point prev = points.get(i - 1);
                    point.dx = ((next.x - prev.x) / 3);
                    point.dy = ((next.y - prev.y) / 3);
                }
            }
        }
    }

    boolean first = true;
    for(int i = 0; i < points.size(); i++){
        Point point = points.get(i);
        if(first){
            first = false;
            path.moveTo(point.x, point.y);
        }
        else{
            Point prev = points.get(i - 1);
            path.cubicTo(prev.x + prev.dx, prev.y + prev.dy, point.x - point.dx, point.y - point.dy, point.x, point.y);
        }
    }
    canvas.drawPath(path, paint);
}

Also, I found that you needed to change the following to avoid duplicate motion events:

public boolean onTouch(View view, MotionEvent event) {
    if(event.getAction() != MotionEvent.ACTION_UP){
        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        Log.d(TAG, "point: " + point);
        return true;
    }
    return super.onTouchEvent(event);
}

and add the dx & dy values to the Point class:

class Point {
    float x, y;
    float dx, dy;

    @Override
    public String toString() {
        return x + ", " + y;
    }
}

This produces smooth lines, but sometimes has to connect the dots using a loop. Also, for long drawing sessions, this becomes computationally intensive to calculate.

Hope that helps... fun stuff to play around with.

Edit

I threw together a quick project demonstrating these different techniques, including Square's suggessted signature implementation. Enjoy: https://github.com/johncarl81/androiddraw

Solution 2

This might be not important anymore for you but I struggled a lot to solve it and I want to share, might be useful to someone else.

The tutorial with the solution @johncarl offered are great to drawing but they offered a limitation for my purposes. If you take your finger out of the screen and put it back, this solution will draw a line between the last click and your new click, making the whole drawing connected always. So I was trying to find a solution for that, and finally I got it!( sorry if sounds obvious, I am a beginner with graphics)

public class MainActivity extends Activity {
    DrawView drawView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set full screen view
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                     WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        drawView = new DrawView(this);
        setContentView(drawView);
        drawView.requestFocus();
    }
}


public class DrawingPanel extends View implements OnTouchListener {
    private static final String TAG = "DrawView";

    private static final float MINP = 0.25f;
    private static final float MAXP = 0.75f;

    private Canvas  mCanvas;
    private Path    mPath;
    private Paint       mPaint;   
    private LinkedList<Path> paths = new LinkedList<Path>();

    public DrawingPanel(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(6);
        mCanvas = new Canvas();
        mPath = new Path();
        paths.add(mPath);
    }               

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {            
        for (Path p : paths){
            canvas.drawPath(p, mPaint);
        }
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
            mX = x;
            mY = y;
        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        // commit the path to our offscreen
        mCanvas.drawPath(mPath, mPaint);
        // kill this so we don't double draw            
        mPath = new Path();
        paths.add(mPath);
    }

    @Override
    public boolean onTouch(View arg0, MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touch_start(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;
        }
        return true;
    } 
}  

I took the android sample for drawing with your finger and modified it a little to store every path instead of just the last one! Hope it helps someone!

Cheers.

Solution 3

I have experimented with several ways to render the accumulated points of the motion events. In the end I had the best results by calculating the mid-points between two points and treating the points in the list as anchor points of quadratic Bezier curves (except the first and last point which are connected by simple lines to the next mid-point).

This gives a smooth curve without any corners. The drawn path will not touch the actual points in the list but go through every mid-point.

Path path = new Path();
if (points.size() > 1) {
    Point prevPoint = null;
    for (int i = 0; i < points.size(); i++) {
        Point point = points.get(i);

        if (i == 0) {
            path.moveTo(point.x, point.y);
        } else {
            float midX = (prevPoint.x + point.x) / 2;
            float midY = (prevPoint.y + point.y) / 2;

            if (i == 1) {
                path.lineTo(midX, midY);
            } else {
                path.quadTo(prevPoint.x, prevPoint.y, midX, midY);
            }
        }
        prevPoint = point;
    }
    path.lineTo(prevPoint.x, prevPoint.y);
}

Solution 4

If you want it simple:

public class DrawByFingerCanvas extends View {

    private Paint brush = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Path path = new Path();

    public DrawByFingerCanvas(Context context) {
        super(context);
        brush.setStyle(Paint.Style.STROKE);
        brush.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas c) {
        c.drawPath(path, brush);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x,y);
                break;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(x, y);
                break;
            default:
                return false;
        }
        invalidate();
        return true;
    }
}

In the activity just:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new DrawByFingerCanvas(this));
}

Result:

To erase all drawings just rotate the screen.

Solution 5

I had very similar problem. When you're calling onTouch method, you should also use method (inside onTouch(MotionEvent event))

event.getHistorySize();

and something like that

int histPointsAmount = event.getHistorySize(); 
for(int i = 0; i < histPointsAmount; i++){
    // get points from event.getHistoricalX(i);
    // event.getHistoricalY(i); and use them for your purpouse
}

View more solutions

Comments

[Yevgeny Simkin]

didn't know about this... curious to see how much historical data is in the event.

[John Ericksen]

This is an interesting article on the subject. Seems like android batches the touch events: corner.squareup.com/2010/07/smooth-signatures.html

[Arun Abraham]

Hey... Do try to clear the List somewhere, else it will slow down gradually as you keep drawing more and more at once..

[caiocpricci2]

That was not a problem for application that do not run this for long (such as the one I did), for my implementation this never runs for longer than 1 minute or so. But thanks for pointing that problem!

[Eric Obermühlner]

The first loop cubicTo() example seems to be wrong. It should loop over all points, not only the last one.

[John Ericksen]

Eric Obermühlner: I am looping over all points in the for loop around the cubicTo() call.

[Yeung]

Hey. With storing the paths for drawing, it is easy to implement the "undo" or "redo" functions. But how can we implements the erase function if we do not store the drawing into bitmap?

[caiocpricci2]

I don't think you can. If you don't store it how can you find out which one to delete?

[Mario Lenci]

Thanks. it did exactly what i was expecting.

[Richard Le Mesurier]

@johncarl I agree with Eric. I think the curves code is wrong - the first loop only smooths out the last few points. I propose the first loop run from 0, not from "points.size() - 2". (this is based on the fact that I actually copied this code into my graph app and tested it)

[John Ericksen]

hmmm, I still don't see the issue. I have the code on github if you would like to submit a pull request: github.com/johncarl81/androiddraw

[kyogs]

@johncarl i am trying to draw smooth line as here stackoverflow.com/questions/16455896/… but its not working..Any idea?

[Jake Stoeffler]

Just curious, but what's mCanvas used for? You mentioned "commit the path to our offscreen" in touch_up() but it doesn't look like mCanvas is ever used anywhere else.

[Leonardo Sapuy]

Could you helpme with my question??

[DkPathak]

This the best solution that i was looking for.. Thanks

[Aurel]

Thanks to you, that's what I searched !

[jigar]

I have used this code in my class and its working fine,But thing is that when one line drawn then on drawing second class it starts from end point of 1st line..means drawing is connected..so please help me for it a free drwaing practice..!

[AndroidDev]

@johncarl can u please look at my question, and see if there any solution for that

[QuinnBaetz]

This is a great answer, but it should be for(int i = 0 ; i < points.size(); i++){ when calculating cubic splines.

[wheels53]

I had to pull out the path.lineTo(prevPoint.x, prevPoint.y); statement outside the for loop to get a clean smooth line. Can you explain why it's there?

[mr5]

Android has already a built-in functionality the same as this one with much more feautre, w/c you can refer here. Just use the first example of johncarl and you can achieve the smooth edge lines.

[Eric Obermühlner]

The path.lineTo(prevPoint.x, prevPoint.y) at the end connects the last mid point to the final point. It already is outside of the loop and should not prevent the line from being smooth.

[Coas Mckey]

too good , but can you tell me how to remove and clear out all the canvas? I mean what ever I have drawn , how can I clear out all the drawn things from it ?

[Coas Mckey]

can you tell me how to remove and clear out all the canvas? I mean what ever I have drawn , how can I clear out all the drawn things from it ?

[Abir Hasan Shawon]

great answer. It helped a lot :D

[Jacob Kaddoura]

This should be the accepted answer -- achieves exactly what OP is asking with the least complicated code

[channae]

I had an issue where curves aren't properly drawing. This solution fixed my issue. Thanks!

[Faizan Haidar Khan]

Thanks for this. Please tell me how can we add a big plus symbol that shows where cursor is located?

[Daniel.Wang]

Please post minimal example for the asker.