拉斐爾js繪製指定類別的所有元素的圈子

Question

我剛剛發現了拉斐爾，並且很喜歡它，但我並不是一個javascript-er。現在我有三個重複的代碼段來在三個不同的div中繪製同一個圓。在Raphael中創建一個畫布的默認方式是通過ID找到一個元素，但我希望有一組變量可以在所有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

非常感謝您的幫助！

Answer 1

定義一個函數，它接受一個參數的DIV，這樣就可以自動執行過程：在你的window.onload然後

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"); 
};