使用canvas绘制用户鼠标框选元素行为

一、技术选择

1. 鼠标框选元素实现方式是通过监听鼠标的按下和放开时的位置，获取到用户框选的范围，然后用css绘制框选区
2. 通过判断元素上下左右位置是否在选区范围内然后给一个选中的样式

1.可以通过css样式绘制div样式 + transform位置偏移实现。 2.通过HTML5的canvas实现 由于用canvas绘制比直接修改css样式绘制网页性能更好，所以下面主要介绍canvas实现方式。

实现方案

需要获取的数据：

1. 确认鼠标按下起始位置和离开位置
2. 计算框选范围的宽度和高度
3. canvas绘制路径的起始位置

用户在实现鼠标框选行为的时候起始点有左上，左下、右上、右下四个方向，如果是从左上开始框选，则起始点位就是canvas绘制的起始坐标，如果是从其他方向开始框选行为，这个时候canvas的绘制起始坐标就需要通过计算获取，因为canvas的绘制方向始终是从左上角为起始方向,可以通过起始点和绘制宽高计算得到。

判断元素是否在鼠标框选范围内： 1.元素距离顶部的距离 + 元素高度 > 最小框选区域Y坐标 2. 元素顶部距离 < 最大框选Y坐标 3. 元素左边距 + 元素自身宽度 > 最小框选X坐标 4. 元素左边距 < 最大框选X坐标

代码实现

最后根据上面的元素是否在框选区的判断条件，给选区内元素加上选中高亮状态的样式就可以了。