Question

I am developing an app which draws more or less a two-dimensional matrix of values to a canvas. The values of this matrix are scaled to Alpha levels to illustrate intensity, and the coordinates for the matrix are simply extrapolated from row and column indexes. Below is my onDraw routine.

public void onDraw(Canvas canvas, float [][] spectrum, float nsegs,int seglen) {

    //canvas.translate(0,0);
    //alpha = 0;


    int canHeight = canvas.getHeight();
    int canWidth = canvas.getWidth();


    //float[] array = generateData(512);
    float [] spec = new float[seglen];

    final float bw = (float)(canWidth-2)/nsegs;
    final float bh = (float)(canHeight-2)/(float) seglen;

    for (int i = 0;i<seglen;i++){
        spec[i] = spectrum[i][index];   // One column at a time

    }

    float max = maxVal(spec);
    float min = minVal(spec);

    xcoor = index;
        for (int n = 0; n < seglen; n++){ 


            //Scale value to alpha (0-255)
            alpha =(int)Math.round((((spec[n] - min)/max)*255.0));

            ycoor = n;
            paint.setAlpha(alpha);

            canvas.drawPoint(xcoor,ycoor, paint);


        }

        index = (int) (index +1);
    if (index == nsegs-1){
        index = 0;

    }

}

Here paint configuration is pre-defined as:

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

This program draws one pixel at a time, fills one column of pixels equal to the number of elements in a column of the matrix. Then it starts on the next column, where the previous column is still displayed and so forth. At this stage when all columns are full it stars from the first column again, drawing on top of previous elements.

The Problem: The tailing columns although already drawn appear to flicker and jump around, as does the Alpha. I have attempted to canvas.save() and canvas.restore() to capture the entire canvas and restore it after a column is printed. I have double checked all my row and column indexing and alpha vales to ensure the coordinates increment as per desired (and they do). This is very similar to the sample APIdemo DrawPoints.java, however there are three primary differences.

1. I am using DrawPoint not DrawPoints, and
2. I don’t use “canvas.setColour” as it removes the tailing columns from the canvas.
3. This onDraw function is operating in a Thread which extends SurfaceView

Any idea’s would be much appreciated, thank you for your time.

Answer 1

In the case above, I was using a SurfaceView instead of a View. Out of the Android dev docs

Note: On each pass you retrieve the Canvas from the SurfaceHolder, the previous state of the Canvas will be retained. In order to properly animate your graphics, you must re-paint the entire surface. For example, you can clear the previous state of the Canvas by filling in a color with drawColor() or setting a background image with drawBitmap(). Otherwise, you will see traces of the drawings you previously performed.

The Solution, re-draw the entire canvas each time to prevent the jitter.