Comment dessiner un segment circulaire en utilisant du papier.js

Question

Comment dessiner le segment circulaire en utilisant papier.js

Je veux dessiner les segments circulaires comme indiqué dans l'image.Chaque segment est indépendant et sera utilisé ultérieurement à des fins interactives.

J'ai essayé quelque chose comme

//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';

et il rend quelque chose comme ci-dessous

Answer 1

Après plusieurs tentatives, je suis venu avec ça.Si quelqu'un a besoin de la même chose pour une raison quelconque, peut-être que cela aidera.

//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;
}