Android自定义View- 画一幅实时心电测量图

概述

这次来讲讲心电图的绘制，这也是项目当中用到过的。心电图继承自View，概括一下主要有以下内容要实现：**实时显示动态心电测量数据、心电波形左右滑动、惯性滑动及波形 X轴和 Y轴方向双指滑动缩放。**下面我们来看看效果图，图片上传大小有限制，所以分两张：

Screenrecorder-2021-08-09-18-44-54-1282021891847387.gif

ECG_2.gif

下面我们将功能拆解，分步实现：

• 
  
• 画背景绿色网格线
  
• 绘制实时动态心电曲线
  
• 实现单指曲线左右平移
  
• 实现曲线惯性滑动
  
• 实现 X轴及 Y轴方向上曲线的双指滑动缩放（多点触控改变曲线增益）
  
• 左上角显示当前增益
  

1、画网格线

这个就比较简单了。首先确定每一小格的边长，然后获取控件宽高。这样就能分别计算出水平方向及竖直方向有多少小格，也就是可以确定横线和竖线一共要画多少条。然后就可以用循环画出所有的线条，其中每隔5条进行线条加粗，而且画实线，这样就形成了实线大格。下面先看实现：

// 画 Bitmap

    protected Bitmap gridBitmap;

 // 画 Canvas

    protected Canvas bitmapCanvas;

// 控件宽高

    protected int viewWidth, viewHeight;

 @Override

    protected void onSizeChange() {

        // 获取控件宽高

        viewWidth = mBaseChart.getWidth();

        viewHeight = mBaseChart.getHeight();

        // 初始化网格 Bitmap

        gridBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.ARGB_8888);

        bitmapCanvas = new Canvas(gridBitmap);

        Log.d(TAG, "onSizeChange - " + "-- width = " +

                mBaseChart.getWidth() + "-- height = " + mBaseChart.getHeight());

    }


 /**

     * 准备好画网格的 Bitmap

     */

    private void initBitmap(){

        // 计算横线和竖线条数

        hLineCount = (int) (viewHeight / gridSpace) + 2;

        vLineCount = (int) (viewWidth / gridSpace) + 2;

        // 画横线

        for (int h = 0; h < hLineCount; h ++){

            float startX = 0f;

            float startY = gridSpace * h;

            float stopX = viewWidth;

            float stopY = gridSpace * h;

            // 每个 5根画一条粗实线

            if (h % 5 != 0){

                linePaint.setPathEffect(pathEffect);

                linePaint.setStrokeWidth(1.5f);

            }else {

                linePaint.setPathEffect(null);

                linePaint.setStrokeWidth(3f);

            }

            // 画线

            bitmapCanvas.drawLine(startX, startY, stopX,stopY, linePaint);

        }

        // 画竖线

        for (int v = 0; v < vLineCount; v ++){

            float startX = gridSpace * v;

            float startY = 0f;

            float stopX = gridSpace * v;

            float stopY = viewHeight;

            // 每隔 5根画一条粗实线

            if (v % 5 != 0){

                linePaint.setPathEffect(pathEffect);

                linePaint.setStrokeWidth(1.5f);

            }else {

                linePaint.setPathEffect(null);

                linePaint.setStrokeWidth(3f);

                Log.d(TAG, "v = " + v);

            }

            // 画线

            bitmapCanvas.drawLine(startX, startY, stopX,stopY, linePaint);

        }

    }


 @Override

    protected void onDraw(Canvas canvas) {

         // 注释 1，Bitmap左边缘位置为getScrollX()，防止网格滑动

        canvas.drawBitmap(gridBitmap, mBaseChart.getScrollX(), 0, null);

    }

这里想提一下的是，这里网格线并不是直接画在控件 onDraw方法的 Canvas上的。而是在控件初始化时，事先将网格所有线条画在一张 Bitmap上，然后绘制时直接绘制 Bitmap。这样搞就不用每次绘制时都计算一遍线条的位置了。

还有就是上面注释 1处，绘制网格 Bitmap的左边缘的位置是 getScrollX()。因为后面要实现曲线左右滑动，但网格要固定不动。

2、绘制动态实时心电曲线

这就是心电图最主要的实现了。心电在测量的时候会实时传递电压值，我们需要把电压值实时存进数组里。然后把电压值换算成 Y坐标值，再根据事先确定好的 X轴方向两个数据点的距离来确定每个电压值在 X轴方向的坐标。然后从左到右确定曲线的路径Path，再将Path绘制到Canvas上就可以了。

我们观察上面效果图会发现，这里的实现是最后一个到达的数据的显示不会超过控件右边缘。也就是当曲线 X方向的长度不超过控件宽度时，曲线第一个点的横坐标 x = 0。当曲线 X方向长度大于控件宽度时，曲线 Path的第一个点的横坐标就向左移，也就是 x为负的了。这样就实现上面效果中，测量实时心电时，曲线会向左移。这样新来的数据就显示在控件可见范围内，早来的数据逐步向左移出控件可见范围。下面画个草图吧，草图大概就这么个意思：

