欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript制作簡(jiǎn)單的框選圖表

 更新時(shí)間:2017年05月15日 14:58:46   作者:Joker_Ye  
這篇文章主要為大家詳細(xì)介紹了JavaScript制作一個(gè)簡(jiǎn)單的框選圖表,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

故事背景:這幾天遇到一個(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ū)域

<!doctype html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <title>仿Echarts圖表</title> 
 <style> 
 * { 
  padding:0; 
  margin:0; 
 } 
 #getcharts { 
  position:relative; 
  width:510px; 
  height:510px; 
 
 } 
 #wrapcharts { 
  list-style:none; 
  height:500px; 
  width:500px; 
  border:2px solid #aaa; 
  border-radius:50%; 
  position:relative; 
  margin:20px auto; 
 } 
 #wrapcharts li { 
  height:10px; 
  width:10px; 
  diaplay:block; 
  position:absolute; 
  cursor:pointer; 
  left:247px; 
  top:2px; 
  height:10px; 
  width:10px; 
  transition:0.2s; 
  background:red; 
  border-radius:50%; 
 } 
 #boxshadow { 
  position:absolute; 
  background:blue; 
  opacity:0.2; 
  height:0; 
  width:0; 
  left:0; 
  top:0; 
 } 
 </style> 
</head> 
<body> 
 
 <ul id="wrapcharts"></ul> 
 <div id="boxshadow"></div> 
 
