用户:SegFault:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
(以“{{widget:sandbox}}”替换内容) |
||
第1行: | 第1行: | ||
{{widget: | {{widget:sandbox}} | ||
2016年9月27日 (二) 16:16的版本
<canvas id="map-" width='1024' height='576' style='background-image:url(/wg_img/ccbResources/map/.jpg); background-position:center'></canvas><script src='https://cruiseliu.github.io/zjsnrwiki/data/pveData.js'></script><script> var mapId = "";
var nodes = [ ] var paths = [ ]
for (var node of data_pveData['pveNode'])
if (node.pveLevelId == mapId) { var type = parseInt(node.nodeType); if (node.node_step == 0) type = 0; if (node.roundabout == 1) type = 6; var x = node.position.x; var y = node.position.y; nodes.push({ 'type': type, 'x': x, 'y': y }); for (var i = 0; i < node.nextNode.length; i++) { var start = parseInt(node.id) % 100 -1; var end = parseInt(node.nextNode[i]) % 100 - 1; var img = node.nextNodePath[i]; paths.push({ 'start': start, 'end': end, 'img': img }); } }
var nodeImgs = [
'/wg_img/ccbResources/pve/pve_start.png', '/wg_img/ccbResources/pve/pve_red.png', '/wg_img/ccbResources/pve/pve_boss.png', '/wg_img/ccbResources/pve/pve_green.png', '/wg_img/ccbResources/pve/pve_blue.png', '/wg_img/ccbResources/pve/pve_purple.png', '/wg_img/ccbResources/pve/pve_red_g.png'
];
for (var i = 0; i < nodeImgs.length; ++i) {
var img = new Image(); img.src = nodeImgs[i]; img._type = i; img.onload = function() { drawNode(this); };
}
for (var path of paths) {
var img = new Image(); img.src = '/wg_img/ccbResources/mapLine/' + path.img + '.png'; img._path = path; img.onload = function() { drawPath(this); };
}
var drawnNodeCnt = 0; var drawnPathCnt = 0;
function drawNode(img) {
var map = document.getElementById('map-' + mapId).getContext('2d'); for (var node of nodes) if (node.type == img._type) { var x = node.x * 384 - img.width * 0.5; var y = 576 - node.y * 384 - img.height * 0.5; map.drawImage(img, x, y); }
drawnNodeCnt++; drawLabels();
}
function drawPath(img) {
var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(0, 0, img.width, img.height); var data = imgData.data; for (var i = 0; i < data.length; i += 4) { data[i] = 8; data[i + 1] = 109; data[i + 2] = 132; } ctx.putImageData(imgData, 0, 0);
var map = document.getElementById('map-' + mapId).getContext('2d'); map.save(); var node1 = nodes[img._path.start]; var node2 = nodes[img._path.end]; var x1 = node1.x * 384, y1 = 576 - node1.y * 384; var x2 = node2.x * 384, y2 = 576 - node2.y * 384; map.translate(x1, y1); map.rotate(Math.atan2(y2 - y1, x2 - x1)); map.translate(0, -0.5 * img.height); map.scale(Math.hypot(x2 - x1, y2 - y1) / img.width, 1); map.drawImage(canvas, 0, 0); map.restore();
drawnPathCnt++; drawLabels();
}
function drawLabels() {
if (drawnNodeCnt < nodeImgs.length || drawnPathCnt < paths.length) return;
var map = document.getElementById('map-' + mapId).getContext('2d'); map.font = 'bold 24px monospace'; map.textAlign = 'center'; map.fillStyle = 'white'; map.strokeStype = 'black'; map.lineWidth = 3; var labels = '0ABCDEFGHIJKLMNOPQRSTUVWXYZ'; for (var i = 1; i < nodes.length; ++i) { var x = nodes[i].x * 384; var y = 576 - nodes[i].y * 384 - (nodes[i].type == 2 ? 35 : 25); map.strokeText(labels[i], x, y); map.fillText(labels[i], x, y); }
} </script>