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

微件:Sandbox：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑
可视化wikitext
无编辑摘要
无编辑摘要
 
（未显示同一用户的13个中间版本）
第1行： 第1行：
<includeonly><p>payload</p>
<noinclude>
<p>payload</p>
{{#widget:sandbox|map=101}}
<p>payload</p>
</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>
<div id="fixed-header-table-container">
var mapId = "<!--{$map|escape:'quotes'}-->";
<table id="fixed-header-table">
 
    <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> </thead>
var nodes = [ ]
    <tbody>
var paths = [ ]
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
 
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
for (var node of data_pveData['pveNode'])
        <tr> <td>info</td> <td>some really long line</td> <td>info</td> </tr>
     if (node.pveLevelId == mapId) {
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        var type = parseInt(node.nodeType);
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        if (node.node_step == 0) type = 0;
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        if (node.roundabout == 1) type = 6;
        <tr> <td>info</td> <td>info</td> <td>info</td> </tr>
        var x = node.position.x;
    </tbody>
        var y = node.position.y;
</table>
        nodes.push({ 'type': type, 'x': x, 'y': y });
<div id="fixed-header-table-bottom"></div>
        for (var i = 0; i < node.nextNode.length; i++) {
</div>
            var start = parseInt(node.id) % 100 -1;
<p>payload</p>
            var end = parseInt(node.nextNode[i]) % 100 - 1;
<p>payload</p>
            var img = node.nextNodePath[i];
<p>payload</p>
            paths.push({ 'start': start, 'end': end, 'img': img });
<p>payload</p>
<p>payload</p>
<script>
window.onscroll = function() {
    var pos = window.scrollY;
    var top = document.getElementById("fixed-header-table").offsetTop;
    var bottom = document.getElementById("fixed-header-table-bottom").offsetTop;
    var hdr = document.getElementById('fixed-table-header');
     if (top < pos && pos < bottom) {
        if (hdr == null) {
            table = document.getElementById('fixed-header-table');
            hdr = table.cloneNode(true);
            hdr.id = 'fixed-table-header';
            hdr.style.position = 'fixed';
            hdr.style.pointerEvents = 'none';
            hdr.style.top = 0;
            hdr.style.width = table.style.width;
            document.getElementById("fixed-header-table-container").appendChild(hdr);
            hdr.style.visibility = 'hidden';
            for (var i = 0; i < hdr.childNodes.length; i++)
                if (hdr.childNodes[i].tagName == 'THEAD') {
                    hdr.childNodes[i].style.visibility = 'visible';
                    hdr.childNodes[i].style.pointerEvents = 'auto';
                }
         }
         }
     } else 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); };
}
 
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></includeonly>
</script></includeonly>

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

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