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

JasinYip 发布于2019-08-05 11:15 / 2465人阅读

摘要：注拥有可移植性，可移到页面任何位置，效果不会改变先看最终效果吧图一图二这个小东西会涉及的知识点不多归纳一下的三角函数的鼠标的坐标轴的计算啊哈，差不多大体就这三方面的知识吧，如果你都只是有过了解也没关系，因为都只用的到皮毛所以不必担心。

故事背景：这几天遇到一个客户，是做会议记录的，每次会议过程中，都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值，让我给他做一个图表来展示每个人的一个大概位置。

客户想到的是用Echarts图表来做，我首先想到的也是用Echarts，但是思考了他的要求以后，发现就一个简单的框选图表用Echarts来做是不是大材小用了，而且还要导入那么多的没用的代码。

于是我想到了用canvas画布来仿着做，但又考虑了一下，canvas操作起来不顺手；究竟可不可以用普通的css结合javascript来把它做出来呢？此番思考验证了：任何事情一定要多动脑，才能碰到更简单的解决问题的方式。

考虑到也许某天大家用得着，所以发布出来。注：拥有可移植性，可移到页面任何位置，效果不会改变

先看最终效果吧：
图一：

图二：

这个小东西会涉及的知识点不多,归纳一下：js的三角函数、CSS3的transform、鼠标的坐标轴XY的计算...啊哈，差不多大体就这三方面的知识吧，如果你都只是有过了解也没关系，因为都只用的到皮毛所以不必担心。但是如果完全没听过，那就请您再去了解一下这方面知识。

代码区域




    
    仿Echarts图表

会用到的一些知识点拓展

注：在js中设置Transform的时候我用到的不是scale()方法，因为我想兼容ie9以下的版本所以用了矩阵变化。当然，你们也可以改为scale()，毫无影响。

在标准浏览器下的矩阵函数matix(a,b,c,d,e,f)、ie下的矩阵函数progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod="auto expend")
他们的共同点：M11 == a; M12 == c; M21 == b; M22 == d
不一样的地方：ie下的矩阵函数没有e和f两个参数，在矩阵函数中e和f是用来位移的，也就是说ie下没法通过矩阵函数来实现位移[ 不过我们这里好像不需要位移，嘿嘿 ]

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

通过矩阵实现缩放：
x轴缩放：a = xa c = xc e = x*e
y轴缩放：b = yb d = yd f = y*f

通过矩阵实现位移：[ie下没位移]
x轴位移：e = e+x
y轴位移：f = f+y

通过矩阵实现倾斜：
x轴倾斜：c = Math.tan(xDeg/180*Math.PI)
y轴倾斜：b = Math.tan(yDeg/180*Math.PI)

通过矩阵实现旋转：
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);

至于三角函数我就不介绍了，百度一大把：
三角函数

服务器托管私有云用jsp做一个调查用php做一个网站用jsp做一个界面的 javascript图表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56251.html

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

摘要：注拥有可移植性，可移到页面任何位置，效果不会改变先看最终效果吧图一图二这个小东西会涉及的知识点不多归纳一下的三角函数的鼠标的坐标轴的计算啊哈，差不多大体就这三方面的知识吧，如果你都只是有过了解也没关系，因为都只用的到皮毛所以不必担心。故事背景：这几天遇到一个客户，是做会议记录的，每次会议过程中，都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值，让我给他做一个图表来展示每个人...

zhaochunqi 2019-08-29 12:34 评论0 收藏0
用JavaScript做一个简单的框选图表

摘要：注拥有可移植性，可移到页面任何位置，效果不会改变先看最终效果吧图一图二这个小东西会涉及的知识点不多归纳一下的三角函数的鼠标的坐标轴的计算啊哈，差不多大体就这三方面的知识吧，如果你都只是有过了解也没关系，因为都只用的到皮毛所以不必担心。故事背景：这几天遇到一个客户，是做会议记录的，每次会议过程中，都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值，让我给他做一个图表来展示每个人...

jsdt 2019-08-20 16:32 评论0 收藏0
用JavaScript做一个简单的框选图表

摘要：注拥有可移植性，可移到页面任何位置，效果不会改变先看最终效果吧图一图二这个小东西会涉及的知识点不多归纳一下的三角函数的鼠标的坐标轴的计算啊哈，差不多大体就这三方面的知识吧，如果你都只是有过了解也没关系，因为都只用的到皮毛所以不必担心。故事背景：这几天遇到一个客户，是做会议记录的，每次会议过程中，都会有特定设备记录下讲话人的位置以角度值显示。他给我角度值，让我给他做一个图表来展示每个人...

Kosmos 2019-08-01 16:50 评论0 收藏0
iOS利用OpenCV 实现文字行区域提取的尝试

摘要：这是坐标百度，好像没啥好研究的了，不过出于好奇还是想知道使用是如何做到把文字区域进行框选的，所以接下来我们就看看如何在上使用实现图片中的文字框选。一些探索最近下了几个OCR的App（比如白描），发现可以选中图片中的文字行逐行转成文字，觉得很有意思(当然想用要花钱啦)，想着自己研究一下实现原理，google之后，发现了两个库，一个是OpenCV，在机器视觉方面应用广泛，图像分析必备利器。另一...

番茄西红柿 2019-05-23 15:18 评论0 收藏0
iOS利用OpenCV 实现文字行区域提取的尝试

摘要：这是坐标百度，好像没啥好研究的了，不过出于好奇还是想知道使用是如何做到把文字区域进行框选的，所以接下来我们就看看如何在上使用实现图片中的文字框选。一些探索最近下了几个OCR的App（比如白描），发现可以选中图片中的文字行逐行转成文字，觉得很有意思(当然想用要花钱啦)，想着自己研究一下实现原理，google之后，发现了两个库，一个是OpenCV，在机器视觉方面应用广泛，图像分析必备利器。另一...

ztyzz 2019-05-22 16:40 评论0 收藏0