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

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 样式手册（#ref_style） } });

注意 s（style） 和 a（attr） 定义是这样的，s 是 ht 预定义的一些样式属性，而 a 是我们用户来自定义的属性，一般是通过调用字符串来调用结果的，这个字符串对应的可以是常量也可以是函数，还是很灵活的。

最后还做了一个小小的部分，选中“站点”，则该“站点”的上方会显示一个红色的会“呼吸”的用来注明当前选中的“站点”。

“呼吸”的部分是利用 ht 的 setAnimation 函数来完成的，在用这个函数之前要先打开数据容器的动画开关，然后设置动画：

dm.enableAnimation();//打开数据容器的动画开关 function createRedLight() { var node = new ht.Node(); node.setImage('images/红灯.json');//设置节点的图片 node.setSize(1, 1);//设置节点的大小 node.setLayer('firstTop');//设置节点显示在gv的最上层 node.s('2d.visible', false);//节点不可见 node.s('select.width', 0);//节点选中时的边框为0，不可见 node.s('2d.selectable', false);//设置这个属性，则节点不可选中 node.setAnimation({//设置动画 具体参见 HT for Web 动画手册（） expandWidth: { property: "width",//设置这个属性，并且未设置 accessType，则默认通过 setWidth/getWidth 来设置和获取属性。这里的 width 和下面的 height 都是通过前面设置的 size 得到的 from: 0.5, //动画开始时的属性值 to: 1,//动画结束时的属性值 next: "collapseWidth"//字符串类型，指定当前动画完成之后，要执行的下个动画，可将多个动画融合 }, collapseWidth: { property: "width", from: 1, to: 0.5, next: "expandWidth" }, expandHeight: { property: "height", from: 0.5, to: 1, next: "collapseHeight" }, collapseHeight: { property: "height", from: 1, to: 0.5, next: "expandHeight" }, start: ["expandWidth", "expandHeight"]//数组，用于指定要启动的一个或多个动画 }); dm.add(node); return node; }

全部代码结束！

总结

这个 Demo 花了我两天时间完成，总觉得有点不甘心啊，但是有时候思维又转不过弯来，花费了不少的时间，但是总的来说收获还是很多的，我以前一直以为只要通过 getPoints().push 来向多边形中添加点就可以了，求助了大神之后，发现原来这个方法不仅绕弯路而且还会出现各种各样的问题，比如 getPoints 之前，一定要在多边形中已经有 points 才可以，但是在很多情况下，初始化的 points 并不好设置，而且会造成代码很繁琐，直接通过 addPoint 方法，直接将点添加进多边形变量中，并且还会默认将点通过直线的方式连接，也不用设置 segments，多可爱的一个函数。

还有就是因为 ht 默认缩放大小是 20，而我这个 Demo 的间距又很小，导致缩放到最大地铁线路图显示也很小，所以我在 htconfig 中更改了 ht 的默认 zoomMax 属性，记住，更改这个值一定要在所有的 ht 调用之前，因为在 htconfig 中设置的值在后面定义都是不可更改的。

以上所述是小编给大家介绍的基于 HTML5 Canvas实现 的交互式地铁线路图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

（编辑：ASP站长网）