|
|
| 第1行： |
第1行： |
| <includeonly><canvas id='map' width='1024' height='576' style='background-image:url(/MediaWiki/images/2/20/701.jpg); background-position:center'></canvas><script> | | <includeonly><p>payload</p> |
| nodes = [
| | <p>payload</p> |
| { 'type': 0, 'x': 2.313, 'y': 0.458, },
| | <p>payload</p> |
| { 'type': 1, 'x': 1.985, 'y': 0.271, },
| | <div id="table-container"> |
| /* { 'type': 1, 'x': 1.852, 'y': 0.893, }, | | <table id="maintable"> |
| { 'type': 6, 'x': 1.612, 'y': 0.419, },
| | <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead> |
| { 'type': 6, 'x': 1.508, 'y': 0.786, },
| | <tbody> |
| { 'type': 5, 'x': 1.667, 'y': 1.146, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 1.206, 'y': 0.208, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 1.206, 'y': 0.516, },
| | <tr> <td>info</td> <td>some really long line/td> <td>info</td> </tr> |
| { 'type': 1, 'x': 1.154, 'y': 0.896, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 0.826, 'y': 0.57, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 0.643, 'y': 1.099, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 0.75, 'y': 0.854, },
| | <tr> <td>info</td> <td>info</td> <td>info</td> </tr> |
| { 'type': 1, 'x': 0.768, 'y': 0.161, },
| | </tbody> |
| { 'type': 1, 'x': 0.602, 'y': 0.409, },
| | </table> |
| { 'type': 2, 'x': 0.247, 'y': 0.682, },*/
| | <div id="bottom_anchor"></div> |
| ];
| | </div> |
| | | <p>payload</p> |
| paths = [
| | <p>payload</p> |
| { 'start': 0, 'end': 1 },
| | <p>payload</p> |
| /* { 'start': 0, 'end': 2 }, | | <p>payload</p> |
| { 'start': 1, 'end': 3 },
| | <p>payload</p> |
| { 'start': 2, 'end': 4 },
| | <script> |
| { 'start': 2, 'end': 5 },
| | function moveScroll(){ |
| { 'start': 3, 'end': 6 },
| | var scroll = $(window).scrollTop(); |
| { 'start': 3, 'end': 7 },
| | var anchor_top = $("#maintable").offset().top; |
| { 'start': 4, 'end': 8 },
| | var anchor_bottom = $("#bottom_anchor").offset().top; |
| { 'start': 6, 'end': 12 },
| | if (scroll>anchor_top && scroll<anchor_bottom) { |
| { 'start': 7, 'end': 9 },
| | clone_table = $("#clone"); |
| { 'start': 8, 'end': 10 },
| | if(clone_table.length == 0){ |
| { 'start': 8, 'end': 11 },
| | clone_table = $("#maintable").clone(); |
| { 'start': 9, 'end': 11 },
| | clone_table.attr('id', 'clone'); |
| { 'start': 9, 'end': 13 },
| | clone_table.css({position:'fixed', 'pointer-events': 'none', top:0}); |
| { 'start': 9, 'end': 14 },
| | clone_table.width($("#maintable").width()); |
| { 'start': 11, 'end': 14 },
| | $("#table-container").append(clone_table); |
| { 'start': 12, 'end': 13 },*/
| | $("#clone").css({visibility:'hidden'}); |
| ];
| | $("#clone thead").css({visibility:'visible', 'pointer-events':'auto'}); |
| | | } |
| var nodeImgs = [ '/MediaWiki/images/b/b8/Start.png', '/MediaWiki/images/3/31/Red.png' ];//, 'boss.png', 'green.png', 'blue.png', 'purple.png', 'red_g.png' ]; | | } else { |
| | | $("#clone").remove(); |
| var label = '0ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| | |
| 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 i = 0; i < paths.length; ++i) {
| |
| var img = new Image();
| |
| img.src = '/MediaWiki/images/7/72/701-' + label[paths[i].start] + '-' + label[paths[i].end] + '.png';
| |
| img.path = paths[i];
| |
| img.onload = function() { drawPath(this); };
| |
| }
| |
| | |
| var drawnNodeCnt = 0;
| |
| var drawnPathCnt = 0;
| |
| | |
| function drawNode(img) {
| |
| var map = document.getElementById('map').getContext('2d');
| |
| for (var j = 0; j < nodes.length; ++j)
| |
| if (nodes[j].type == img.type) {
| |
| var x = nodes[j].x * 384 - img.width * 0.5;
| |
| var y = 576 - nodes[j].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').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;
| |
| console.log("Draw labels");
| |
| var map = document.getElementById('map').getContext('2d');
| |
| map.font = 'bold 24px monospace';
| |
| map.textAlign = 'center';
| |
| map.fillStyle = 'white';
| |
| map.strokeStype = 'black';
| |
| map.lineWidth = 3;
| |
| 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(label[i], x, y);
| |
| map.fillText(label[i], x, y);
| |
| }
| |
| } | | } |
| | $(window).scroll(moveScroll); |
| </script></includeonly> | | </script></includeonly> |