ラファエルJSは、指定されたクラスで、すべての要素で円を描きます
-
23-09-2019 - |
質問
私はラファエルを発見し、それを愛し、私はかなりのjavascript-ERのないですしました。今、私は、3つの異なるのdivに同じ円を描くように、コードの3つの繰り返しセクションを持っています。ラファエルでキャンバスを作成するためのデフォルトはIDによって要素を見つけたが、私は、クラス「円」で、すべてのdivに描かれた円を持っているために、変数の1セットを持っていると思います。私はこれをコーディングするより効率的な方法がなければならないと思います。ここで私が今使っているコードは次のとおりです。
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する
そんなにあなたの助けをありがとう!
解決
あなたがプロセスを自動化することができるように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でます:
window.onload = function () {
drawcircle("c1", "1");
drawcircle("c2", "2");
drawcircle("c3", "3");
};
所属していません StackOverflow