Drawing a roulette wheel, how to avoid arcs connecting

[squarfed]

I want to draw a roulette wheel, with 8 sectors, using the arc primitives. For each sector one arc is drawn in a clockwise direction, then one other in anticlockwise direction. Code snippet:

const arcAngle = Math.PI/4
const graphics = new PIXI.Graphics()
graphics.lineStyle(2, 0xffd900, 1)
for (let i = 0; i < 8; i++) {
   let angle = startAngle + i * arcAngle
    graphics.beginFill()
    // arc 1
    graphics.arc(250, 250, outsideRadius, angle, angle + arcAngle, false)
    // arc 2
    graphics.arc(250, 250, insideRadius, angle + arcAngle, angle, true)
    graphics.endFill()
  }

This does not work though, because at each iteration the last point of arc 2 is connected to the first of arc 1 creating a slanted line which should not be there. How can i solve it cleanly? Would it be better to create a Graphics object for each roulette sector and then translate, rotate and put them in a container assembling the whole roulette?

[Taz]

You can use moveTo to move the current drawing position to the start of the next arc. Like this if I have my math right:

const arcAngle = Math.PI/4
const graphics = new PIXI.Graphics()
graphics.lineStyle(2, 0xffd900, 1)
for (let i = 0; i < 8; i++) {
   let angle = startAngle + i * arcAngle
    graphics.beginFill()

    // arc 1
    graphics.moveTo(250 + outsideRadius * Math.cos(angle), 250 + outsideRadius * Math.sin(angle));
    graphics.arc(250, 250, outsideRadius, angle, angle + arcAngle, false)

    // arc 2
    graphics.moveTo(250 + insideRadius * Math.cos(angle + arcAngle), 250 + insideRadius * Math.sin(angle + arcAngle));
    graphics.arc(250, 250, insideRadius, angle + arcAngle, angle, true)

    graphics.endFill()
  }

 

[squarfed]

Thanks. Is there any way in Pixi to change reference system? Like in canvas using save, translate, rotate, restore? It would make calculations easier.

[Taz]

I think you would have to manually save and restore the values - or make your own save and restore functions to handle scale, rotation, etc. all at once.