K线图是股票分析中非常常见的一种图表形式，它能够直观地反映股票的价格变化趋势。而在实现K线图的过程中，左右拖动是一个非常重要的功能，可以让用户在不同的时间段内查看股票价格的变化。本文将介绍如何利用canvas实现K线图的左右拖动以及十字光标功能思路。
首先在上canvas上绑定移动事件。
定义一个起始索引值startIndex，以及可视区间内的条目数visibleNum，二者组合起来构成了一个区间。在touchMove事件中，增加了一个延迟时间，只有在按住一定毫秒数后才开始响应拖动操作。这样做的目的是为了避免手指轻触即触发拖动操作。
上面的代码中如果手指微微一拖就会快速拖动导致很难控制到我们想拖到的区间，现在来开始改造降低拖动灵敏度。
在计算滑动距离时，乘以一个小于 1 的系数，这样可以减缓滑动速度，从而增加滑动阻力，从而降低了灵敏度。
如果拖到头了或者拖到尾了就得保留当前位置，不能继续拖动。
由于拖动和十字架的处理都在touchMove事件中，需要进行区分，以避免两者同时触发。我的处理思路是，如果用户长按住不动，则显示十字架；如果用户按住并拖动，则执行拖动操作。当显示十字架时，当用户松开手指后，会进行画布的清空操作。
十字架绘制
绘制十字架时，需要频繁清空画布以实现十字架随手指移动的效果。但频繁的清空重绘会导致移动时出现卡顿。实际上，在绘制十字架时，日K、成交量、均线等是不会发生变化的，因此不需要清空重绘它们，只需要清空十字架即可。这样就能减少无意义的清空重绘，提高移动时的流畅性。
为了将变与不变的情况分离，我们可以使用两个canvas进行叠加。日K、成交量、均线等绘制在canvas1上，而十字架则绘制在canvas2上。当触发十字架时，只需要清空重绘canvas2即可，而拖动k线时也不需要处理十字架的画布。这种方式能够有效减少不必要的操作，提高移动的性能。