Ошибка рисования круговой диаграммы Phaser - PullRequest
Новая
       11

Ошибка рисования круговой диаграммы Phaser

0 голосов
/ 15 мая 2018

Я пытаюсь создать круговую диаграмму с помощью 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 скрипки, чтобы показать разницу между примерами на основе canvas, pixi и phaser, каждый из которых использует один и тот же процесс для рисования фрагментов:

canvas: https://jsfiddle.net/oL414v9t/1/

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

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

Кто-нибудь знает, почему это происходит и как я могу добиться того, чего хочу?

1 Ответ

0 голосов
/ 22 мая 2018

Мне кажется, что есть какая-то ошибка в функции 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);
  }
}
...