雷达图绘制函数

shitake

VA 时期就见过角色属性雷达图这种东西了。
不过VA还得自己实现画线算法。mv相比就简单多了。
脚本里提供一个 drawRadarMap(data, labels) 这样的函数。
两个参数分别是绘制时的数据和对应的标签。
返回值是个bitmap对象。
十分方便使用。无论是blt还是直接挂到某个sprite下都行。
整个函数可以当做个API来用。

然后要注意的是函数里的conf部分。用来控制绘制效果。
前四个都是颜色相关。fontName也很哈好理解。
mCount 是指维度。要注意data和label的size要和该值相同。
maxValue 指data的最大值。绘制雷达图的时候，按data和maxValue的比率来绘制。
size 自然就是整个雷达图的大小了。

在使用的时候，可以根据自己需要来修改conf里的值。

[fold=脚本][pre lang="javascript"]/**
* draw radar map.
* @param data [Array<Number>] data.
* @param labels [Array<String>] labels.
*/
function drawRadarMap(data, labels) {
  var conf = {
    lineColor: 'rgba(250, 250, 250, 0.6)',
    bgColor: 'rgba(200, 200, 200, 0.6)',
    fgColor: 'rgba(230, 230, 230, 0.8)',
    fontColor: 'rgba(255, 255, 255, 1)',
    fontName: 'Microsoft Yahei',
    mCount: 8,
    maxValue: 100,
    size: 300
  };

  if (data.length != conf.mCount || labels.length != conf.mCount) {
    Error('radar map: error data!');
  }
  var angle = Math.PI * 2 / conf.mCount;
  var center = conf.size / 2;
  var mRadius = center - 40;
  var bitmap = new Bitmap(conf.size, conf.size);
  var ctx = bitmap._context;
  
  ctx.save();
  //draw border
  ctx.strokeStyle = conf.lineColor;
  ctx.fillStyle = conf.bgColor;
  for (var i = 1; i <= conf.mCount; i++) {
    ctx.beginPath();
    var r = mRadius / conf.mCount * i;
    for (var j = 0; j < conf.mCount; j++) {
      var x = center + r * Math.cos(angle * j);
      var y = center + r * Math.sin(angle * j);
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    if (i == conf.mCount) {
      ctx.fill();
    }
    ctx.stroke();
  }

  //draw line
  ctx.beginPath();
  for (var i = 0; i < conf.mCount; i++) {
    var x = center + mRadius * Math.cos(angle * i);
    var y = center + mRadius * Math.sin(angle * i);
    ctx.moveTo(center, center);
    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.stroke();

  //fill data
  ctx.fillStyle = conf.fgColor;
  ctx.beginPath();
  for (var i = 0; i < conf.mCount; i++) {
    var r = mRadius * data / conf.maxValue;
    var x = center + r * Math.cos(angle * i);
    var y = center + r * Math.sin(angle * i);
    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.fill();

  //draw label
  let fontSize = center / 12
  ctx.font = fontSize + 'px ' + conf.fontName;
  ctx.fillStyle = conf.fontColor;
  for (let j = 0; j < conf.mCount; j++) {
    let x = center + mRadius * Math.cos(angle * j);
    let y = center + mRadius * Math.sin(angle * j);
    if (angle * j >= 0 && angle * j < Math.PI / 2) {
      ctx.fillText(labels[j], x, y + fontSize)
    } else if (angle * j == Math.PI / 2) {
      ctx.fillText(labels[j], x - ctx.measureText(labels[j]).width / 2, y + fontSize);
    } else if (angle * j > Math.PI / 2 && angle * j <= Math.PI) {
      ctx.fillText(labels[j], x - ctx.measureText(labels[j]).width, y + fontSize);
    } else if (angle * j > Math.PI && angle * j < Math.PI * 3 / 2) {
      ctx.fillText(labels[j], x - ctx.measureText(labels[j]).width, y);
    } else if (angle * j == Math.PI * 3 / 2) {
      ctx.fillText(labels[j], x - ctx.measureText(labels[j]).width / 2, y);
    } else {
      ctx.fillText(labels[j], x, y);
    }
  }
  ctx.restore();
  return bitmap;
}[/pre][/fold]

效果图：

fux2

猜到会使用fill,2333，不得不说h5提供了太多方便的函数。

walf_man

666，楼主太强大了

fridzbw

还是没有弄明白 楼主能不能举个例子{:2_249:}

tseyik

0.2.0         2016/12/24         RPG ツクール MV 1.3 ベースのプロジェクトに対応
0.1.0         2016/01/01         初版
http://ytomy.sakura.ne.jp/tkool/ ... d_status_scene.html

fridzbw

tseyik 发表于 2017-6-13 11:02
0.2.0         2016/12/24         RPG ツクール MV 1.3 ベースのプロジェクトに対応
0.1.0         2016/01/01         初版
http://y ...

非常感谢！ 国外可以打开网页 {:2_249:}我好好研究下

sigmaWZF

想问一下大佬，用bitmap的blt方法画这个返回的bitmap的时候sx和sy参数应该怎么填呢？我画出来的五边形是歪的就很难受

gg123wtf

sigmaWZF 发表于 2020-4-17 22:05
想问一下大佬，用bitmap的blt方法画这个返回的bitmap的时候sx和sy参数应该怎么填呢？我画出来的五边形是歪 ...

conf里面有size，雷达图返回的bitmap宽高都是这个值，可以自己配置

---

呃。。一开始没看清，以为是sw和sh
sx和sy不就是bitmap左上角的坐标吗，也就是(0,0)啊

sigmaWZF

gg123wtf 发表于 2020-4-17 22:41
conf里面有size，雷达图返回的bitmap宽高都是这个值，可以自己配置

呃。。一开始没看清，以为是sw和sh

这个后来我弄懂了，但是五边形还是歪了，（用我已经忘干净了的三角函数知识）一顿改，加了个判断，奇数边的要把sin和cos反过来订xy才会不歪（但是还是倒着的），要是有更好的方法就好了，谢谢大佬回复。

lighindark

感谢分享，下了研究看看