国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jsdt / 884人閱讀

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

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

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

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

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

先看最終效果吧：
圖一：

圖二：

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

代碼區(qū)域 



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

    在標(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ù)沒(méi)有e和f兩個(gè)參數(shù)，在矩陣函數(shù)中e和f是用來(lái)位移的，也就是說(shuō)ie下沒(méi)法通過(guò)矩陣函數(shù)來(lái)實(shí)現(xiàn)位移[ 不過(guò)我們這里好像不需要位移，嘿嘿 ]

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

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

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

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

    通過(guò)矩陣實(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82994.html

    相關(guān)文章

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

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

      zhaochunqi 評(píng)論0 收藏0

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

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

      Kosmos 評(píng)論0 收藏0

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

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

      番茄西紅柿 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

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