心电.png

下面看一下实现：

    /**

     * 创建曲线

     */

    private boolean createPath() {

        // 曲线长度超过控件宽度，曲线起点往左移

        // 根据控件宽度和数组长度以及 X增益算出数组第一个数的 X坐标

        float startX = (this.data.size() * dataSpaceX > viewWidth) ?

                (viewWidth - (this.data.size() * dataSpaceX)) : 0f;

        // 曲线复位

        dataPath.reset();

        for (int i = 0; i < this.data.size(); i++) {

            // 确定 X轴坐标

            float x = startX + i * this.dataSpaceX;

            // 确定 Y轴坐标

            float y = getVisibleY(this.data.get(i));

            // 绘制曲线

            if (i == 0) {

                dataPath.moveTo(x, y);

            } else {

                dataPath.lineTo(x, y);

            }

        }

        return true;

    }

    /**

     * 电压 mv（毫伏）在 Y轴方向的换算

     * 屏幕向上往下是 Y 轴正方向，所以电压值要乘以 -1进行翻转

     * 目前默认每一大格代表 1000 mv，而真正一大格的宽度只有 150,所以 data要以两数换算

     * Y == 0，是在 View的上边缘，所以要向下偏移将波形显示在中间

     *

     * @param data

     * @return

     */

   // 注释 2

    private float getVisibleY(int data) {

        // 电压值换算成 Y值

        float visibleY = -smallGridSpace * 5 / mvPerLargeGrid * data;

        // 向下偏移

        visibleY = visibleY + smallGridSpace * 5 * offset;

        return visibleY;

    }


 @Override

    protected void onDraw(Canvas canvas) {

        // 绘制心电曲线

        canvas.drawPath(dataPath, linePaint);

    }

上面有一点需要注意的，就是我们的 Y值的换算。我们知道Android屏幕自上而下是 Y轴正方向，所以我们如果直接把电压值画在屏幕上它是倒挂的。另外，这里默认的一大格代表1000mv电压值（可设），而真正一大格的边长是150。所以我们需要将电压值换算成屏幕像素。具体看上面注释 2的getVisibleY方法上面注释。

3、实现曲线左右平移

当心电测量完之后，我们需要实现曲线随手指滑动平移。这样才能看到心电图的全部内容。这个实现原理也简单，也就是监听onTouch事件，根据手指位移使用View的scrollBy方法来实现内容平移就可以了：

 /**

     * @param event 单指事件

     */

    private void singlePoint(MotionEvent event) {

        mVelocityTracker.addMovement(event);

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                lastX = event.getX();

                break;

            case MotionEvent.ACTION_MOVE:

                float deltaX = event.getX() - lastX;

                delWithActionMove(deltaX);

                lastX = event.getX();

                break;

            case MotionEvent.ACTION_UP:

                // 计算滑动速度

                computeVelocity();

                break;

        }

    }


 /**

     * @param deltaX 处理 MOVE事件

     */

    private void delWithActionMove(float deltaX) {

        if (this.data.size() * dataSpaceX <= viewWidth) return;

        int leftBorder = getLeftBorder(); // 左边界

        int rightBorder = getRightBorder(); // 右边界

        int scrollX = mBaseChart.getScrollX(); // X轴滑动偏移量


        if ((scrollX <= leftBorder) && (deltaX > 0)) {

            mBaseChart.scrollTo((int) (viewWidth - this.data.size() * dataSpaceX), 0);

        } else if ((scrollX >= rightBorder) && (deltaX < 0)) {

            mBaseChart.scrollTo(0, 0);

        } else {

            // 内容平移

            mBaseChart.scrollBy((int) -deltaX, 0);

        }

    }

注意上面左右边界的设定，别让曲线划出屏幕了。

4、惯性滑动

惯性滑动的实现，这里使用的套路是 VelocityTracker。先追踪手指滑动速度，然后使用 Scroller并结合 View的 computeScroll()方法和 scrollTo方法，实现手指离开屏幕后的惯性滑动。这部分内容在我上一篇文章画一个FM调频收音机刻度表

有讲，这里不再重复。

5、实现双指滑动，在横纵坐标方向缩放曲线

在实现双指滑动曲线缩放功能之前，我们先讲讲一小部分 MotionEvent的基础知识。为什么说只讲一小部分呢？因为 MotionEvent这个事件体系还蛮大。我们只讲一下这次用到的部分。

onTou.png

onTouch2.png

好吧，还是直接画表格吧。这样也直观一点，不用解释那么多。上面红色圈圈圈出来的几个哥们是我们这次要用到的。

• 
  
• 
  

  event.getActionMasked() ：上面也有解释，这个方法和 getAction()类似。只不过我们这次要处理多点触控，所以一定要用 getActionMasked() 来获取事件类型。

  
  
  
