Сегодня мы будем рисовать круг, разбитый на шесть равных секторов, используя замечательную библиотеку 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>
Как-то так.
ЗЫ: Я окончательно убедилась, что мне нужна подсветка кода. Надо бы что-нибудь такое подключить к блогу.
Итак, качаем библиотеку отсюда: 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>
Как-то так.
ЗЫ: Я окончательно убедилась, что мне нужна подсветка кода. Надо бы что-нибудь такое подключить к блогу.
