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

微件:Sandbox：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑下一编辑→
可视化wikitext
无编辑摘要
无编辑摘要
第1行： 第1行：
<noinclude>
<noinclude>
{{#widget:sandbox}}
{{#widget:sandbox}}
</noinclude><includeonly><canvas id='map' width='1024' height='576' style='background-image:url(/wg_img/ccbResources/map/701.jpg); background-position:center'></canvas><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 src='https://cruiseliu.github.io/zjsnrwiki/data/pveData.js'></script><script>
nodes = [
var mapId = 701;
  { '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 = [
var nodes = [ ]
  { 'start': 0, 'end': 1 },
var paths = [ ]
  { '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 },
];


for (var node of data_pveData['pveNode'])
    if (node.pveLevelId == mapId) {
        var type = parseInt(node.nodeType);
        if (node.node_step == 0) type = 0;
        if (node.roundabout == 1) type = 6;
        var x = node.position.x;
        var y = node.position.y;
        nodes.push({ 'type': type, 'x': x, 'y': y });
        for (var i = 0; i < node.nextNode.length; i++) {
            var start = parseInt(node.id) % 100 -1;
            var end = parseInt(node.nextNode[i]) % 100 - 1;
            var img = node.nextNodePath[i];
            paths.push({ 'start': start, 'end': end, 'img': img });
        }
    }


var nodeImgs = [
var nodeImgs = [
第50行： 第32行：
     '/wg_img/ccbResources/pve/pve_red_g.png'
     '/wg_img/ccbResources/pve/pve_red_g.png'
];
];
var label = '0ABCDEFGHIJKLMNOPQRSTUVWXYZ';


for (var i = 0; i < nodeImgs.length; ++i) {
for (var i = 0; i < nodeImgs.length; ++i) {
  var img = new Image();
    var img = new Image();
  img.src = nodeImgs[i];
    img.src = nodeImgs[i];
  img.type = i;
    img._type = i;
  img.onload = function() { drawNode(this); };
    img.onload = function() { drawNode(this); };
}
}


for (var i = 0; i < paths.length; ++i) {
for (var path of paths) {
  var img = new Image();
    var img = new Image();
  img.src = '/wg_img/ccbResources/mapLine/701-' + label[paths[i].start] + '-' + label[paths[i].end] + '.png';
    img.src = '/wg_img/ccbResources/mapLine/' + path.img + '.png';
  img.path = paths[i];
    img._path = path;
  img.onload = function() { drawPath(this); };
    img.onload = function() { drawPath(this); };
}
}


第71行： 第51行：


function drawNode(img) {
function drawNode(img) {
  var map = document.getElementById('map').getContext('2d');
    var map = document.getElementById('map-' + mapId).getContext('2d');
  for (var j = 0; j < nodes.length; ++j)
    for (var node of nodes)
    if (nodes[j].type == img.type) {
        if (node.type == img._type) {
      var x = nodes[j].x * 384 - img.width * 0.5;
        var x = node.x * 384 - img.width * 0.5;
      var y = 576 - nodes[j].y * 384 - img.height * 0.5;
        var y = 576 - node.y * 384 - img.height * 0.5;
      map.drawImage(img, x, y);
        map.drawImage(img, x, y);
     }
     }


  drawnNodeCnt++;
    drawnNodeCnt++;
  drawLabels();
    drawLabels();
}
}


function drawPath(img) {
function drawPath(img) {
  var canvas = document.createElement('canvas');
    var canvas = document.createElement('tmp-canvas');
  canvas.width = img.width;
    canvas.width = img.width;
  canvas.height = img.height;
    canvas.height = img.height;
  var ctx = canvas.getContext('2d');
    var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
    ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, img.width, img.height);
    var imgData = ctx.getImageData(0, 0, img.width, img.height);
  var data = imgData.data;
    var data = imgData.data;
  for (var i = 0; i < data.length; i += 4) {
    for (var i = 0; i < data.length; i += 4) {
    data[i] = 8;
        data[i] = 8;
    data[i + 1] = 109;
        data[i + 1] = 109;
    data[i + 2] = 132;
        data[i + 2] = 132;
  }
    }
  ctx.putImageData(imgData, 0, 0);
    ctx.putImageData(imgData, 0, 0);


  var map = document.getElementById('map').getContext('2d');
    var map = document.getElementById('map-' + mapId).getContext('2d');
  map.save();
    map.save();
  var node1 = nodes[img.path.start];
    var node1 = nodes[img._path.start];
  var node2 = nodes[img.path.end];
    var node2 = nodes[img._path.end];
  var x1 = node1.x * 384, y1 = 576 - node1.y * 384;
    var x1 = node1.x * 384, y1 = 576 - node1.y * 384;
  var x2 = node2.x * 384, y2 = 576 - node2.y * 384;
    var x2 = node2.x * 384, y2 = 576 - node2.y * 384;
  map.translate(x1, y1);
    map.translate(x1, y1);
  map.rotate(Math.atan2(y2 - y1, x2 - x1));
    map.rotate(Math.atan2(y2 - y1, x2 - x1));
  map.translate(0, -0.5 * img.height);
    map.translate(0, -0.5 * img.height);
  map.scale(Math.hypot(x2 - x1, y2 - y1) / img.width, 1);
    map.scale(Math.hypot(x2 - x1, y2 - y1) / img.width, 1);
  map.drawImage(canvas, 0, 0);
    map.drawImage(canvas, 0, 0);
  map.restore();
    map.restore();


  drawnPathCnt++;
    drawnPathCnt++;
  drawLabels();
    drawLabels();
}
}


function drawLabels()
function drawLabels()
{
{
  if (drawnNodeCnt < nodeImgs.length || drawnPathCnt < paths.length) return;
    if (drawnNodeCnt < nodeImgs.length || drawnPathCnt < paths.length) return;
  console.log("Draw labels");
 
  var map = document.getElementById('map').getContext('2d');
    var map = document.getElementById('map-' + mapId).getContext('2d');
  map.font = 'bold 24px monospace';
    map.font = 'bold 24px monospace';
  map.textAlign = 'center';
    map.textAlign = 'center';
  map.fillStyle = 'white';
    map.fillStyle = 'white';
  map.strokeStype = 'black';
    map.strokeStype = 'black';
  map.lineWidth = 3;
    map.lineWidth = 3;
  for (var i = 1; i < nodes.length; ++i) {
    var labels = '0ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var x = nodes[i].x * 384;
    for (var i = 1; i < nodes.length; ++i) {
    var y = 576 - nodes[i].y * 384 - (nodes[i].type == 2 ? 35 : 25);
        var x = nodes[i].x * 384;
    map.strokeText(label[i], x, y);
        var y = 576 - nodes[i].y * 384 - (nodes[i].type == 2 ? 35 : 25);
    map.fillText(label[i], x, y);
        map.strokeText(labels[i], x, y);
  }
        map.fillText(labels[i], x, y);
    }
}
}
</script></includeonly>
</script></includeonly>

2016年10月7日 (五) 05:36的版本

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