实现一个公共组件的时候，首先分析一下大概的实现结构以及开发思路，方便我们少走弯路，也可以使组件更加容易拓展，维护性更强。然后我会把功能逐个拆开来讲，这样大家才能学习到更详细的内容。

最近遇到一个需求，做一个可视化图表页面，里面有一个折线图可以说是这个页面中实现起来比较复杂，具体需求如下： 1. 可拖拽的圆点 2. 拖拽过程中，圆点需要保持在线上 3. 每个圆点需要带有标记

<canvas>是由HTML代码配合高度和宽度属性而定义出来的可绘制区域。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。 可以通过使用style属性添加边框，width和height属性定义画布大小，如果不给<canvas>设置宽高属性时，默认宽为30…

在Canvas中实现拖拽也同样如此，Canvas提供了一个名为isPointInPath(x, y)的API，判断点(x, y)是否在路径之中。如果在路径之中，则返回true。于是我们可以有如下思路： 这里就是难理解的点，为什么要记录？继续往下看，后面会使用到。

项目背景 产品提了个需求，要看各种事件对某个指标的影响，要前端开发一个事件和折线图联动的组件，给了个设计稿大概就是上图的样子。 然后根据需求，使用Canvas定制了这样一个组件，并且开源出去...