作者
作者：碧蓝航线WIKI
依赖页面
<div class="resourceLoader"
style="display:none"
data-is-module="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;
var height = obj.height;
// 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,255,255,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,255,255,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-mime=""
>MediaWiki:{{{1}}}</div>
更新日志
1.0
沪公网安备 31011002002714 号