Как нарисовать круговой сегмент с помощью paper.js

Question

Как нарисовать круговой сегмент с помощью paper.js

Я хочу обратить круговые сегменты, как показано на рисунке. Каждый сегмент независим и позже будет использоваться для интерактивных целей.

Я пытался что-то вроде

//Temporary background circle 
var keys = new Path.Circle(view.center, 130); 
keys.fillColor = '#F1F1F1'; 

var home = new Path.Circle(view.center, 50); 
home.fillColor = '#ee2a33'; 

var start = new Point(view.center.x, view.center.y-130); 
var through = new Point(view.center.x-125, view.center.y-40); 
var to = new Point(view.center.x-130, view.center.y); 

var path = new Path.Arc(start, through, to); 
path.strokeColor = 'black'; 
path.fillColor = 'green'; 

И это делает что-то вроде ниже

Answer 1

После нескольких попыток я пришел с этим. Если кому-то нужно то же самое по любой причине, возможно, это поможет.

//Creating keys 
var arcOne = createSegment('#f1f1f1'); 
var arcTwo = createSegment('#666666'); 
var arcThree = createSegment('#333333'); 
var arcFour = createSegment('#666666'); 
var arcFive = createSegment('#999999'); 
var arcSix = createSegment('#000000'); 

arcTwo.rotate(-60, view.center); 
arcThree.rotate(-120, view.center); 
arcFour.rotate(60, view.center); 
arcFive.rotate(120, view.center); 
arcSix.rotate(180, view.center); 


//center white 
var center = new Path.Circle(view.center, 50); 
center.fillColor = '#F1F1F1'; 

//Create Each segment 
function createSegment(fillcolor){ 
    //Segment One 
    var start = new Point(view.center.x, view.center.y-130); 
    var through = new Point(view.center.x-90, view.center.y-94); 
    var to = new Point(view.center.x-113, view.center.y-64); 
    var name = Path.Arc(start, through, to); 

    name.add(new Point(view.center.x, view.center.y)); 
    name.add(new Point(view.center.x, view.center.y-130)); 
    name.fillColor = fillcolor; 
    return name; 
}