成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用JavaScript做一個(gè)簡單的框選圖表

jsdt / 889人閱讀

摘要：注擁有可移植性，可移到頁面任何位置，效果不會(huì)改變先看最終效果吧圖一圖二這個(gè)小東西會(huì)涉及的知識(shí)點(diǎn)不多歸納一下的三角函數(shù)的鼠標(biāo)的坐標(biāo)軸的計(jì)算啊哈，差不多大體就這三方面的知識(shí)吧，如果你都只是有過了解也沒關(guān)系，因?yàn)槎贾挥玫牡狡っ圆槐負(fù)?dān)心。

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

客戶想到的是用Echarts圖表來做，我首先想到的也是用Echarts，但是思考了他的要求以后，發(fā)現(xiàn)就一個(gè)簡單的框選圖表用Echarts來做是不是大材小用了，而且還要導(dǎo)入那么多的沒用的代碼。

于是我想到了用canvas畫布來仿著做，但又考慮了一下，canvas操作起來不順手；究竟可不可以用普通的css結(jié)合javascript來把它做出來呢？此番思考驗(yàn)證了：任何事情一定要多動(dòng)腦，才能 碰 到更簡單的解決問題的方式。

考慮到也許某天大家用得著，所以發(fā)布出來。注：擁有可移植性，可移到頁面任何位置，效果不會(huì)改變

先看最終效果吧：
圖一：

圖二：

這個(gè)小東西會(huì)涉及的知識(shí)點(diǎn)不多,歸納一下：js的三角函數(shù)、CSS3的transform、鼠標(biāo)的坐標(biāo)軸XY的計(jì)算...啊哈，差不多大體就這三方面的知識(shí)吧，如果你都只是有過了解也沒關(guān)系，因?yàn)槎贾挥玫牡狡っ圆槐負(fù)?dān)心。但是如果完全沒聽過，那就請您再去了解一下這方面知識(shí)。

代碼區(qū)域 



    
    仿Echarts圖表
    會(huì)用到的一些知識(shí)點(diǎn)拓展
    注：在js中設(shè)置Transform的時(shí)候我用到的不是scale()方法，因?yàn)槲蚁爰嫒輎e9以下的版本所以用了矩陣變化。當(dāng)然，你們也可以改為scale()，毫無影響。

    在標(biāo)準(zhǔn)瀏覽器下的矩陣函數(shù)matix(a,b,c,d,e,f)、ie下的矩陣函數(shù)progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod="auto expend")
    他們的共同點(diǎn)：M11 == a; M12 == c; M21 == b; M22 == d
    不一樣的地方：ie下的矩陣函數(shù)沒有e和f兩個(gè)參數(shù)，在矩陣函數(shù)中e和f是用來位移的，也就是說ie下沒法通過矩陣函數(shù)來實(shí)現(xiàn)位移[ 不過我們這里好像不需要位移，嘿嘿 ]

    在標(biāo)準(zhǔn)瀏覽器下矩陣函數(shù)matrix中a,b,c,d,e,f 一一對應(yīng)的的初始值為：matix(1,0,0,1,0,0)

    通過矩陣實(shí)現(xiàn)縮放：
    x軸縮放：a = xa c = xc e = x*e
    y軸縮放：b = yb d = yd f = y*f

    通過矩陣實(shí)現(xiàn)位移：[ie下沒位移]
    x軸位移：e = e+x
    y軸位移：f = f+y

    通過矩陣實(shí)現(xiàn)傾斜：
    x軸傾斜：c = Math.tan(xDeg/180*Math.PI)
    y軸傾斜：b = Math.tan(yDeg/180*Math.PI)

    通過矩陣實(shí)現(xiàn)旋轉(zhuǎn)：
    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);

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

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82994.html

    相關(guān)文章

    • 用JavaScript做一個(gè)簡單的框選圖表

      摘要：注擁有可移植性，可移到頁面任何位置，效果不會(huì)改變先看最終效果吧圖一圖二這個(gè)小東西會(huì)涉及的知識(shí)點(diǎn)不多歸納一下的三角函數(shù)的鼠標(biāo)的坐標(biāo)軸的計(jì)算啊哈，差不多大體就這三方面的知識(shí)吧，如果你都只是有過了解也沒關(guān)系，因?yàn)槎贾挥玫牡狡っ圆槐負(fù)?dān)心。 故事背景：這幾天遇到一個(gè)客戶，是做會(huì)議記錄的，每次會(huì)議過程中，都會(huì)有特定設(shè)備記錄下講話人的位置以角度值顯示。他給我角度值，讓我給他做一個(gè)圖表來展示每個(gè)人...

      zhaochunqi 評論0 收藏0

    • 用JavaScript做一個(gè)簡單的框選圖表

      摘要：注擁有可移植性，可移到頁面任何位置，效果不會(huì)改變先看最終效果吧圖一圖二這個(gè)小東西會(huì)涉及的知識(shí)點(diǎn)不多歸納一下的三角函數(shù)的鼠標(biāo)的坐標(biāo)軸的計(jì)算啊哈，差不多大體就這三方面的知識(shí)吧，如果你都只是有過了解也沒關(guān)系，因?yàn)槎贾挥玫牡狡っ圆槐負(fù)?dān)心。 故事背景：這幾天遇到一個(gè)客戶，是做會(huì)議記錄的，每次會(huì)議過程中，都會(huì)有特定設(shè)備記錄下講話人的位置以角度值顯示。他給我角度值，讓我給他做一個(gè)圖表來展示每個(gè)人...

      Kosmos 評論0 收藏0

    • iOS利用OpenCV 實(shí)現(xiàn)文字行區(qū)域提取的嘗試

      摘要：這是坐標(biāo)百度，好像沒啥好研究的了，不過出于好奇還是想知道使用是如何做到把文字區(qū)域進(jìn)行框選的，所以接下來我們就看看如何在上使用實(shí)現(xiàn)圖片中的文字框選。一些探索 最近下了幾個(gè)OCR的App（比如白描），發(fā)現(xiàn)可以選中圖片中的文字行逐行轉(zhuǎn)成文字，覺得很有意思(當(dāng)然想用要花錢啦)，想著自己研究一下實(shí)現(xiàn)原理，google之后，發(fā)現(xiàn)了兩個(gè)庫，一個(gè)是OpenCV，在機(jī)器視覺方面應(yīng)用廣泛，圖像分析必備利器。另一...

      番茄西紅柿 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動(dòng)
    閱讀需要支付1元查看
    <