Рафаэль JS рисования кругов во всех элементах с указанным классом - PullRequest
Новая
       9

Рафаэль JS рисования кругов во всех элементах с указанным классом

3 голосов
/ 30 марта 2010

Я только что обнаружил Рафаэля, и мне это нравится, но я не большой любитель JavaScript. Прямо сейчас у меня есть три повторяющихся фрагмента кода, чтобы нарисовать один и тот же круг в трех разных делениях. По умолчанию для создания холста в Raphael находит элемент по идентификатору, но я хочу иметь один набор переменных для рисования окружностей во всех элементах div с классом "circle". Я думаю, что должен быть более эффективный способ кодирования этого. Вот код, который я использую сейчас: 

window.onload = function () {
    var paper = Raphael("c1", 26, 26); /* Make canvas 26*26px in div id "c1" */
    var circle = paper.circle(13, 13, 10.5); /* Draw circle at the center of the canvas with radius 10.5  */
    circle.attr("stroke", "#f1f1f1");
    circle.attr("stroke-width", 2);
    var text = paper.text(13, 13, "1"); /* Print text "1" inside the circle  */
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text.attr("fill", "#f1f1f1");

    var paper2 = Raphael("c2", 26, 26);
    var circle2 = paper2.circle(13, 13, 10.5);
    circle2.attr("stroke", "#f1f1f1");
    circle2.attr("stroke-width", 2);
    var text2 = paper2.text(12, 13, "2");
    text2.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text2.attr("fill", "#f1f1f1");

    var paper3 = Raphael("c3", 26, 26);
    var circle3 = paper3.circle(13, 13, 10.5);
    circle3.attr("stroke", "#f1f1f1");
    circle3.attr("stroke-width", 2);
    var text3 = paper3.text(12, 13, "3");
    text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text3.attr("fill", "#f1f1f1");
};

Тестовый сайт @ http://jesserosenfield.com/fluid/test.html

Большое спасибо за вашу помощь!

1 Ответ

8 голосов
/ 30 марта 2010

определяет функцию, которая принимает аргумент для div, чтобы вы могли автоматизировать процесс: 

function drawcircle(div, text) { 
    var paper3 = Raphael(div, 26, 26); //<<
    var circle3 = paper3.circle(13, 13, 10.5);
    circle3.attr("stroke", "#f1f1f1");
    circle3.attr("stroke-width", 2);
    var text3 = paper3.text(12, 13, text); //<<
    text3.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text3.attr("fill", "#f1f1f1");
}

Тогда в вашем окне. Загрузить: 

window.onload = function () {
    drawcircle("c1", "1");
    drawcircle("c2", "2");
    drawcircle("c3", "3");
};
...