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

微件:Sandbox：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑
可视化wikitext
无编辑摘要
无编辑摘要
 
（未显示同一用户的5个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
{{#widget:sandbox}}
{{#widget:sandbox|map=101}}
</noinclude><includeonly><script>
</noinclude><includeonly><canvas id="map-<!--{$map|escape:'quotes'}-->" width='1024' height='576' style='background-image:url(/wg_img/ccbResources/map/<!--{$map|escape:'url'}-->.jpg); background-position:center'></canvas><script src='https://cruiseliu.github.io/zjsnrwiki/data/pveData.js'></script><script>
window.onscroll = function() {
var mapId = "<!--{$map|escape:'quotes'}-->";
    var tables = document.getElementsByClassName("fix-table-header");
 
    var hdr = document.getElementById('fixed-table-header');
var nodes = [ ]
     for (var i = 0; i < tables.length; ++i) {
var paths = [ ]
         var table = tables[i];
 
        var rect = table.getBoundingClientRect();
for (var node of data_pveData['pveNode'])
         if (rect.top < 0 && rect.bottom > 0) {
     if (node.pveLevelId == mapId) {
            if (hdr == null) {
         var type = parseInt(node.nodeType);
                hdr = table.cloneNode(true);
         if (node.node_step == 0) type = 0;
                hdr.id = 'fixed-table-header';
        if (node.roundabout == 1) type = 6;
                hdr.style.position = 'fixed';
        var x = node.position.x;
                hdr.style.pointerEvents = 'none';
        var y = node.position.y;
                hdr.style.top = 0;
        nodes.push({ 'type': type, 'x': x, 'y': y });
                hdr.style.width = table.style.width;
        for (var i = 0; i < node.nextNode.length; i++) {
                table.parentNode.appendChild(hdr);
            var start = parseInt(node.id) % 100 -1;
                hdr.style.visibility = 'hidden';
            var end = parseInt(node.nextNode[i]) % 100 - 1;
                for (var i = 0; i < hdr.childNodes.length; i++)
            var img = node.nextNodePath[i];
                    if (hdr.childNodes[i].tagName == 'THEAD') {
            paths.push({ 'start': start, 'end': end, 'img': img });
                        hdr.childNodes[i].style.visibility = 'visible';
                        hdr.childNodes[i].style.pointerEvents = 'auto';
                        hdr.childNodes[i].style.backgroundColor = 'white';
                        console.log(hdr.childNodes[i].style.backgroundColor);
                    }
            }
            return;
         }
         }
     }
     }
     if (hdr != null) hdr.remove();
 
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); };
}
}
</script><style> #fixed-table-header { background-color: white; } </style>
 
<p>payload</p>
for (var path of paths) {
<p>payload</p>
    var img = new Image();
<p>payload</p>
    img.src = '/wg_img/ccbResources/mapLine/' + path.img + '.png';
<table class="fix-table-header">
    img._path = path;
     <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead>
    img.onload = function() { drawPath(this); };
     <tbody>
}
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
 
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
var drawnNodeCnt = 0;
         <tr> <td>info</td> <td>some really long line</td> <td>info</td> </tr>
var drawnPathCnt = 0;
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
 
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
function drawNode(img) {
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
     var map = document.getElementById('map-' + mapId).getContext('2d');
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
     for (var node of nodes)
     </tbody>
         if (node.type == img._type) {
</table>
         var x = node.x * 384 - img.width * 0.5;
<p>payload</p>
         var y = 576 - node.y * 384 - img.height * 0.5;
<p>payload</p>
         map.drawImage(img, x, y);
<table class="fix-table-header">
    }
     <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead>
 
     <tbody>
    drawnNodeCnt++;
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    drawLabels();
        <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>
function drawPath(img) {
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    var canvas = document.createElement('canvas');
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    canvas.width = img.width;
         <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
    canvas.height = img.height;
     </tbody>
    var ctx = canvas.getContext('2d');
</table>
    ctx.drawImage(img, 0, 0);
<p>payload</p>
    var imgData = ctx.getImageData(0, 0, img.width, img.height);
<p>payload</p>
    var data = imgData.data;
<p>payload</p>
    for (var i = 0; i < data.length; i += 4) {
</includeonly>
         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></includeonly>

2016年10月7日 (五) 05:43的最新版本

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