« 予定している機能 | トップページ | スマフォ非対応? »

2012年3月10日 (土)

矢印球の色加工

矢印球の色をそれぞれの基礎球に合わせて加工するルーチンを追加しました。矢印球とは図の球のことです。
矢印球の説明図

この矢印球はA、B、Cの3つの要素から成る複合図形です。この矢印球を arrow と置くと、このような複合図形の場合、単純に

    arrow.setAttribute(・・・);
では色の加工は出来ません。色を加工するには、その構成要素を指定する必要が有ります。今まで、この構成要素へのアクセス方法が分からず、色の加工が出来ませんでした。SVG の仕様書に何か書いていないか探したのですが、そこには無く、やっと JavaScript 側に解を見つけることが出来ました。それは、
    childNodes[]    子要素リスト
です。この childNodes に構成要素(子要素)が配列になって入っていることが分かりました。

矢印球の色の加工ルーチンは次のようになります。

    矢印球の色の加工
    var i = baseBall.id.lastIndexOf("b");
    i = baseBall.id.slice(++i);
    arrow.childNodes[1].setAttribute("style",
        "fill:" + ballColor[i] +
        ";fill-opacity:0.2;stroke:" + ballColor[i] +
        ";stroke-width:0.5"
    );
    arrow.childNodes[3].setAttribute("style", "fill:" + ballColor[i]);
    arrow.childNodes[5].setAttribute("style", "fill:" + ballColor[i]);
ballColor[] は球の色から成る配列で、i は球の番号になっています。childNodes[] の1、3、5番の要素が図のA、B、Cに対応しています。

それにしても、Flash の時は、矢印球の色の加工は簡単だったのですが、SVG+JavaScript には苦労させられます。

« 予定している機能 | トップページ | スマフォ非対応? »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54183464

この記事へのトラックバック一覧です: 矢印球の色加工:

« 予定している機能 | トップページ | スマフォ非対応? »