Jump to content

Issue drawing arc graphics with phaser


Recommended Posts

I'm trying to create a pie chart with Phaser, using `graphics` to draw each slice of the pie (`graphics.arc(...)`). The problem is that when it renders I get (what I think) an unexpected result.

I basically want to draw 3 slices the same size, the code I use looks something like this:

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.lineStyle(2, 0x000000)
      graphics.moveTo(0, 0);
      graphics.arc(0, 0, radius, start, end, false);

I've created 3 fiddles to show the difference between a canvas, pixi and phaser based examples, each of them using the same process to draw the slices:

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

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

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

Does anyone know why this happens and how can I achieve what I want?

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...