Flutter篇 （二）绘制贝塞尔曲线 、折线 、柱状图，支持触摸

     之前写过一篇Android原生绘制曲线图的博客，动画效果不要太丝滑，那么现在到了Flutter，该如何实现类似的效果呢？如果你熟悉android的Canvas,那么恭喜你, 你将很快上手Flutter的Canvas绘制各种图形，因为实现方式基本上与android是一模一样

先看下要实现的基本效果：

             

    Flutter中如果想要自定义绘制，那么你需要用到 CustomPaint 和 CustomPainter ;  CustomPaint是Widget的子类，先来看下构造方法

const CustomPaint({
    Key key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    Widget child,
  }) :super(key: key, child: child);

      我们只需要关心三个参数，painter，foregroundPainter 和 child  ， 这里需要说明一下，painter 是绘制的 backgroud 层，而child 是在backgroud之上绘制，foregroundPainter 是在 child 之上绘制，所以这里就有了个层级关系，这跟android里面的backgroud与foreground是一个意思，那这两个painter的应用场景是什么呢？假如你只是单纯的想绘制一个图形，只用painter就可以了，但是如果你想给绘制区域添加一个背景（颜色，图片，等等），这时候如果使用 painter是会有问题的，painter的绘制会被child 层覆盖掉，此时你只需要将painter替换成foregroundPainter,然会颜色或者图片传递给child即可。

      如果是Android绘制几何图形，应该是重写View的onLayout() 和 onDraw方法，但是Flutter实现绘制，必须继承CustomPainter并重写 paint（Canvas canvas, Size size）和 shouldRepaint (CustomPainter oldDelegate) 方法 ，第一个参数canvas就是我们绘制的画布了（跟Android一模一样），paint第二个参数Size就是上面CustomPaint构造方法传入的size, 决定绘制区域的宽高信息

       既然Size已经确定了，现在就定义下绘制区域的边界,一般我做类似的UI，都会定义一个最基本的padding, 一般取值为16 ， 因为绘制的内容与坐标轴之间需要找到一个基准线，这样更容易绘制，而且调试边距也很灵活

double startX, endX, startY, endY;//定义绘制区域的边界
static const double basePadding = 16; //默认的边距
double fixedHeight, fixedWidth; //去除padding后曲线的真实宽高
bool isShowXyRuler; //是否显示xy刻度
List<ChatBean> chatBeans;//数据源

class ChatBean {
  String x;
  double y;
  int millisSeconds;
  Color color;

  ChatBean({