• 
  

  event.getPointerCount() ：上面也有解释，获取屏幕上手指个数。因为我们这次要处理双指滑动，所以要用 （getPointerCount() == 2）进行判断。两根手指以外的事件我们不做缩放处理。

  
  
  
• 
  

  ACTION_POINTER_DOWN ：上面又有解释，第一根手指之后，按下的其他手指。如果结合 （getPointerCount() == 2）这个前提条件，那么我们可以认为这次ACTION_POINTER_DOWN 就是第二根手指按下所触发的事件。

  
  
  
• 
  

  event.getX(int pointerIndex)：上面也有介绍，获取某个手指当前的 X坐标。我们在获取到两个手指当前的 X坐标之后，就可以算出两指当前在 X轴方向的距离。然后再结合 ACTION_POINTER_DOWN 时所记录的坐标值，就可以计算出两个手指在 X方向上是靠近了还是疏远了（收缩了还是放大了）。getY(int pointerIndex) 方法同理，不做解释了。

  
  
  
• 
  

  ACTION_MOVE ：两指滑动当然也要用到 MOVE事件，只不过这里 ACTION_MOVE 和单指的使用方法一样，就不做解释了。

  
  
  

好了，我们再看看 X轴方向缩放具体实现吧：

  /**

     * 处理onTouch事件

     *

     * @param event 事件

     * @return 拦截

     */

    @Override

    protected boolean onTouchEvent(MotionEvent event) {

        Log.d(TAG, "pointerCount = " + event.getPointerCount());

        if (event.getPointerCount() == 1) {  // 单指平滑

            singlePoint(event);

        }

        if (event.getPointerCount() == 2) { // 双指缩放

            doublePoint(event);

        }

        return true;

    }


  /**

     * @param event 双指事件

     */

    private void doublePoint(MotionEvent event) {

        if (pointOne == null) pointOne = new PointF();

        if (pointTwo == null) pointTwo = new PointF();


        switch (event.getActionMasked()) {

            case MotionEvent.ACTION_POINTER_DOWN:  // 第二根手指按下

                Log.d(TAG, "ACTION_POINTER_DOWN");

               // 记录第二根手指按下时，两指的坐标点

                saveLastPoint(event);

                numbersPerLargeGridOnThisTime = getDataNumbersPerGrid();

                mvPerLargeGridOnThisTime = getMvPerLargeGrid();

                break;

            case MotionEvent.ACTION_MOVE:  // 双指拉伸

                Log.d(TAG, "ACTION_MOVE");

                // 计算 X方向缩放量

                getScaleX(event);

               // 计算 Y轴方向所放量

                getScaleY(event);

                break;

            case MotionEvent.ACTION_POINTER_UP:  // 先离开的手指

                Log.d(TAG, "ACTION_POINTER_UP");

                break;

        }

    }


    /**

     * 处理 X方向的缩放

     *

     * @param event 事件

     * @return 拉伸量

     */

    private float getScaleX(MotionEvent event) {

        float pointOneX = event.getX(0);

        float pointTwoX = event.getX(1);

        // 算出 X轴方向的拉伸量

        float deltaScaleX = Math.abs(pointOneX - pointTwoX) - Math.abs(pointOne.x - pointTwo.x);

        // 设置拉伸敏感度

        int inDevi = mBaseChart.getWidth() / 54;

        // 计算拉伸时增益偏移量

        int inDe = (int) deltaScaleX / inDevi;

        // 算出最终增益

        int perNumber = numbersPerLargeGridOnThisTime - inDe;

        // 设置增益

        setDataNumbersPerGrid(perNumber);

        return deltaScaleX;

好了，该解释的原理上面都做了解释。上面代码要解释的无非就是缩放敏感度调节的问题，代码里做了解释。缩放量计算出来之后，我们就可以改变心电曲线的增益了。比如说 X方向两点数据之间的距离做了调整、Y方向心电数值计算因子做了调整，然后重新算出曲线 Path再重绘，也就可以了。

6、左上角显示当前增益

最后我们要把当前增益显示出来，比如说 X轴方向一大格绘制了多少点数据、Y轴方向一大格代表多少毫伏。这两个参数都是在上一步双指缩放时动态改变的，所以要留一个对外接口让外界获取到这两个参数。

 /**

     * 获取每大格显示的数据个数，再结合医疗版的采样率，就可以算出一格显示了多长时间的数据

     *

     * @return

     */

    public int getDataNumbersPerGrid() {

        return this.dataNumbersPerGrid;

    }

 /**

     * @return 获取每大格代表多少毫伏

     */

    public float getMvPerLargeGrid() {

        return this.mvPerLargeGrid;

    }

因为这次心电图的绘制比以往的文章都涉及到更多的细节，所以之前文章里讲过的一些实现细节这里就没重复讲。另外，这次自定义 View使用了 Base模板设计模式，用好几个类来实现了这幅心电图，所以没把完整代码贴在这里。代码还是直接放Github吧 ：心电图