Question

I’ve been developing an app to draw in ics android tablets and i’ve encountered an issue I can’t figure out how to fix.

The problem is that I draw correctly and in a real time drawing BUT when I go really really fast (tested on real tablets) the circles are not really circles, they look like pilygons of 5 or 6 sides…

Here I declare the bitmap and assign it to the canvas:

    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    width = size.x;
    height = size.y;
    bm = Bitmap.createBitmap(width, height-50,Bitmap.Config.ARGB_8888); 
    c = new Canvas(bm);

Here the code I use to get the x, y: (the layP is the “Painter” which you’ll se down here

class SaveOnTouchListener implements OnTouchListener{

    public boolean onTouch(View v, MotionEvent e) {
        final float x = e.getX();
        final float y = e.getY();
        if(e.getAction() == MotionEvent.ACTION_DOWN){  
            startx.add(x);
            starty.add(y);
            x1 = x;
            y1 = y;
        } else if(e.getAction() == MotionEvent.ACTION_MOVE){  
            endx.add(x);
            endy.add(y);
            x2 = x;
            y2 = y;
            if (id == 1) strokes.add(sb.getProgress()+1);
            else strokes.add(4*(sb.getProgress()+1));
            layP.draw();
            startx.add(x);
            starty.add(y);
            x1 = x;
            y1 = y;
        } else if(e.getAction() == MotionEvent.ACTION_UP){  
            x2 = x;
            y2 = y;
            endx.add(x);
            endy.add(y);
            strokes.add(stroke);
            layP.draw();
            return false;
        }
        return true;
    }

}

And finally here’s the code for the “painter” which is the canvas and the onDraw() method (i use the invalidate(t,l,r,b) to do it optimized….)

private class Painter extends View{
    public Painter(Context context){
        super(context);
    }

    public void draw() {
        if (firstPainting) {
                            //paint the canvas white just once
            Paint paint = new Paint();
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(Color.WHITE);
            c.drawPaint(paint);
            firstPainting = false;
            layP.invalidate();
        }
        else {
                Paint paint = new Paint();
                paint.setStyle(Paint.Style.FILL);
                paint.setAntiAlias(true);
                int r = startx.get(startx.size()-1).intValue();
                int t = starty.get(starty.size()-1).intValue();
                int l = endx.get(endx.size()-1).intValue();
                int b = endy.get(endy.size()-1).intValue();
                int n = strokes.get(strokes.size()-1);
                paint.setStrokeWidth(n);
                paint.setColor(COLOR.BLACK);
                c.drawLine(r, t, l, b, paint);
                c.drawCircle(r, t, n/2, paint);

                if (l > r) {
                    int aux = l;
                    l = r;
                    r = aux;
                }
                if (t > b) {
                    int aux = t;
                    t = b;
                    b = aux;
                }
                r += n;
                l -= n;
                t -= n;
                b += n;
                if (t < 0) t = 0;
                if (l < 0) l = 0;
                layP.invalidate(l,t,r,b);
        }
    }


    @Override 
    protected void onDraw(Canvas c) {
            c.drawBitmap(bm, 0, 0, null);
    }
}
}

As you can see I use a BitMap and I just invalidate the zone needed to be invalidated, I don’t know what else to do.

Is there a way to draw properly? Even if I have to change all the bitmap and canvas..

I’ve tried to to implement Bezier but I don’t know how to do it since I need the next points before drawing the lines.

I’ve found the bezier method, I think I’m going to try this out.

Answer 1

It’s not at all clear to me what you’re trying to do. From your text, it sounds like you’re trying to do basic “finger painting”, where you basically just draw curves that match the input. Your code doesn’t look much like that to me, but between the variables you’re using that we haven’t seen declarations for (stroke and strokes) and the one-letter variable names, I’m a bit lost. Certainly these two lines:

c.drawLine(r, t, l, b, paint);
c.drawCircle(r, t, n/2, paint);

make it look like you’re going for more than simply drawing what the user draws with their finger.

Still, I’d like to try to help. drawCircle() really should always draw circles. Drawing lines between points is going to give you sharp corners (polygons if you close a shape). If you want to draw paths like this smoothly, then Bézier curves are indeed what you want.

If you download the sample code from the SDK, there’s an example called “FingerPaint” that does a very good job demonstrating how to draw arbitrary curves smoothly.