舰R百科是靠无数志愿编辑者持续地建设更新完善的。编辑非常简单，无需代码知识，请勇于更新页面！
编辑入门 | 资助百科 | 留言讨论页 | 微博@舰R百科 | 百科编辑讨论Q群：366818861

微件:Sandbox：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑下一编辑→
可视化wikitext
无编辑摘要
无编辑摘要
第1行： 第1行：
<noinclude>
<noinclude>
{{#widget:sandbox}}
{{#widget:sandbox}}
</noinclude><includeonly><script>
</noinclude><includeonly><canvas id='map' width='1024' height='576' style='background-image:url(/wg_img/ccbResources/map/701.jpg); background-position:center'></canvas><script>
window.onscroll = function() {
nodes = [
    var tables = document.getElementsByClassName("fix-table-header");
  { 'type': 0, 'x': 2.313, 'y': 0.458, },
    var hdr = document.getElementById('fixed-table-header');
  { 'type': 1, 'x': 1.985, 'y': 0.271, },
    for (var i = 0; i < tables.length; ++i) {
  { 'type': 1, 'x': 1.852, 'y': 0.893, },
        var table = tables[i];
  { 'type': 6, 'x': 1.612, 'y': 0.419, },
        var rect = table.getBoundingClientRect();
  { 'type': 6, 'x': 1.508, 'y': 0.786, },
        if (rect.top < 0 && rect.bottom > 0) {
  { 'type': 5, 'x': 1.667, 'y': 1.146, },
            if (hdr == null) {
  { 'type': 1, 'x': 1.206, 'y': 0.208, },
                hdr = table.cloneNode(true);
  { 'type': 1, 'x': 1.206, 'y': 0.516, },
                hdr.id = 'fixed-table-header';
  { 'type': 1, 'x': 1.154, 'y': 0.896, },
                hdr.style.position = 'fixed';
  { 'type': 1, 'x': 0.826, 'y': 0.57, },
                hdr.style.pointerEvents = 'none';
  { 'type': 1, 'x': 0.643, 'y': 1.099, },
                hdr.style.top = 0;
  { 'type': 1, 'x': 0.75,  'y': 0.854, },
                hdr.style.width = table.style.width;
  { 'type': 1, 'x': 0.768, 'y': 0.161, },
                table.parentNode.appendChild(hdr);
  { 'type': 1, 'x': 0.602, 'y': 0.409, },
                hdr.style.visibility = 'hidden';
  { 'type': 2, 'x': 0.247, 'y': 0.682, },
                for (var i = 0; i < hdr.childNodes.length; i++)
];
                    if (hdr.childNodes[i].tagName == 'THEAD') {
 
                        hdr.childNodes[i].style.visibility = 'visible';
paths = [
                        hdr.childNodes[i].style.pointerEvents = 'auto';
  { 'start': 0, 'end': 1 },
                        hdr.childNodes[i].style.backgroundColor = 'white';
  { 'start': 0, 'end': 2 },
                        console.log(hdr.childNodes[i].style.backgroundColor);
  { 'start': 1, 'end': 3 },
                    }
  { 'start': 2, 'end': 4 },
            }
  { 'start': 2, 'end': 5 },
            return;
  { '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 = [
    '/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'
];
 
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 = '/wg_img/ccbResources/mapLine/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);
     }
     }
     if (hdr != null) hdr.remove();
 
  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><style> #fixed-table-header { background-color: white; } </style>
</script></includeonly>
<p>payload</p>
<p>payload</p>
<p>payload</p>
<table class="fix-table-header">
    <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead>
    <tbody>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>some really long line</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    </tbody>
</table>
<p>payload</p>
<p>payload</p>
<table class="fix-table-header">
    <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead>
    <tbody>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>some really long line</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    </tbody>
</table>
<p>payload</p>
<p>payload</p>
<p>payload</p>
</includeonly>

2016年9月30日 (五) 20:46的版本

检索自“https://www.zjsnrwiki.com/index.php?title=微件:Sandbox&oldid=18037”