绘制地铁线路html,HTML5绘制上海地铁线路图(2)

创建图元

数据需要转换成qunee图元对象，三种类型分别对应三个创建函数

创建文本标签

function createText(name, x, y, rotate){

var text = graph.createNode(name, x, y);

if(rotate){

text.rotate = rotate;

}

text.zIndex = 20;

text.image = null;

text.setStyle(Q.Styles.BACKGROUND_COLOR, Q.toColor(0x88FFFFFF));

text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);

text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);

text.setStyle(Q.Styles.LABEL_PADDING, PADDING);

return text;

}

创建站点

function createStation(station){

var node = graph.createNode(null/**station.name*/, station.x, station.y);

node.stationId = station.id;

node.setStyle(Q.Styles.LABEL_FONT_SIZE, 10);

node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);

node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);

node.zIndex = 10;

if(station.rotate){

node.image = roundRect;

node.rotate = station.rotate;

}else{

node.image = circle;

}

node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#FFF");

node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");

return node;

}

创建地铁线

createLine(…)函数用于创建地铁线，使用了节点类型图元，并设置节点主体为路径，函数updateLine(…)用于从站点信息自动生成线路路径

function createLine(line){ var stations = line.stations;

var node = graph.createNode(line.name); node.stations = stations; node.movable = false; node.setStyle(Q.Styles.LABEL_FONT_SIZE, 50); node.setStyle(Q.Styles.LABEL_COLOR, line.color); node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM); node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP); node.setStyle(Q.Styles.LAYOUT_BY_PATH, true); node.anchorPosition = null; node.setStyle(Q.Styles.SHAPE_STROKE, size); node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, line.color);

updateLine(node, true); return node; }

function updateLine(line, addListener){ var path = new Q.Path(); line.image = path;

var stations = line.stations; var first = true; Q.forEach(stations, function(s){ var station = getStation(s.id || s); if(!station){ return; } if(addListener){ addLocationChangeListener(station.stationId, line); } var location = station.location; var x = location.x, y = location.y; if(s.yOffset){ var offset = s.yOffset * size; var rotate = station.rotate || 0; var sin = Math.sin(rotate); var cos = Math.cos(rotate); x += cos * offset; y += sin * offset; } if(first){ first = false; path.moveTo(x, y); }else{ path.lineTo(x, y); } }) }

交互处理

增加交互处理，监听站点拖动事件，保持地铁路线跟随站点位置变化

graph.interactionDispatcher.addListener(function(evt){ if(evt.kind != Q.InteractionEvent.ELEMENT_MOVING){ return; } var datas = evt.datas;

Q.forEach(datas, function(data){ if(!data.stationId){ return; } var listeners = stationLocationChangeListeners[data.stationId]; if(listeners){ for(var l in listeners){ updateLine(listeners[l]); } } }); });

在线示例