用JavaScript做一個簡單的框選圖表

zhaochunqi 發布于2019-08-29 12:34 / 444人閱讀

摘要：注擁有可移植性，可移到頁面任何位置，效果不會改變先看最終效果吧圖一圖二這個小東西會涉及的知識點不多歸納一下的三角函數的鼠標的坐標軸的計算啊哈，差不多大體就這三方面的知識吧，如果你都只是有過了解也沒關系，因為都只用的到皮毛所以不必擔心。

故事背景：這幾天遇到一個客戶，是做會議記錄的，每次會議過程中，都會有特定設備記錄下講話人的位置以角度值顯示。他給我角度值，讓我給他做一個圖表來展示每個人的一個大概位置。

客戶想到的是用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);

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

云服務器 GPU云服務器用jsp做一個調查用php做一個網站用jsp做一個界面的 javascript圖表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111994.html

用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