Полукруг с использованием Рафаэля

Question

Я очень новичок в использовании библиотеки Raphael JS, и я пытаюсь понять все это. Я пытаюсь создать диаграмму на основе процентов, где 100% будет полный круг. Часть круга, которую я понял, но как мне изменить ее, чтобы она показала полукруг для 50% или четверть круга для 25%?

Answer 1

Я рекомендую взглянуть на код этого примера на домашней странице Рафаэля. Это должно быть достаточно легко изменить его в соответствии с вашими потребностями.

Эта функция, в частности, то, что вы ищете

var rad = Math.PI / 180;
function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}

так, 50% срез будет

var fifty = sector(100,100,50,0,180,{"fill":"red"});
var twentyfive = sector(100,100,50,180,270,{"fill":"red"});

Конечно, это работает со степенями - вы можете обернуть его, чтобы использовать проценты.

Answer 2

Вы должны использовать path () и указать его, используя синтаксис пути SVG.Вот пример создания замкнутого четверть круга (верхний левый квадрант):

var arcPath = paper2.path("M200,200 v-150 a150,150 0 0,0 -150,150 z");
arcPath.attr("fill", "red");

См. эту ссылку для получения дополнительной информации о путях SVG.