—»     —»   Анимированная диаграмма навыков с использованием javascript-библиотеки Raphael
  Раздел: Библиотеки скриптов, Графики и Диаграммы, Java-Скрипты, Руководства   Комментариев: 1  

Анимированная диаграмма навыков с использованием javascript-библиотеки Raphael



Сегодняшняя статья посвящена разработке диаграммы используя «Raphael» - маленькую javascript-библиотеку, которая отлично работает с векторной графикой. Идея крайне проста: мы рисуем несколько арок, используя математические функции и, таким образом, мы будем отображать уровень навыков в процентном соотношении в основной окружности при наведении на последующие арки.

Давайте начнём с вёрстки...

Вёрстка

Структура HTML будет состоять из основного контейнера с классом «get». Этот контейнер содержит все данные, которые нам понадобятся для создания арок. Далее мы создаём новый элемент div с Id «diagram» (он и будет контейнером для арок):

<div id="diagram"></div>
<div class="get">
    <div class="arc">
        <span class="text">jQuery</span>
        <input type="hidden" class="percent" value="95" />
        <input type="hidden" class="color" value="#97BE0D" />
    </div>
    <div class="arc">

        <span class="text">CSS3</span>
        <input type="hidden" class="percent" value="90" />
        <input type="hidden" class="color" value="#D84F5F" />
    </div>
    <div class="arc">
        <span class="text">HTML5</span>
        <input type="hidden" class="percent" value="80" />
        <input type="hidden" class="color" value="#88B8E6" />

    </div>
    <div class="arc">
        <span class="text">PHP</span>
        <input type="hidden" class="percent" value="53" />
        <input type="hidden" class="color" value="#BEDBE9" />
    </div>
    <div class="arc">
        <span class="text">MySQL</span>
        <input type="hidden" class="percent" value="45" />
        <input type="hidden" class="color" value="#EDEBEE" />
    </div>
</div>

CSS-код

В коде CSS мы сделаем всего две вещи: спрячем элементы с классом get и установим ширину и высоту div’а и id «diagram»:

.get {
    display:none;
}

#diagram {
    float:left;
    width:600px;
    height:600px;
}

Код javascript

Основная идея заключается в том, чтобы сначала создать новый объект Raphael (переменная «r»), и нарисовать первую окружность с радиусом, который мы укажем в «rad».
Затем мы создадим новую окружность в объекте Raphael. Центрируем окружность (x: 300 пикселей и y: 300 пикселей), а затем добавляем немного текста.

var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;

        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();

    }
}

Теперь, давайте перейдём на следующий этап.
Расширим объект Raphael посредством дополнительных атрибутов:

Alpha – угол арки
Random – случайный номер из указанного диапазона
Sx, sy – начало отрисовки с данной точки
X, y – окончание рисования
M – движение к стартовой точке. Ничего не нарисовано. Все данные должны начинаться с команды «moveto».
А – radius-x, radius-y x-axis-rotation large-arc-flag, sweep-flag, x, y (более подробно по поводу этого можно прочесть на https://developer.mozilla.org/en/SVG/Tutorial/Paths)

var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;

        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();

        r.customAttributes.arc = function(value, color, rad){
            var v = 3.6*value,
                alpha = v == 360 ? 359.99 : v,
                random = o.random(91, 240),
                a = (random-alpha) * Math.PI/180,
                b = random * Math.PI/180,
                sx = 300 + rad * Math.cos(b),
                sy = 300 - rad * Math.sin(b),
                x = 300 + rad * Math.cos(a),
                y = 300 - rad * Math.sin(a),
                path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
            return { path: path, stroke: color }
        }

        $('.get').find('.arc').each(function(i){
            var t = $(this),
                color = t.find('.color').val(),
                value = t.find('.percent').val(),
                text = t.find('.text').text();

            rad += 30;
            var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

            z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
                    this.toFront();
                title.animate({ opacity: 0 }, 500, '>', function(){
                    this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
                });
            }).mouseout(function(){
                this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
        });
    }
}

Далее мы сделаем запрос на нужные нам данные (значение процентного соотношения, цвет арки и текста). Мы увеличим значение радиуса для каждой арки и, наконец, создадим новый путь для арки.
В последнем этапе мы добавим небольшую анимацию при наведении курсора мыши. Когда курсор мыши будет наведён на арку, заголовок (расположенный в основной окружности) будет изменяться. Мы также сделаем арку немного больше.

Заключение

В нашей сегодняшней статье мы рассказали вам о пользовании Raphael. Это мощная библиотека, с помощью которой вы можете делать множество интересных эффектов. Для других примеров, пожалуйста, посетите официальный веб-сайт Raphael.

Посмотреть демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 13648   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 февраля 2012 @ 21:09
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо вашему сайту за подобную инфомацию. Спасибо отдельное этой статье - уверен что пригодится этот html код для моей работы. Сегодня же попробую его применить и получить векторную диаграмму.
/*------------------------------------------------------------------------------
--------------------*/
ОНЛАЙН крутяк
/*------------------------------------------------------------------------------
--------------------*/
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031