基于 HTML5 Canvas实现 的交互式地铁线路图

最后绘制这些地铁线上的点，这个部分 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 矢量手册(#ref_binding) node.a('alarmColor2', 'rgb(150, 150, 150)');//同上 node.a('tpNode', true);//这个属性设置只是为了用来区分“换乘站点”和“小站点”的，后面会用上 } }

所有的地铁线路以及站点都添加完毕。但是！你可能会看不见自己绘制的图，因为他们太小了，这个时候可以设置 graphView 拓扑组件上的 fitContent 函数，我们顺便将拓扑图上的所有东西不可移动也设置一下：

gv.fitContent(false, 0.00001);//自适应大小，参数1为是否动画，参数2为gv与边框的padding值 gv.setMovableFunc(function(){ return false;//设置gv上的节点不可移动 });

这下你的地铁线路图就可以显示啦~接下来看看交互。

交互

首先是鼠标移动事件，鼠标滑过具体线路时，线路会变粗，悬停一会儿还能看到这条线路的编号；当鼠标移动到“换乘站点”或“小站点”，站点对应的图标都会变大并且变色，字体也会变大，鼠标移开图标变回原来的颜色并且字体变小。不同点在于鼠标移动到“换乘站点”时，“换乘站点”会旋转。

鼠标滑动事件，我直接基于 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);////自定义的放大节点函数，比较容易，我不粘代码了，可以去 查看 dm.sm().ss(data);//设置选中节点 name = data.getTag();//作为“上一个节点”的存储变量，可以通过这个值来获取节点 } else {//其他任何情况则不选中任何内容并且清除“换乘站点”上的动画 dm.sm().ss(null); name = ''; clearInterval(interval); } });

鼠标悬停在地铁线路上时显示“具体线路信息”，我是通过设置 tooltip 来完成的（注意：要打开 gv 的 tooltip 开关）：

gv.enableToolTip();//打开 tooltip 的开关 if(num === '68') polyline.setToolTip('A P M');//设置提示信息 else if(num === '60') polyline.setToolTip('G F'); else polyline.setToolTip('Line' + num);

然后我利用右下角的 form 表单，单击表单上的具体线路，或者双击拓扑图上任意一个“站点”或者线路，则拓扑图会自适应到对应的部分，将被双击的部分展现到拓扑图的中央。

form 表单的声明部分我好像还没有解释。。。就是通过 new 一个 ht.widget.FomePane 类创建一个 form 表单组件，通过 form.getView() 获取表单组件的底层 div，将这个 div 摆放在 body 右下角，然后通过 addRow 函数向 form 表单中添加一行的表单项，可以在这行中添加任意多个项，通过 addRow 函数的第二个参数（一个数组），对添加进的表单项进行宽度的设置，通过第三个参数设置这行的高度：

function createForm() {//创建右下角的form表单 var form = new ht.widget.FormPane(); form.setWidth(200);//设置表单宽度 form.setHeight(416);//设置表单高度 let view = form.getView(); document.body.appendChild(view);//将表单添加进body中 view.style.zIndex = 1000; view.style.bottom = '10px';//ht组件几乎都设置绝对路径 view.style.right = '10px'; view.style.background = 'rgba(211, 211, 211, 0.8)'; names.forEach(function(nameString) { form.addRow([//向表单中添加行 {//这一行中的第一个表单项 button: {//向表单中添加button按钮 icon: 'images/Line'+nameString.value+'.json',//设置按钮的图标 background: '',//设置按钮的背景 borderColor: '',//设置按钮的边框颜色 clickable: false//设置按钮不可点击 } }, {//第二个表单项 button: { label: nameString.name, labelFont: 'bold 14px arial, sans-serif', labelColor: '#fff', background: '', borderColor: '', onClicked: function() {//按钮点击回调事件 gv.sm().ss(dm.getDataByTag(nameString.value));//设置选中按下的按钮对应的线路 gv.fitData(gv.sm().ld(), true, 5);//将选中的地铁线路显示在拓扑图的中央 } } } ], [0.1, 0.2], 23);//第二个参数是设置第一参数中的数组的宽度，小于1是比例，大于1是实际宽度。第三个参数是该行的高度 }); }

单击“站点”显示红色标注，双击节点自适应放置到拓扑图中央以及双击空白处将红色标注隐藏的内容都是通过对拓扑组件 gv 的事件监听来控制的，非常清晰易懂，代码如下：

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!