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);
    }