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

Как нарисовать круглый сегмент с помощью 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';

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

введите здесь описание изображения


javascript html5-canvas paperjs
person ptamzz    schedule 25.02.2012    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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

//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;
}
person ptamzz    schedule 25.02.2012
comment
Я думаю, что name.add(new Point(view.center.x, view.center.y-130)); на самом деле должно быть name.closed = true; , иначе в конце штриха будет небольшой разрыв. - person 01AutoMonkey; 26.02.2013
comment
этот ответ превосходен! хотя лучше объяснить, как получить эти значения. - person Raptor; 24.03.2015