整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在video-js的demo中看到了很多aria-*，不知道干嘛的。google一下，發現aria的意思是Accessible Rich Internet Application。 Accessible一般是為不方便的人士提供的功能，比如windows的放大鏡，語音朗讀，高對比度主題等。
google到了一個youtube的視頻，講解的很清楚，有代碼有示例。估計是Google Developer Day 2011的分享演講。真是個有責任感人性化的公司啊！
主要內容是說明并演示了HTML5針對html tag增加的屬性：role 和 aria-*。
role的作用是描述一個非標準的tag的實際作用。比如用div做button，那么設置div 的 role=“button”，輔助工具就可以認出這實際上是個button。
ARIA Roles
Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.
而aria-*的作用就是描述這個tag在可視化的情境中的具體信息。比如，
<div role="checkbox" aria-checked="checked"$amp;>amp;$lt;/div>
輔助工具就會知道，這個div實際上是個checkbox的角色，為選中狀態。
Add ARIA for screen readers
ARIA attributes provides semantic information to screen readers that is normally conveyed visually.
Note that using ARIA does not automatically implement the standard widget behavior, you'll still need to add focus management and keyboard navigation yourself.
覺目前地鐵上的地鐵線路圖也不是很人性化，很多交互方面沒有考慮到用戶的需求？感覺總是有各種容易看串的信息，利用 html5 canvas 完成的這個交互式地鐵線路圖 Demo，如果地鐵上的展示信息稍微有點交互會怎么樣？不用忙著上車下車，輕輕一點，就能省去很多時間。
前兩天在 echarts 上尋找靈感的時候，看到了很多有關地圖類似的例子，地圖定位等等，但是好像就是沒有地鐵線路圖，就自己花了一些時間搗鼓出來了這個交互式地鐵線路圖的 Demo，地鐵線路上的點是在網上隨便下載了一個，這篇文章記錄自己的一些收獲（畢竟我還是個菜鳥）以及代碼的實現，希望能夠幫到一些朋友。當然，如果有什么意見的可以直接跟我說，大家一起交流才會進步。
效果圖
http://www.hightopo.com/demo/subway/index.html
地圖稍微內容有點多，要全部展示，字顯得有點小了，但是沒關系，可以按照需求放大縮小，字體和繪制的內容并不會失真，畢竟都是用矢量繪制的~
界面生成
底層的 div 是通過 ht.graph.GraphView 組件生成的，然后就可以利用 HT for Web 提供好的方法，調用 canvas 畫筆隨便繪制就好，先來看看怎么生成底層 div：
addToDOM 函數聲明如下：
現在我就可以在這個 div 上亂涂亂畫了~首先我獲取下載好的地鐵線路圖上的點，我將它們放在 subway.js 中，這個 js 文件全部都是下載的內容，我沒有做其他的改動，主要是將這些點根據線路來分分配添加到數組中，比如：
接下來來描繪地鐵線路，我聲明了一個數組 lineNum，用來裝 js 中所有的地鐵線路的編號，以及一個 color 數組，用來裝所有的地鐵線的顏色，這些顏色的 index 與 lineNum 中地鐵線編號的 index 是一一對應的：
var lineNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14', '32', '18', '21', '22', '60', '68'];
var color = ['#f1cd44', '#0060a1', '#ed9b4f', '#ed9b4f', '#007e3a', '#cb0447', '#7a1a57', '#18472c', '#008193', '#83c39e', '#8a8c29', '#82352b', '#82352b', '#09a1e0', '#8a8c29', '#82352b', '#b6d300', '#09a1e0'];
接著遍歷 lineNum，將 lineNum 中的元素和顏色傳到 createLine 函數中，根據這兩個參數來繪制地鐵線路以及配色，畢竟 js 文件中的命名方式也是有規律的，哪一條線路，則命名后面一定會加上對應的數字，所以我們只需要將字符串與這個編號結合即可獲得 js 中對應的數組了：
createLine 的定義也非常簡單，我的代碼設置了不少的樣式，所以看起來有點多。創建一個 ht.Polyline 管線，我們可以通過 polyline.addPoint() 函數向這個變量中添加具體的點，通過 setSegments 可以設置點的連接方式。
上面代碼中添加地鐵線上的點有分為幾種情況，是因為 js 中設置線的時候 Line68 有一個“跳躍”點的現象，所以我們必須“跳躍”過去，篇幅有限 Line68 數組具體的聲明自行看 subway.js。
這里說明一點，如果用的是 addPoint 函數，不設置 segments 時，默認將添加進的點用直線連接，segments 的定義如下：
所以我們要做“跳躍”的行為設置 segments 為 1 即可。
最后繪制這些地鐵線上的點，這個部分 subway.js 中也分離出來了，命名以“mark_Point”、“t_Point”以及“n_Point”開頭，我在前面 js 的展示部分有對這些數組進行解釋，大家動動中指劃上去看看。
我們在這些點的位置添加 ht.Node 節點，當節點一添加進 dm 數據容器中時，就會在拓撲圖上顯示，當然，前提是這個拓撲圖組件 gv 設置的數據容器是這個 dm。篇幅有限，添加地鐵線上的點的代碼部分我只展示添加“換乘站點”的點：
var tName = 't_Point' + num;
var tP = window[tName];//大站點
if(tP) {//有些線路沒有“換乘站點”
for(let i = 0; i < tP.length; i++) {
let node = createNode(tP[i].name, tP[i].value, color[index]);//在獲取的線路上的點的坐標位置添加節點
node.s({//設置節點的樣式style
'label.scale': 0.05,//文本縮放，可以避免瀏覽器限制的最小字號問題
'label.font': 'bold 12px arial, sans-serif'//設置文本的font
});
node.setSize(0.6, 0.6);//設置節點大小。由于js中每個點之間的偏移量太小，所以我不得不把節點設置小一些
node.setImage('images/旋轉箭頭.json');//設置節點的圖片
node.a('alarmColor1', 'rgb(150, 150, 150)');//attr屬性，可以在這里面設置任何的東西，alarmColor1是在上面設置的image的json中綁定的屬性，具體參看 HT for Web 矢量手冊(http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_binding)
node.a('alarmColor2', 'rgb(150, 150, 150)');//同上
node.a('tpNode', true);//這個屬性設置只是為了用來區分“換乘站點”和“小站點”的，后面會用上
}
}
所有的地鐵線路以及站點都添加完畢。但是！你可能會看不見自己繪制的圖，因為他們太小了，這個時候可以設置 graphView 拓撲組件上的 fitContent 函數，我們順便將拓撲圖上的所有東西不可移動也設置一下：
這下你的地鐵線路圖就可以顯示啦~接下來看看交互。
交互
首先是鼠標移動事件，鼠標滑過具體線路時，線路會變粗，懸停一會兒還能看到這條線路的編號；當鼠標移動到“換乘站點”或“小站點”，站點對應的圖標都會變大并且變色，字體也會變大，鼠標移開圖標變回原來的顏色并且字體變小。不同點在于鼠標移動到“換乘站點”時，“換乘站點”會旋轉。
動圖查看：http://images2017.cnblogs.com/blog/1159588/201802/1159588-20180209144029670-1869445696.gif
鼠標滑動事件，我直接基于 gv 的底層 div 進行的 mousemove 事件，通過 ht 封裝的 getDataAt 函數傳入事件 event 參數，獲取事件下對應的節點，然后就可以隨意操作節點了：
gv.getView().addEventListener('mousemove', function(e) {
var data = gv.getDataAt(e);//傳入邏輯坐標點或者交互event事件參數，返回當前點下的圖元
if(name) {
originNode(name);//不管什么時候都要讓節點保持原來的大小
}
if (data instanceof ht.Polyline) {//判斷事件節點的類型
dm.sm().ss(data);//選中“管道”
name = '';
clearInterval(interval);
}
else if (data instanceof ht.Node) {
if(data.getTag() !== name && data.a('tpNode')) {//若不是同一個節點，并且mousemove的事件對象為ht.Node類型，那么設置節點的旋轉
interval = setInterval(function() {
data.setRotation(data.getRotation() - Math.PI/16); //在自身旋轉的基礎上再旋轉
}, 100);
}
if(data.a('npNode')) {//如果鼠標移到“小站點”也要停止動畫
clearInterval(interval);
}
expandNode(data, name);////自定義的放大節點函數，比較容易，我不粘代碼了，可以去http://hightopo.com/ 查看
dm.sm().ss(data);//設置選中節點
name = data.getTag();//作為“上一個節點”的存儲變量，可以通過這個值來獲取節點
}
else {//其他任何情況則不選中任何內容并且清除“換乘站點”上的動畫
dm.sm().ss(null);
name = '';
clearInterval(interval);
}
});
鼠標懸停在地鐵線路上時顯示“具體線路信息”，我是通過設置 tooltip 來完成的（注意：要打開 gv 的 tooltip 開關）：
然后我利用右下角的 form 表單，單擊表單上的具體線路，或者雙擊拓撲圖上任意一個“站點”或者線路，則拓撲圖會自適應到對應的部分，將被雙擊的部分展現到拓撲圖的中央。
動圖查看：https://images2018.cnblogs.com/blog/1159588/201803/1159588-20180304211422285-588264011.gif
form 表單的聲明部分我好像還沒有解釋。。。就是通過 new 一個 ht.widget.FomePane 類創建一個 form 表單組件，通過 form.getView() 獲取表單組件的底層 div，將這個 div 擺放在 body 右下角，然后通過 addRow 函數向 form 表單中添加一行的表單項，可以在這行中添加任意多個項，通過 addRow 函數的第二個參數（一個數組），對添加進的表單項進行寬度的設置，通過第三個參數設置這行的高度：
單擊“站點”顯示紅色標注，雙擊節點自適應放置到拓撲圖中央以及雙擊空白處將紅色標注隱藏的內容都是通過對拓撲組件 gv 的事件監聽來控制的，非常清晰易懂，代碼如下：
var node = createRedLight();//創建一個新的節點，顯示為“紅燈”的樣式
gv.mi(function(e) {//ht 中拓撲組件中的事件監聽
if(e.kind === 'clickData' && (e.data.a('tpNode') || e.data.a('npNode'))) {//e.kind獲取當前事件類型，e.data獲取當前事件下的節點
node.s('2d.visible', true);//設置node節點可見
node.setPosition(e.data.getPosition().x, e.data.getPosition().y);//設置node的坐標為當前事件下節點的位置
}
else if(e.kind === 'doubleClickData') {//雙擊節點
gv.fitData(e.data, false, 10);//將事件下的節點自適應到拓撲圖的中央，參數1為自適應的節點，參數2為是否動畫，參數3為gv與邊框的padding
}
else if(e.kind === 'doubleClickBackground') {//雙擊空白處
node.s('2d.visible', false);//設置node節點不可見 查看 HT for Web 樣式手冊（http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html#ref_style）
}
});
注意 s（style） 和 a（attr） 定義是這樣的，s 是 ht 預定義的一些樣式屬性，而 a 是我們用戶來自定義的屬性，一般是通過調用字符串來調用結果的，這個字符串對應的可以是常量也可以是函數，還是很靈活的。
最后還做了一個小小的部分，選中“站點”，則該“站點”的上方會顯示一個紅色的會“呼吸”的用來注明當前選中的“站點”。
“呼吸”的部分是利用 ht 的 setAnimation 函數來完成的，在用這個函數之前要先打開數據容器的動畫開關，然后設置動畫：
全部代碼結束！
這個 Demo 花了我兩天時間完成，總覺得有點不甘心啊，但是有時候思維又轉不過彎來，花費了不少的時間，但是總的來說收獲還是很多的。
我以前一直以為只要通過 getPoints().push 來向多邊形中添加點就可以了，求助了大神之后，發現原來這個方法不僅繞彎路而且還會出現各種各樣的問題，比如 getPoints 之前，一定要在多邊形中已經有 points 才可以，但是在很多情況下，初始化的 points 并不好設置，而且會造成代碼很繁瑣，直接通過 addPoint 方法，直接將點添加進多邊形變量中，并且還會默認將點通過直線的方式連接，也不用設置 segments，多可愛的一個函數。
還有就是因為 ht 默認縮放大小是 20，而我這個 Demo 的間距又很小，導致縮放到最大地鐵線路圖顯示也很小，所以我在 htconfig 中更改了 ht 的默認 zoomMax 屬性，記住，更改這個值一定要在所有的 ht 調用之前，因為在 htconfig 中設置的值在后面定義都是不可更改的。
總而言之，這兩天我的腦細胞死了不少，也重新生長了不少，人都是在不斷進步的嘛~
如果想要學習視頻，交流討論，請按照下圖所示輸入私信“申請加入”獲取加群鏈接~~~
多特效代碼請添加HTML5前端交流群581549454
廢話不多說，上代碼
/* -----樣式表-----
*/
@charset "utf-8";
body{
background-color:#ddd;
overflow:hidden;
background-position: center center;
}
body *{font-family:"微軟雅黑";}
h1,h2,h3,h4{
margin:0; color:#000;
background-color:#eee;
}
a,a:link,button{cursor:pointer;}
hr{margin:2px;}
.aC1,.aC1:link{
margin:0 5px 0 5px;
font-size:16px;width:120px;height:26px;
display:inline-block;
border:1px solid #FFF;
border-bottom:2px solid #aaa;
text-align:center;vertical-align:middle;
}
.clr1{
background-color:#3CF !important;
color:#fff !important;
}
.clr2{
background-color:#3CF !important;
color:#000 !important;
}
.aC1:hover{
border:1px solid #000;
border-bottom:2px solid #fff;
color:#FFF;
}
.aC1:active{
background-color:#FF6;
color:#333;
}
.aC2,.aC2:link{
padding:8px;
display:inline-block;
border:2px solid #ccc;
text-align:center;vertical-align:middle;
}
.tmpFlo{
padding:0; margin:0;
position:absolute;
z-index:99;
}
/*游戲棋盤*/
.panelTb{
border:6px solid #ccc;
text-align:center;
vertical-align:middle;
border-collapse:collapse;
background-color:#000;
overflow:hidden;
cursor:pointer; /*!*/
}
.panelTb td{
text-align:center;
vertical-align:middle;
margin:0; padding:0;
/*border:1px solid #ddd;*/
}
.panelTb .uni, .tmpFlo .uni{
padding:0; margin:0;
position:relative;
display:block;
text-align:center;
vertical-align:middle;
cursor:pointer;
}
.panelTb .uni img, .tmpFlo .uni img{
width:100%;
height:100%;
}
.warn1{
display:none;position:absolute;
font-weight:900;
color:red;
text-align:center;
width:100%;height:100%;
left:0;top:0;
background-color:#fff;
z-index:900;
}
.warn2{
display:none;position:absolute;
color:#000;
text-align:center;
width:100%;
left:0;top:0;
background-color:#3CF;
font-weight:bold;
z-index:899;
}
/*調試欄*/
#debugPanel{ /* display:none;*/
background-color:#FFF;
position:absolute;
height:100%;
left:0; top:0;
color:#000;
z-index:999;
overflow:scroll;
}
/*棋子計分面板*/
#scorePanel{
position:absolute;
float:left;
font-size:12px;
color:#396;
}
#scorePanel .hiScore{
color:#FF0;
}
#scorePanel div{
white-space:nowrap;
}
#scorePanel .uni{
display:inline-block;
margin-right:5px;
cursor:pointer;
}
#scorePanel .uni img{
width:100%;
height:100%;
border:1px solid #666;
}
#scorePanel .uni img:hover{
border-color:#FFF;
}
/*棋子單獨計數欄*/
.scBar{
font-weight:bold;
}
/*復背景層2*/
#bgTmp1, #bgTmp2{
position:absolute;
margin:0; padding:0;
width:100%;height:100%;
left:0;top:0;
background-position:center center;
}#bgTmp2 img{
width:100%;
height:100%;
border:none;
}
#bgTmp1{
z-index:-99; /*!*/
}
#bgTmp2{
z-index:-98; /*!*/
}
/*播放動畫的容器*/
.cartoonPanel{ display:none;
position:absolute;
margin:0; padding:0;
border:1px solid #ccc;
z-index:99; /*!*/
}.cartoonPanel img{
width:100%;
height:100%;
border:none;
}
/*游戲時間條*/
#gameTimeBar{
position:absolute;
border:2px solid #fff;
border-top:none;
background-color:#555;
}
#gameTimeBar #gameTime{
color:#000;
text-align:center;
vertical-align:bottom;
width:100%;
height:50%;
background-color:#CFC;
position:inherit;
bottom:0;
}
#uGirl1{
position:absolute;
bottom:0;
right:0;
width:497px;
height:400px;
background-position:right bottom;
z-index:-98; /*!*/
}#uGirl1 img{
width:100%; height:100%; border:none;
}
/*游戲結束后信息面板*/
#endPanel{ display:none;
position:absolute;
left:0; top:0;width:100%; height:100%;
text-align:center;
/*opacity:0.95;*/
background-color:#FFF;
color:#000;
z-index:200;
}
#endPanel #finSumScore{
color:#090;
font-weight:bold;
}
#endPanel p{
width:100%; padding:0; margin:0;
}
#endPanel #finUni{
position:absolute;
width:100%; padding:0; margin:0;
background-color:#6CF;
}
#endPanel .uni{
position:inherit;
width:20%;
}
#endPanel .uni img{
border:none;
width:100%; height:100%;
}
/*#fuckA{ display:none;
padding:2px 6px 3px 6px;
border:2px solid #333;
background-color:#F0C;
color:#000;
}#fuckA:hover{
background-color:#FFC;
}
*/
#btnPnl{
position:fixed;
width:100%;
text-align:center;
bottom:10px;
z-index:800;
}
#endPanel #uGirl1{
z-index:798 !important;
}
#endPanel #aSpeech{
padding:5px;
position:absolute;
background-color:#eee;
color:#06C;
opacity:0.8;
}
<!DOCTYPE html PUBLIC "-//aaa-cg//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">
<html xmlns="http://www.aaa-cg.com.cn?lcc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery網頁消除方塊小游戲源碼</title>
<link rel="stylesheet" href="_css/jwe.css" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="_js/method.js"></script>
<!--<script src="_js/ui/jquery.ui.core.js"></script>
<script src="_js/ui/jquery.ui.widget.js"></script>
<script src="_js/ui/jquery.ui.mouse.js"></script>
<script src="_js/ui/jquery.ui.draggable.js"></script>-->
<script type="text/javascript" src="_js/jwe.js"></script>
<script type="text/javascript" src="_js/jwe.core.js"></script>
<script type="text/javascript" src="_js/jwe.game.js"></script>
<script type="text/javascript" src="_js/jwe.ctrl.js"></script>
<script type="text/javascript" src="_js/jwe.animate.js"></script>
<script type="text/javascript" src="_js/jwe.arithmetic.js"></script>
<script>
$(document).ready(function(){
//_dir = "x1a2";
//_extName = "png";
_bgExtName="png";
_UniTypeNumber =6;
/*$("#btnAgain")
.bind("click",function(){gameRest1Day();});*/
$("#btnReset")
.bind("click",function(){location.reload();});
$("#btnReset2")
.bind("click",function(){location.reload();});
gameStart();
});
</script>
</head>
<body>
<div id="bgTmp1"></div>
<div id="bgTmp2"><img src="_img/bg/bg000.png" /></div>
<div id="uGirl1"></div>
<h2 id="topH" align="center">總分：<span id="sumScore">0</span></h2>
<div id="scorePanel"><hr id="cLine" /></div>
<table id="panelTb" class="panelTb" align="center" ></table>
<div id="gameTimeBar"><div id="gameTime">???</div></div>
<h3 id="btmH" align="center">
<!--<button id="btnAgain" class="aC1 clr1">休息一下</button>-->
<button id="btnReset" class="aC1 clr2">重頭開始</button>
</h3>
<div id="txtTit" class="warn1"></div>
<div id="txtTit2" class="warn2"></div>
<div id="debugPanel"></div>
<div id="cartoonPanel" class="cartoonPanel"></div>
<div id="endPanel">
<h3 align="center">成績統計</h3>
<p>
總分：<span id="finSumScore">0</span>
<!--<a id="fuckA">Let it Go</a>-->
</p>
<p>
<div align="center" id="finUni"></div>
<br />
GAME OVER
</p>
<div id="btnPnl" align="center">
<button id="btnReset2" class="aC2 clr2">再玩一次</button>
</div>
<div id="aSpeech"></div>
</div>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
