Question

我试图用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/

pixi：http://jsfiddle.net/ngma7snq/59/

phaser：https://jsfiddle.net/1ck39fos/1/

有谁知道为什么会这样，我怎么能达到我的目的呢？

Answer 1

在我看来，arc中的Graphics.js函数存在某种错误。您可以顺时针或逆时针绘制圆弧，但如果顺时针选择（如代码示例中所示），则看起来它不会返回圆弧的中心see code here。

如果您更改代码以便按逆时针顺序绘制线段，那么它可以正常工作。您必须将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);
  }
}

发出绘制Phaser饼图的问题

1 个答案: