台词试听功能(武将/皮肤/将灵)已上线,在对应页面的台词板块即可试听;目前音频功能仍有缺失或错误的情况,可点击反馈提醒我们;有兴趣参与编辑的请点击下方企鹅群加入我们哦~。欢迎收藏起来防止迷路~(´▽`ʃ♡ƪ)!

如果你看到本段文字,说明该页面未正常加载全局JS,包括但不仅限于语音、评论区等部分功能将无法使用,请点击 重新加载页面,如果刷新无效,请找BWIKI客服进行反馈。
全站通知:

六维图

阅读

    

2022-01-11更新

    

最新编辑:摇晃の目光

阅读:

  

更新日期:2022-01-11

  

最新编辑:摇晃の目光

来自三国杀WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

此模板为一键安装导入,不建议手动修改。

简单说明

版本:1.0

说明:本页面所有内容来自碧蓝航线WIKI

安装方法

自动安装:拥有站点管理员权限的同学可以在本页面使用一键安装功能

手动安装:复制以下依赖页面中的内容到相同页面名称的页面中

使用说明

参数说明

  • 为div设置data-type="canvas"来匹配
  • data-height 设置高度,默认200
  • data-width 设置宽度,默认225
  • data-maxvalue 设置数轴最大值
  • data-value 格式:[数值]_[标签]_[数值2]|...
    • [数值] 属性的数值,相对于数轴最大值
    • [标签] 属性的文字标签
    • [数值2] 属性的第二数值,默认为0

示例

{{JS|Info}}
<div id="canvas" data-type="canvas" height="200" width="225" data-maxvalue="7" data-value="1_耐久_0|2_炮击_0|4_雷击_0|4_航空_0|5_机动_0|6_防空_0" size="200"></div>

作者

作者:碧蓝航线WIKI

依赖页面

<div class="resourceLoader" style="display:none" data-is-module="false" data-is-module-es6="false" data-is-module-react="[false,false]" data-mime="" ></div>
/* 绘制雷达图 * 为div设置data-type="canvas"来匹配 * data-height 设置高度,默认200 * data-width 设置宽度,默认225 * data-maxvalue 设置数轴最大值 * data-value 格式:[数值]_[标签]_[数值2]|... ** [数值] 属性的数值,相对于数轴最大值 ** [标签] 属性的文字标签 ** [数值2] 属性的第二数值,默认为0 示例 <div data-type="canvas" data-maxvalue="5" data-value="2_辅助|3_生存|4_单体|4_爆发|3_难度|5_范围"></div> <div data-type="canvas" data-maxvalue="5" data-value="1_辅助_0|3_生存_2|4_单体_3|4_爆发_4|3_难度_5|2_范围_5" data-height="300" data-width="337"></div> */ $('div[data-type="canvas"]').each(function(){ var $div = $(this); var html = $div.text('')[0].outerHTML; html = html.replace('<div',"<canvas ") .replace('></div>',' />'); var $hex = $(html); $hex[0].height = $hex.data('height') || 200; $hex[0].width = $hex.data('width') || 225; $div.replaceWith($hex); var ability_value = []; var ability_name = []; var ability_value2 = []; var maxvalue = $div.data('maxvalue'); var canvasinfo = $div.data('value').split('|'); $.each(canvasinfo, function(i, val){ var data = val.split('_'); ability_value.push(data[0] || 0); ability_name.push(data[1]); ability_value2.push(data[2] || 0); }); polygon($hex[0], canvasinfo.length, maxvalue, ability_value, ability_name, ability_value2); }); // 绘制多边形图 function polygon(obj, side, part, ability_value, ability_name, ability_value2) { var ability = obj.getContext('2d'); ability.canvas.width = obj.width ; ability.canvas.height = obj.height ; var width = obj.width-10; var height = obj.height-10; // ability.rect(0,0,width,height); // ability.fillStyle="rgba(34,34,34,1)"; // ability.fill(); var xCenter = width * 0.5; var yCenter = height * 0.5; var radius = width * 0.3; var space = radius/part; var theta = Math.PI*2/side; //绘制渐变多边形底层 for (var j=part;j>=1;j--) { ability.beginPath(); for (var i=0; i<=side; i++) { ability.lineTo(Math.cos(i*theta)*space*j+xCenter,-Math.sin(i*theta)*space*j+yCenter); } var r=10, g=31,b=146,a=0.2; ability.lineWidth = 1; ability.strokeStyle="rgba(128,128,128,1)"; ability.stroke(); ability.fillStyle = "rgba("+ r +","+ g +","+ b +"," + a + ")"; ability.fill(); ability.closePath(); for (var i=0; i<=side; i++) { ability.beginPath(); ability.moveTo(xCenter,yCenter); ability.lineTo(Math.cos(i*theta)*space*j+xCenter,-Math.sin(i*theta)*space*j+yCenter); ability.stroke(); ability.closePath(); } } //绘制能力多边形 ability.beginPath(); for (var i=0; i<=side; i++) { var x = Math.cos(i*theta)*radius*(ability_value[i%side]/part)+xCenter; var y = -Math.sin(i*theta)*radius*(ability_value[i%side]/part)+yCenter; ability.lineTo(x,y); } ability.closePath(); ability.fillStyle="rgba(255,169,169,0.6)"; ability.fill(); //绘制能力多边形的变化数据 ability.beginPath(); for (var i=0; i<=side; i++) { var x = Math.cos(i*theta)*radius*(ability_value2[i%side]/part)+xCenter; var y = -Math.sin(i*theta)*radius*(ability_value2[i%side]/part)+yCenter; ability.lineTo(x,y); } ability.closePath(); ability.lineWidth = 2; ability.strokeStyle="rgba(255,169,169,1)"; ability.stroke(); //绘制字体 for (var i=0; i<side; i++) { ability.fillStyle="rgba(0,0,0,1)"; ability.font = "normal 15px Microsoft Yahei"; if (Math.cos(i*theta)*radius>0) { if(i==0){ ability.textAlign = 'left' var x = Math.cos(i*theta)*radius+xCenter+3; } else{ ability.textAlign = 'center' var x = Math.cos(i*theta)*radius+xCenter+3; } } else { ability.textAlign = 'left' var x = Math.cos(i*theta)*radius*1.5+xCenter; } var y = -Math.sin(i*theta)*radius*1.3+yCenter; ability.fillText(ability_name[i],x,y+6); } }
<div class="resourceLoader" style="display:none" data-is-module="false" data-is-module-es6="false" data-is-module-react="[false,false]" data-mime="" >MediaWiki:{{{1}}}</div>

更新日志

1.0