<script> 
 /* 
 **聲明 getPos(param)函數(shù): 利用三角函數(shù)定理根據(jù)傳入的角度值獲取對(duì)邊和臨邊的x,y值 
 **/ 
 function getPos(deg) 
 { 
 var X = Math.sin(deg*Math.PI/180)*250 + 245; 
 var Y = -Math.cos(deg*Math.PI/180)*250 + 245; 
 return {x:X,y:Y}; 
 } 
 /* 
 **這里不用說(shuō)吧,獲取頁(yè)面中的ul,和ul中的li對(duì)象,以及框選時(shí)的那個(gè)任意變動(dòng)大小的小方塊對(duì)象 
 **/ 
 var oWrap = document.getElementById('wrapcharts'); 
 var aLi = oWrap.getElementsByTagName('li'); 
 var oBox =document.getElementById('boxshadow'); 
 var allLi = ''; 
 var posArr = []; 
 /* 
 **for循環(huán)中調(diào)用getPos(param)來(lái)獲取degArr數(shù)組中的所有角度對(duì)應(yīng)的x,y值(就是每個(gè)角度對(duì)應(yīng)的x,y坐標(biāo)),并傳入到一個(gè)數(shù)組中保存,方便取用 
 **/ 
 for(var i=0;i<degArr.length; i++) 
 { 
 posArr.push(getPos(degArr[i])); 
 } 
 /* 
 **for循環(huán)根據(jù)度數(shù)數(shù)組degArr的長(zhǎng)度插入li小圓點(diǎn)到ul中,并將之前獲取的每個(gè)點(diǎn)對(duì)應(yīng)的x,y左邊插入到行內(nèi)樣式 
 **/ 
 for(var i=0; i<degArr.length; i++) 
 { 
 allLi += '<li style="left:'+posArr[i].x+'px;top:'+posArr[i].y+'px;" title="'+degArr[i]+'°;姓名:'+nameArr[i]+'"></li>'; 
 } 
 oWrap.innerHTML = allLi; 
 /* 
 **遍歷最終得到的ul中的li 
 **/ 
 for(var i=0; i<aLi.length; i++) 
 { 
 aLi[i].index = i; 
 /* 
  **封裝鼠標(biāo)移入每個(gè)小圓點(diǎn)時(shí)的放大事件,這里用到了matrix矩陣,為的事想兼容ie9以下瀏覽器,但是好像出了點(diǎn)問(wèn)題 
  */ 
 function focusOn(_this,color, size) 
 { 
  _this.style.background = color; 
  _this.style.WebkitTransform = 'matrix('+size+', 0, 0, '+size+', 0, 0)'; 
  _this.style.MozTransform = 'matrix('+size+', 0, 0, '+size+', 0, 0)'; 
  _this.style.transform = 'matrix('+size+', 0, 0, '+size+', 0, 0)'; 
  _this.style.filter="progid:DXImageTransform.Microsoft.Matrix( M11= "+size+", M12= 0, M21= 0 , M22="+size+",SizingMethod='auto expend')"; 
 } 
 aLi[i].onmouseover = function() 
 { 
  //alert(this.offsetLeft); 
  _this = this; 
  focusOn(_this,'blue', 2); 
 } 
 aLi[i].onmouseout = function() 
 { 
  //alert(this.offsetLeft); 
  _this = this; 
  focusOn(_this,'red', 1); 
 
 } 
 } 
 /***框選***/ 
 /* 
 **拖拽框選代碼區(qū)域,這個(gè)我就不解釋了,明白人都一眼知道什么意思,這就像是公式, 
 */ 
 var allSelect = {}; 
 document.onmousedown = function(ev) 
 { 
 var ev = ev || window.event; 
 var disX = ev.clientX; 
 var disY = ev.clientY; 
 var H = W = clientleft = clienttop = clientright = clientbottom = 0; 
 oBox.style.cssText = 'left:'+disX+'px;top:'+disY+'px;'; 
 //console.log(disX+';'+disY); 
 function again(f) 
 { 
  for(var i=0; i<posArr.length; i++) 
  { 
  if(posArr[i].x > clientleft && posArr[i].y > clienttop && (posArr[i].x + 10) < clientright && (posArr[i].y +10) < clientbottom) 
  { 
   //console.log(clientleft+';'+ clienttop +';'+ clientright +';' + clientbottom); 
   if(f){allSelect[i] = i;}else{ 
   aLi[i].style.background = 'blue'; 
   } 
  } else 
  { 
   aLi[i].style.background = 'red'; 
  } 
  } 
 
 } 
 
 document.onmousemove = function(ev) 
 { 
  var ev = ev || window.event; 
  /* 
  **當(dāng)鼠標(biāo)向四個(gè)方向拖拉的時(shí)候進(jìn)行方向判斷,并相應(yīng)的改變小方塊的left,top以及width,height 
  **其實(shí)我這里有個(gè)問(wèn)題,那就是,代碼重復(fù)了一些,本想著合并一下,但是作者有點(diǎn)懶,嘿嘿,你們也可以嘗試一下 
  **修改后你們拿去當(dāng)做你們的發(fā)布,作者不會(huì)介意的 
  */ 
  if(ev.clientX > disX && ev.clientY > disY) 
  { 
  W = ev.clientX - disX; 
  H = ev.clientY - disY; 
 
  oBox.style.width = W + 'px'; 
  oBox.style.height = H + 'px'; 
 
  clienttop = disY-oWrap.offsetTop; 
  clientleft = disX-oWrap.offsetLeft; 
 
  }else if(ev.clientX < disX && ev.clientY < disY) 
  { 
  W = disX - ev.clientX; 
  H = disY - ev.clientY; 
 
  oBox.style.top = ev.clientY + 'px'; 
  oBox.style.left = ev.clientX + 'px'; 
 
  oBox.style.width = W + 'px'; 
  oBox.style.height = H + 'px'; 
 
  clienttop = ev.clientY - oWrap.offsetTop; 
  clientleft = ev.clientX - oWrap.offsetLeft; 
 
  }else if(ev.clientX > disX && ev.clientY < disY) 
  { 
  W = ev.clientX - disX; 
  H = disY - ev.clientY; 
 
  oBox.style.top = ev.clientY + 'px'; 
 
  oBox.style.width = W + 'px'; 
  oBox.style.height = H + 'px'; 
 
  clienttop = ev.clientY - oWrap.offsetTop; 
  clientleft = disX - oWrap.offsetLeft; 
 
  }else if(ev.clientX < disX && ev.clientY > disY) 
  { 
  W = disX - ev.clientX; 
  H = ev.clientY - disY; 
 
  oBox.style.left = ev.clientX + 'px'; 
 
  oBox.style.width = W + 'px'; 
  oBox.style.height = H + 'px'; 
 
  clienttop = disY-oWrap.offsetTop; 
  clientleft = ev.clientX - oWrap.offsetLeft; 
  } 
 
 
  clientright = clientleft+ W; 
  clientbottom = clienttop + H; 
 
  W = ''; 
  H = ''; 
 
  again(); 
 
 } 
 document.onmouseup = function() 
 { 
  again(1); 
 
  document.onmouseup = document.onmousemove = null; 
  oBox.style.cssText = 'height:0;width:0;'; 
  if(JSON.stringify(allSelect) == '{}'){return;} 
  console.log(allSelect); 
 
  var lastSelect = []; 
  for(var attr in allSelect){ 
  lastSelect.push(nameArr[attr]); 
  } 
  allSelect = {}; 
 
  console.log(lastSelect); 
  alert('你選中的人是:\n\n'+lastSelect+'\n\n'); 
 
  for(var i=0; i<aLi.length; i++) 
  { 
  aLi[i].style.background = 'red'; 
  } 
 } 
 return false; 
 } 
