Come disegnare il segmento circolare usando paper.js
-
12-11-2019 - |
Domanda
Come disegnare il segmento circolare usando paper.js
Voglio disegnare i segmenti circolari come mostrato nell'immagine. Ogni segmento è indipendente e verrà successivamente utilizzato per scopi interattivi.
Ho provato qualcosa di simile
//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';
E rende qualcosa di simile
Soluzione
Dopo diversi tentativi, mi sono venuto in mente questo. Se qualcuno ha bisogno della stessa cosa per qualsiasi motivo, forse questo ti aiuterà.
//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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow