Draw line continuously using Canvas in Android

I am using canvas for continuous line drawing. I will draw a line in a relative layout. For a static line, I did. In a real case, I will receive data from the sensor. So I don't know how to draw the line continuously like below. Could you please suggest me an algorithm for this. Thank you so much. This is my code

//XML file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/canvas"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_weight="1"
        android:background="#d3d3d3" >
    </RelativeLayout>

</RelativeLayout>

      

This is my code for a static string

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(new HeartGraphView (this));
        setContentView(R.layout.activity_main);
        RelativeLayout relativeLayout=(RelativeLayout)findViewById(R.id.canvas);
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.FILL_PARENT); 
        HeartGraphView v = new HeartGraphView(this);
        v.setLayoutParams(lp);
        relativeLayout.addView(v);          
    }    
public class HeartGraphView  extends View {
        public HeartGraphView (Context context) {
            super(context);
            // TODO Auto-generated constructor stub
        }

        int[] dataX=new int[30];
        int[]  dataY=new int[30];
        public int generatRandomPositiveNegitiveValue(int max , int min) {
            Random r = new Random();
            int ii = r.nextInt(max - min + 1) + min;
            return (ii-140);
        }

    int[] dataX=new int[30];        
    int[]  dataY=new int[30];
    public int generatRandomPositiveNegitiveValue(int max , int min) {
        Random r = new Random();
        int ii = r.nextInt(max - min + 1) + min;
        return (ii-140);
    }

    @Override 
    public void onDraw (Canvas canvas) {
        int w;
        int h;
        h=280;
        w=600;

        //Generate random
        int min = 0;
        int max = 280;

        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(6);
        dataX[0]=0;
        for (int i = 0; i <  w/20 - 1; i++) {
        dataX[i+1]=(i+1)*w/20;
        dataY[w/20 - 1]=generatRandomPositiveNegitiveValue(max ,min);
        dataY[i]=dataY[i+1];
        }

        for (int i = 0; i <  w/20 -1; i++) {
            // apply some transformation on data in order to map it correctly
            // in the coordinates of the canvas
            canvas.drawLine(dataX[i], h/2-dataY[i], dataX[i+1], h/2-dataY[i+1],paint);
            canvas.drawColor(Color.TRANSPARENT, Mode.MULTIPLY);
            try {
                Thread.sleep(10);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            invalidate();              
        }        

    }
}

      

} This is my result

enter image description here

EDIT> As suggested by Frank N. Stay. I change something: + First, the initial all elements of the X-axis with fixed values ​​[0,30,60,90 ....] and the Y-axis are zero

    int w=600;
    for (int i = 0; i <  w/20 - 1; i++) {
    dataX[i]=i*w/20;
    dataY[i]=0;
    }

      

+ Secondly, with the new value coming Y, we put it at the end of the dataY array and remove the first position:

 for (int i = 0; i <  w/20 - 1; i++) {
      dataY[i]=dataY[i+1];

    }
  dataY[w/20 - 1]=newValue;

      

+ Third, redraw dataX and dataY Is this correct?

+3


source to share





All Articles