用JavaScript做一个简朴的框选图表

故事背景：这几天碰到一个客户，是做集会记录的，每次集会过程当中，都邑有特定装备记录下发言人的位置以角度值显现。他给我角度值，让我给他做一个图表来展现每一个人的一个或许位置。

客户想到的是用Echarts图表来做，我起首想到的也是用Echarts，然则思索了他的请求今后，发现就一个简朴的框选图表用Echarts来做是否是牛鼎烹鸡了，而且还要导入那么多的没用的代码。

因而我想到了用canvas画布来仿着做，但又斟酌了一下，canvas操纵起来不顺手；终究可不能够用一般的css连系Javascript来把它做出来呢？此番思索考证了：任何事情一定要多动脑，才 碰 到更简朴的解决题目的体式格局。

斟酌到或许某天人人用得着，所以宣布出来。注：具有可移植性，可移到页面任何位置，结果不会转变

先看终究结果吧：
图一：

图二：

这个小东西会触及的学问点不多,归结一下：js的三角函数、CSS3的transform、鼠标的坐标轴XY的盘算&＃8230;啊哈，差不多大致就这三方面的学问吧，假如你都只是有过相识也没紧要，由于都只用的到外相所以没必要忧郁。然则假如完整没听过，那就请您再去相识一下这方面学问。

注：在js中设置Transform的时刻我用到的不是scale()要领，由于我想兼容ie9以下的版本所以用了矩阵变化。固然，你们也能够改成scale()，毫无影响。

1. 在规范浏览器下的矩阵函数matix(a,b,c,d,e,f)、ie下的矩阵函数progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=&＃8217;auto expend&＃8217;)
   他们的共同点：M11 == a; M12 == c; M21 == b; M22 == d
   不一样的处所：ie下的矩阵函数没有e和f两个参数，在矩阵函数中e和f是用来位移的，也就是说ie下没法经由过程矩阵函数来完成位移[ 不过我们这里彷佛不需要位移，嘿嘿 ]

2. 在规范浏览器下矩阵函数matrix中a,b,c,d,e,f 一一对应的的初始值为：matix(1,0,0,1,0,0)

3. 经由过程矩阵完成缩放：
   x轴缩放：a = xa c = xc e = x*e
   y轴缩放：b = yb d = yd f = y*f

4. 经由过程矩阵完成位移：[ie下没位移]
   x轴位移：e = e+x
   y轴位移：f = f+y

5. 经由过程矩阵完成倾斜：
   x轴倾斜：c = Math.tan(xDeg/180*Math.PI)
   y轴倾斜：b = Math.tan(yDeg/180*Math.PI)

6. 经由过程矩阵完成扭转：
   a = Math.cos(deg/180*Math.PI);
   b = Math.sin(deg/180*Math.PI);
   c = -Math.sin(deg/180*Math.PI);
   d = Math.cos(deg/180*Math.PI);

7. 至于三角函数我就不引见了，百度一大把：
   三角函数