用户:SegFault

<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>