API

【代码分享】在木疙瘩中添加雷达图的方法

木疙瘩自己并没有雷达图功能,但可以使用代码来生成,下面是一个案例
 
发布链接:https://6.u.mgd5.com/c/n20h/q8hp/index.html
发布链接预览:

下载.png

 
 
打开下边的链接并另存
https://www.mugeda.com/animation/edit/6b202b89
 
作品中用到了js来生成canvas,并在canvas中绘制了雷达图,两个文本上分别设置了两个回调函数,点击文本,即可调用回调函数生成雷达图。代码使用 scene.getObjectByName('chartContainer').dom 把mugeda对象转换成dom对象,然后才可以使用原生js来进行操作,这里是api文档,可以参考一下:http://card.mugeda.com/mugedaApiDoc/index.html
 
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var chartContainer = scene.getObjectByName('chartContainer').dom;

var mW = 300; //雷达图的宽
var mH = 300; //雷达图的高
var mData = [['速度', 77],['力量', 72],['防守', 46],['射门', 50],['传球', 80],['耐力', 60]];
var mCount = mData.length; //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
var canvas;

//回调函数
window.createRadarChat = function(){
//初始化
// (function(){
// var canvas = document.createElement('canvas');

// document.body.appendChild(canvas);
// chartContainer.appendChild(canvas);

chartContainer.innerHTML = '<canvas id="myCart"></canvas>';
canvas = document.getElementById('myCart');

canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');

drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
// })();
}

//回调函数
window.changeChart = function(){
mData = [['速度', 70],['力量', 32],['防守', 16],['射门', 90],['传球', 80],['耐力', 60]];

chartContainer.innerHTML = '<canvas id="myCart"></canvas>';

canvas = document.getElementById('myCart');

canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');

drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
}

// 绘制多边形边
function drawPolygon(ctx){
ctx.save();

ctx.strokeStyle = mColorPolygon;
var r = mRadius/ mCount; //单位半径
//画6个圈
for(var i = 0; i < mCount; i ++){
ctx.beginPath();
var currR = r * ( i + 1); //当前半径
//画6条边
for(var j = 0; j < mCount; j ++){
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);

ctx.lineTo(x, y);
}
ctx.closePath()
ctx.stroke();
}

ctx.restore();
}

//顶点连线
function drawLines(ctx){
ctx.save();

ctx.beginPath();
ctx.strokeStyle = mColorLines;

for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);

ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}

ctx.stroke();

ctx.restore();
}

//绘制文本
function drawText(ctx){
ctx.save();

var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;

for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);

if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
}else{
ctx.fillText(mData[i][0], x, y);
}

}

ctx.restore();
}

//绘制数据区域
function drawRegion(ctx){
ctx.save();

ctx.beginPath();
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();

ctx.restore();
}

//画点
function drawCircle(ctx){
ctx.save();

var r = mCenter / 30;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
}

ctx.restore();
}

// 代码参考以下博客
// 原文:https://blog.csdn.net/lecepin/ ... 66711


});


2 个评论

怎么用游戏结果动态生成雷达图?。。。。。
var mData = [['速度', 77],['力量', 72],['防守', 46],['射门', 50],['传球', 80],['耐力', 60]];

可以看一下这行代码的数字,这些数字可以使用mugeda的api从舞台上的文本取值,然后就可以是动态的了

假如舞台上有个叫速度的文本,就可以这么写来取值
var mData = [['速度', scene.getObjectByName('速度').text],['力量', 72],['防守', 46],['射门', 50],['传球', 80],['耐力', 60]];

要回复文章请先登录注册