微件:Sandbox：修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
<style>. | <includeonly><canvas id='map' width='1024' height='576' style='background-image:url(/MediaWiki/images/2/20/701.jpg); background-position:center'></canvas><script> | ||
nodes = [ | |||
{ 'type': 0, 'x': 2.313, 'y': 0.458, }, | |||
{ 'type': 1, 'x': 1.985, 'y': 0.271, }, | |||
/* { 'type': 1, 'x': 1.852, 'y': 0.893, }, | |||
{ 'type': 6, 'x': 1.612, 'y': 0.419, }, | |||
{ 'type': 6, 'x': 1.508, 'y': 0.786, }, | |||
{ 'type': 5, 'x': 1.667, 'y': 1.146, }, | |||
{ 'type': 1, 'x': 1.206, 'y': 0.208, }, | |||
{ 'type': 1, 'x': 1.206, 'y': 0.516, }, | |||
{ 'type': 1, 'x': 1.154, 'y': 0.896, }, | |||
{ 'type': 1, 'x': 0.826, 'y': 0.57, }, | |||
{ 'type': 1, 'x': 0.643, 'y': 1.099, }, | |||
{ 'type': 1, 'x': 0.75, 'y': 0.854, }, | |||
{ 'type': 1, 'x': 0.768, 'y': 0.161, }, | |||
{ 'type': 1, 'x': 0.602, 'y': 0.409, }, | |||
{ 'type': 2, 'x': 0.247, 'y': 0.682, },*/ | |||
]; | |||
paths = [ | |||
{ 'start': 0, 'end': 1 }, | |||
/* { 'start': 0, 'end': 2 }, | |||
{ 'start': 1, 'end': 3 }, | |||
{ 'start': 2, 'end': 4 }, | |||
{ 'start': 2, 'end': 5 }, | |||
{ 'start': 3, 'end': 6 }, | |||
{ 'start': 3, 'end': 7 }, | |||
{ 'start': 4, 'end': 8 }, | |||
{ 'start': 6, 'end': 12 }, | |||
{ 'start': 7, 'end': 9 }, | |||
{ 'start': 8, 'end': 10 }, | |||
{ 'start': 8, 'end': 11 }, | |||
{ 'start': 9, 'end': 11 }, | |||
{ 'start': 9, 'end': 13 }, | |||
{ 'start': 9, 'end': 14 }, | |||
{ 'start': 11, 'end': 14 }, | |||
{ 'start': 12, 'end': 13 },*/ | |||
]; | |||
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' ]; | |||
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); | |||
} | |||
} | |||
</script></includeonly> | |||