这一段在对接公司的蓝牙心电项目，其中有个需求需要画动态心电图，我从网上也参考了一些大神的文章，感觉都有些复杂，根据需求，我做了一个简单的心电图效果，各位路过的大神勿喷。

1.画网格和一些简单的说明：

 int width = getMeasuredWidth();

        //列数，所能容纳点数
        colomn= (int) (width / gap_x);

        //画网格

        for (int i = 0; i < 13; i++)
        {
            canvas.drawLine(0, i * 32 + getPaddingTop(), width, i * 32 + getPaddingTop(), wangge_Paint);
        }
        for (int i = 0; i < colomn; i++)
        {
            canvas.drawLine(i * 32, 0 + getPaddingTop(), i * 32, 12 * 32 + getPaddingTop(), wangge_Paint);
        }

        // 显示单位
        String ruleStr = computeruleStr();
        float ruleStrWidth = pixPaint.measureText(ruleStr);
        canvas.drawText(ruleStr, getWidth() - 32 - ruleStrWidth, 40 + getPaddingTop(), pixPaint);

        canvas.drawPath(makeFollowPathOne(), mPaint);

其中单位拼接的代码如下：

 private String computeruleStr()
    {
        StringBuffer sb = new StringBuffer();
        sb.append(scale.multiply(new BigDecimal("25")).toString());
        sb.append("mm/s   ");
        sb.append(scale.toString());
        sb.append("mm/0.1mv");
        return sb.toString();
    }

2.画心电图

public Path makeFollowPathOne()
    {
        Path p = new Path();
        if (data.size() == 0)
            return p;
        for (int i = 0 ; i < data.size() ; i ++){
            float nnn = gap_x * i ;
            if (nnn >= 0 ){

                p.moveTo(nnn, getY_coordinate(data.get(i)));
                break;
            }
        }
        for (int i = 0; i < data.size(); i ++){
                p.lineTo(gap_x * i , getY_coordinate(data.get(i)));

        }
        return p;
    }

其中gap_x是两点间横坐标间距，调用 canvas.drawPath(makeFollowPathOne(), mPaint)进行绘制。

3.更新心电图，并实现从右向左的效果

 public void addData(Float point){
        data.add(point);
        //如果超出所容纳点个数，就移除第一个
        if(data.size()>colomn){
            data.remove(0);
        }
        setData(data);
    }
    public void setData(List<Float> data) {
        this.data = data;
        invalidate();
    }

关键记住，当超过列数后，移除第一个点，来达到从右向左滚动的效果。

最终效果如图： Screenshot_1522462557.png