SVG: как нарисовать сектор круга

Сегодня мы будем рисовать круг, разбитый на шесть равных секторов, используя замечательную библиотеку jQuery SVG. Плюс сделаем подсветку сектора при наведении.

Итак, качаем библиотеку отсюда: http://keith-wood.name/svg.html и подключаем её. Если нам нужна реакция на клик или наведение, дополнительно подключаем расширение SVG DOM (обратите внимание - для нормальной работы с нашим любимым ИЕ понадобится изменённая библиотека jQuery, она есть на этом же сайте). Собственно, мануал с большими картинками там присутствует, примеров сколько душе угодно - играйтесь на здоровье.  А я перейду сразу к секторам, поскольку гугл выдаёт очень мало информации на этот счёт, а хочется быстро и красиво.

Итак, после подключения библиотеки создаём блок, в котором всё будет происходить:

<div id='circle' width='200' height='200'></div>

Ну и поехали. См. комментарии.


<script type="text/javascript">
$(function() {
$('#circle').svg({onLoad: drawCircle}); // #circle - идентификатор вашего блока, drawCirce - функция, которая будет отрисовывать всю красоту
});

/* Эта функция вычисляет координату точки на окружности, из которой будет начинаться следующий сектор. Чуть ниже мы загоним её в цикл. В неё передаются координаты точки начала отсчёта. */

function nextCoord(x0, y0){

// это координаты центра круга
x = 100;
y = 100;

alpha = 60*Math.PI/180; // считаем угол в радианах. 60 - это размер угла в градусах. Соответственно, у нас будет 6 секторов по 60 градусов.

rx = x0 - x;
ry = y0 - y;
c = Math.cos(alpha);
s = Math.sin(alpha);
x1 = x + rx * c - ry * s;
y1 = y + rx * s + ry * c;

return [x1,y1]; // и возвращаем массив с новыми координатами
}

// Наша основная функция

function drawCircle(svg) {

svg.circle(100, 100, 100,  {fill: '#ffffff'});  /* Рисуем круг. Параметры: координата x, координата y, радиус, объект со всяческими опциями (см. мануал). Этот шаг можно пропустить, поскольку наши сектора и так составят тот же самый круг. */

var coord = [0,100]; // точка, с которой мы начинаем отсчитывать сектора. В данном случае - крайняя левая точка окружности.

for(var i=0;i<6;i++){ // секторов у нас будет 6, поэтому прогоняем цикл 6 раз

                var sector = svg.createPath(); // создаём новую кривую

sector.move(100,100,false); // "ставим карандаш" в центр будущего круга. false здесь означает, что координаты абсолютные, опять же, курите мануал

sector.line(coord[0],coord[1],false); // ведём линию из центра к нашей отправной точке на окружности

var newcoord = nextCoord(coord[0],coord[1]); // с помощью предыдущей функции считаем координаты конечной точки дуги сектора

sector.arc(100, 100, 60, false, true, newcoord[0], newcoord[1], false)
/* рисуем дугу. Параметры: 
1,2) 100 и 100 - 2 радиуса эллипса, частью которого будет наша дуга  (в данном случае это и есть круг с радиусом 100), 
 3) угол - у нас он 60 градусов
4) Выбрать бОльшую дугу (если эллипс вытянутый) - true или false
5) Отмеряем дугу по часовой стрелке - true, против часовой - false
6,7) Наши новые координаты, точка, в которую дуга должна прийти
8) false - координаты итоговой точки абсолютные
*/

sector.close(); // "закрываем" наш сектор, конец дуги автоматически соединяется с начальной точкой в центре круга

svg.path(sector, {fill:'#ffffff',stroke: 'black', strokeWidth: 1, class: 'sector'}); //отрисовываем наш сектор. не забываем присвоить ему класс или id, если хотим повесить на него событие

coord = newcoord; // принимаем точку на круге, в которую мы пришли, за исходную, и идём на следующий цикл
}

       // Добавляем изменение заливки при наведении

$('.sector').mouseover(function(){
$(this).attr('fill','#d5ff9d');
});

$('.sector').mouseout(function(){
$(this).attr('fill','#fff');
});

}

</script>

Как-то так.

ЗЫ: Я окончательно убедилась, что мне нужна подсветка кода. Надо бы что-нибудь такое подключить к блогу.