时间戳

首页 > 解决方案 > 绘制 Phaser 饼图的问题

javascript - 绘制 Phaser 饼图的问题

问题描述

我正在尝试使用 Phaser 创建一个饼图，graphics用于绘制饼图的每个切片 ( graphics.arc(...))。问题是，当它呈现时，我得到（我认为）一个意想不到的结果。

我基本上想绘制 3 个相同大小的切片，我使用的代码如下所示：

function degToRad(degrees) {
  return (degrees * Math.PI)/180;
}

var total = 3;
var width = 300;

for (var i = 0; i < total; i++) {
  var radius = Math.floor(width / 2);
  var deg = 360 / total;
  var start = degToRad(i * deg);
  var end = degToRad((i + 1) * deg);

  graphics = game.add.graphics()
  graphics.beginFill(0xFF0000)
  graphics.lineStyle(2, 0x000000)
  graphics.moveTo(0, 0);
  graphics.arc(0, 0, radius, start, end, false);
  graphics.endFill()
}

我创建了 3 个小提琴来展示基于画布、pixi 和移相器的示例之间的区别，它们中的每一个都使用相同的过程来绘制切片：

画布：https ://jsfiddle.net/oL414v9t/1/

小精灵：http : //jsfiddle.net/ngma7snq/59/

移相器：https ://jsfiddle.net/1ck39fos/1/

有谁知道为什么会发生这种情况以及我怎样才能实现我想要的？

标签： javascripthtmlphaser-framework

解决方案

在我看来，arc在Graphics.js. 您可以顺时针或逆时针绘制弧线，但如果您选择顺时针（如在您的代码示例中），那么它看起来不会返回到弧线的中心，请参见此处的代码。

如果您更改代码以使其按逆时针顺序绘制线段，则它可以工作。您必须将最后一个参数设置arc为 true 而不是 false，并更改一些其他内容。请参阅下面的代码，这似乎有效。

function create() {
  var total = 3;
  var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF];

  for (var i = 0; i < total; i++) {
    var centerX = Math.floor(width / 2);
    var centerY = Math.floor(height / 2);
    var radius = Math.floor(width / 2);

    var deg = 360 / total;
    var start = degreesToRadians(total-i * deg);
    var end = degreesToRadians((total-i - 1) * deg);

    graphics = game.add.graphics();
    graphics.beginFill(colors[i]);
    graphics.lineStyle(2, 0x000000);
    graphics.moveTo(centerX, centerY);
    graphics.arc(centerX, centerY, radius, start, end, true);
    graphics.endFill()
    game.stage.addChild(graphics);
  }
}

推荐阅读