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

微件:Sandbox：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑
可视化wikitext
无编辑摘要
无编辑摘要
 
（未显示同一用户的15个中间版本）
第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="table-container">
var mapId = "<!--{$map|escape:'quotes'}-->";
<table id="maintable">
 
    <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="bottom_anchor"></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>
 
function moveScroll(){
var nodeImgs = [
     var scroll = $(window).scrollTop();
    '/wg_img/ccbResources/pve/pve_start.png',
     var anchor_top = $("#maintable").offset().top;
    '/wg_img/ccbResources/pve/pve_red.png',
     var anchor_bottom = $("#bottom_anchor").offset().top;
    '/wg_img/ccbResources/pve/pve_boss.png',
     if (scroll>anchor_top && scroll<anchor_bottom) {
    '/wg_img/ccbResources/pve/pve_green.png',
      clone_table = $("#clone");
    '/wg_img/ccbResources/pve/pve_blue.png',
      if(clone_table.length == 0){
    '/wg_img/ccbResources/pve/pve_purple.png',
         clone_table = $("#maintable").clone();
    '/wg_img/ccbResources/pve/pve_red_g.png'
        clone_table.attr('id', 'clone');
];
        clone_table.css({position:'fixed', 'pointer-events': 'none', top:0});
 
        clone_table.width($("#maintable").width());
for (var i = 0; i < nodeImgs.length; ++i) {
        $("#table-container").append(clone_table);
    var img = new Image();
        $("#clone").css({visibility:'hidden'});
    img.src = nodeImgs[i];
        $("#clone thead").css({visibility:'visible', 'pointer-events':'auto'});
    img._type = i;
      }
     img.onload = function() { drawNode(this); };
     } else {
}
      $("#clone").remove();
 
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);
     }
     }
}
}
$(window).scroll(moveScroll);
</script></includeonly>
</script></includeonly>

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

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