Android SurfaceView+Canvas画脉搏/心电数据图

实际演示效果：


Canvas 画图基本步骤：

1、布局添加一个SurfaceView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

2、在onCreate()中，加入：

 SurfaceHolder surfaceHolder = SurfaceView.getHolder();

 surfaceHolder = surfaceView.getHolder();//Canvas画图很关键的一步

3、Paint设置颜色、线宽、文字大小等属性

        penOfGrid.setColor(gridColor); //设置画笔
        penOfGrid.setStrokeWidth(1);   //线宽
        penOfGrid.setAntiAlias(true);  //抗锯齿
        penOfGrid.setTextSize(24);     //文字大小，和线宽无关

        penOfData.setColor(lineColor);
        penOfData.setStrokeWidth(2);
        penOfData.setAntiAlias(true);
        penOfData.setTextSize(80);

4、开始画图：

（---坐标的（0，0）的位置是左上角，而不是为人熟知的左下角---）

Canvas canvas = surfaceHolder.lockCanvas();
canvas.drawLine(x1,y1,x2,y2,paint);//画线
canvas.drawColor(Color.BLACK);//画黑色 ...
5、结束画图:

 surfaceHolder.unlockAndPost(canvas);

    /**
     * 绘制数据波形操作,数据缓存到了ArrayList<Float>中，本方法将其中数据绘制出来
     * 用到的其他未在方法中声明的对象、变量须自己在合适的位置声明
     * @param dataGroup 输入数据集合
     */

private void drawData(ArrayList<Float> dataGroup){
        //获得画布的宽高,绘制网格用到
        widthOfCanvas = surfaceView.getWidth();
        heightOfCanvas = surfaceView.getHeight();

        canvas = surfaceHolder.lockCanvas(); // 锁定画布，开始绘图

        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                | Paint.FILTER_BITMAP_FLAG));//抗锯齿

        int xScale = 1; //横轴几个像素为一个单位

        //bitmap：用于双缓冲画图，解决刷新闪烁问题
        if(bitmap == null){//bitmap == null：第一次画图，bitmap没有初始化，就需要初始化，就是下面这一行
            bitmap = Bitmap.createBitmap(widthOfCanvas,heightOfCanvas, Bitmap.Config.ARGB_8888);

            Canvas tempCanvas = new Canvas(bitmap);//在bitmap中再新建一个画布Cancas，bitmap相当于SurfaceView了
            tempCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                    | Paint.FILTER_BITMAP_FLAG));
            tempCanvas.drawColor(backColor); //绘制背景色

            /**
             * 绘制网格
             */
            for (int i = 0; i < widthOfCanvas / 30; i++) {
                tempCanvas.drawLine(i * 30, 0, i * 30, heightOfCanvas, penOfGrid); //纵
            }
            for (int i = 0; i < heightOfCanvas / 30; i++) {
                tempCanvas.drawLine(0, i * 30, heightOfCanvas, i * 30, penOfGrid); //横
            }

            float cx,cy,dx,dy; //画线需要的起点坐标和终点坐标
            for (int i = 0;i<dataGroup.size()-1;i++){//对数据集合中的数据点进行两个两个的绘制
                //起点：
                cx = i * xScale;
                cy = heightOfCanvas - heightOfCanvas * dataGroup.get(i)/3;//由于左上角为(0,0)，需要对画出来的图进行上下颠倒，
//并根据Canvas高度对数据进行一定比例的放大
               //终点：
                dx = (i + 1) * xScale;
                dy = heightOfCanvas - heightOfCanvas * dataGroup.get(i+1)/3;
                //在起点和重点之间画一条线段
                tempCanvas.drawLine(cx,cy,dx,dy,penOfData);
            }
            tempCanvas.drawText("心率：--",20,100,penOfData);
            //绘制完毕
            canvas.drawBitmap(bitmap,0,0,penOfData);
        }else { //如果不是第一次绘制，就没有必要重新初始化bitmap，节约资源，其他操作完全一样
            Canvas tempCanvas = new Canvas(bitmap);
            tempCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                    | Paint.FILTER_BITMAP_FLAG));
            tempCanvas.drawColor(backColor); //Draw background color to Black

            /**
             * Draw grid
             */
            for (int i = 0; i < widthOfCanvas / 30; i++) {
                tempCanvas.drawLine(i * 30, 0, i * 30, heightOfCanvas, penOfGrid); //vertical lines
            }
            for (int i = 0; i < heightOfCanvas / 30; i++) {
                tempCanvas.drawLine(0, i * 30, heightOfCanvas, i * 30, penOfGrid);
            }
            float cx,cy,dx,dy;
            for (int i = 0;i<dataGroup.size()-1;i++){
                cx = i * xScale;
                cy = heightOfCanvas - heightOfCanvas * dataGroup.get(i)/3;
                dx = (i + 1) * xScale;
                dy = heightOfCanvas - heightOfCanvas * dataGroup.get(i+1)/3;

                tempCanvas.drawLine(cx,cy,dx,dy,penOfData);
            }
            tempCanvas.drawText("心率："+falseHeart(),20,100,penOfData);
            canvas.drawBitmap(bitmap,0,0,penOfData);
        }
        //将双缓冲的图复制到SurfaceView上显示
        surfaceHolder.unlockCanvasAndPost(canvas);
    }