« 9-ラック、フルラック | トップページ | ページの生成・削除、ページ移動 »

2012年4月 1日 (日)

タイトルの入力

SVG の参考文書としては、「SVG 1.1 仕様 (第2版) 日本語訳」で必要充分・・・な、はずなのですが、こんな解りにくい文書は見たことが有りません。検索機能が無いので、何かキーワードを調べるのもままなりません。

そこで、他の参考書(サイト)で、最近見つけて非常に重宝しているのが「SVG 実習マニュアル」です。記述も平易で、例文も多く、上記仕様書よりも遥かに役に立っています。

FlatTable ではタイトルを入力・表示できることになっています。Flash では、テキストフィールドに入力機能が付いているので、悩むこと無くタイトルの入力が出来たのですが、SVG のテキストには同様の機能が有りません。どうしたものかと悩んでいましたが、「SVG 実習マニュアル」にその解が載っていました。prompt() を使って文字列を入力できるとのことです。

「SVG 実習マニュアル」を参考にして、タイトルの SVG コードおよび JavaScript コードは次のようになりました。

    <!-- タイトルの SVG コード -->
    <g id="titleBar"
        onclick="setText(evt)">
        <rect x="252" y="12" width="216" height="24"
            style="fill:#ddd;stroke:#999;stroke-width:1" />
        <text id="title" x="360" y="30"
            style="text-anchor:middle">test title</text>
    </g>
// JavaScript コード
function setText(evt){
    var el = evt ? evt.target : event.srcElement;
    var txt = el.parentNode.childNodes[3].firstChild;
    txt.data = prompt("Text:", txt.data);
}

タイトル領域は recttext の2つから成っています。このタイトル領域をクリックした時 el が2つのどちらになるかはクリック位置次第です。そこで、

<text id="title" x="360" y="30"
	style="text-anchor:middle">test title</text>    (1)
を取得するために、一旦 parentNode に上がります。そして、3番目の子供 childNodes[3] で (1) を取得しています。(1)の firstChild が「test title」という Text Object で、この Text Object の data が文字列
test title
になっています。

なお、FlatTable では、コメントや配置コードに関する操作でも文字列を入力する場面が有りますが、そのルーチンは setText() を共有して使用することにします。

« 9-ラック、フルラック | トップページ | ページの生成・削除、ページ移動 »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: タイトルの入力:

« 9-ラック、フルラック | トップページ | ページの生成・削除、ページ移動 »