</script> 
</body> 
</html> 

會(huì)用到的一些知識(shí)點(diǎn)拓展

注:在js中設(shè)置Transform的時(shí)候我用到的不是scale()方法,因?yàn)槲蚁爰嫒輎e9以下的版本所以用了矩陣變化。當(dāng)然,你們也可以改為scale(),毫無(wú)影響。

1.在標(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ò)我們這里好像不需要位移,嘿嘿 ]

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

3.通過(guò)矩陣實(shí)現(xiàn)縮放:

x軸縮放:a = x a c = x c e = x*e

y軸縮放:b = y b d = y d f = y*f

4.通過(guò)矩陣實(shí)現(xiàn)位移:[ie下沒(méi)位移]

x軸位移:e = e+x

y軸位移:f = f+y

5.通過(guò)矩陣實(shí)現(xiàn)傾斜:

x軸傾斜:c = Math.tan(xDeg/180*Math.PI)

y軸傾斜:b = Math.tan(yDeg/180*Math.PI)

6.通過(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);

7.至于三角函數(shù)我就不介紹了,百度一大把。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能

    使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能

    這篇文章主要介紹了使用原生js實(shí)現(xiàn)拖拽和粘貼上傳圖片功能,Vue/Rect?生態(tài)用多了都快忘記原生js怎么寫(xiě)了,今天需要直接在服務(wù)器裸寫(xiě)個(gè)頁(yè)面,實(shí)現(xiàn)?textarea?文本框里接收拖拽多個(gè)圖片,需要的朋友可以參考下
    2024-04-04
  • 淺談JavaScript正則表達(dá)式分組匹配

    淺談JavaScript正則表達(dá)式分組匹配

    一個(gè)正則表達(dá)式要如何書(shū)寫(xiě)才能同時(shí)匹配這兩個(gè)數(shù)字呢?簡(jiǎn)單的字符表達(dá)式當(dāng)然無(wú)法完成了,這個(gè)時(shí)候我們就可以定義一個(gè)字符集合(字符類)來(lái)進(jìn)行匹配。這就是分組匹配了
    2015-04-04
  • bootstrap table列和表頭對(duì)不齊的解決方法

    bootstrap table列和表頭對(duì)不齊的解決方法

    這篇文章主要為大家詳細(xì)介紹了bootstrap table列和表頭對(duì)不齊的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 詳解JavaScript實(shí)現(xiàn)動(dòng)態(tài)的輪播圖效果

    詳解JavaScript實(shí)現(xiàn)動(dòng)態(tài)的輪播圖效果

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)的輪播圖效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解

    Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解

    要了解JavaScript數(shù)組的堆棧和隊(duì)列方法的操作,需要先對(duì)堆棧和隊(duì)列基礎(chǔ)知識(shí)有所了解,下面這篇文章主要給大家介紹了關(guān)于Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-05-05
  • js showModalDialog 彈出對(duì)話框的簡(jiǎn)單實(shí)例(子窗體)

    js showModalDialog 彈出對(duì)話框的簡(jiǎn)單實(shí)例(子窗體)

    本篇文章主要是對(duì)js_showModalDialog彈出對(duì)話框的簡(jiǎn)單實(shí)例(子窗體) 進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • js控制href內(nèi)容的連接內(nèi)容的變化示例

    js控制href內(nèi)容的連接內(nèi)容的變化示例

    這篇文章主要介紹了使用js控制href內(nèi)容的連接內(nèi)容的變化,需要的朋友可以參考下
    2014-04-04
  • js clearInterval()方法的定義和用法

    js clearInterval()方法的定義和用法

    clearInterval()方法能夠取消setInterval()方法設(shè)置的定時(shí)器,本文給大家詳解clearInterval()方法的定義和用法,感興趣的朋友參考下。
    2015-11-11
  • layui-table對(duì)返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例

    layui-table對(duì)返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例

    今天小編就為大家分享一篇layui-table對(duì)返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝

    js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07

最新評(píng)論