« タイトルの入力(修正) | トップページ | テキスト作成 -2- »

2012年4月23日 (月)

テキスト作成

FlatTable にテキスト(コメント)作成機能を追加しました。ただし、まだ予定の機能の一部だけです。テキストは、コメントを記述したり、台の位置に記号を振るのに使用します。

配置図例

テキストを作成するには、球をクリックしてからボタン[ Ball ]のメニューで[ Text ]をクリックします。すると、テキスト入力のダイアログが表示されるので、そこにテキストを入力します。その後、テキストを表示したい位置(ただし、ラシャの上)をクリックすると、その位置にテキストが表示されます。最初に球をクリックするのはテキストの色を球の色で指定するためです。

表示されているテキストをクリックすると、テキスト操作のメニューが表示されます。メニューの項目は

  • Move Text
  • Edit Text
  • Resize Text
  • Border ON/OFF
  • Delete Text
  • Cancel
です。ただし、[ Move Text ][ Resize Text ]は未実装です。

上記テキスト操作メニューのルーチンはそれぞれ数行しか無く、特に説明するほどのものでもありません。少し難しいのはラシャをクリックした時にテキストを表示するルーチンです。それを下に示します。これは dragStop() の中で実行します。

    curTxt = document.createElementNS(svgns, "g");
    // (1)
    var ctm = flattable.getCTM();
    curTxt.x = (evt.clientX - ctm.e)*mag - centerX;
    curTxt.y = (evt.clientY - ctm.f)*mag - centerY;
    curTxt.color = txtColor;

    var txtFrame = document.createElementNS(svgns, "rect");
    txtFrame.setAttribute("x", centerX);
    txtFrame.setAttribute("y", centerY);
    txtFrame.setAttribute("height", FONTHEIGHT + 2);
    txtFrame.setAttribute("style",
        "fill:" + txtColor + ";fill-opacity:0.01;stroke:" + txtColor);
    curTxt.appendChild(txtFrame);

    var txtTxt = document.createElementNS(svgns, "text");
    txtTxt.setAttribute("x", centerX + 2);
    txtTxt.setAttribute("y", centerY + FONTHEIGHT);
    txtTxt.setAttribute("style", "font-size:12;fill:" + txtColor);
    txtTxt.textContent = txtData;
    txtData = "";

    addEvent(curTxt, "click", clickTxt);
    curTxt.setAttribute("transform",
        "translate(" + curTxt.x + "," + curTxt.y +")");
    curTxt.appendChild(txtTxt);

    curPage.appendChild(curTxt);
    txtFrame.setAttribute("width",
        txtTxt.textLength.baseVal.value + 4);    // (2)

テキストは recttext で構成されており、それらを g でまとめています。

クリック位置は evt.clientX, evt.clientY で取得できますが、この値はウィンドウ固有(ビューポート)の座標系に基づく値です。これを FlatTable の座標系に変換しているのが (1) です。getCTM() で現在の変換行列(CTM)と言うものを取得して座標変換に利用しています。mag は別の場所で 1/ctm.a が代入されています。

textLength には表示された文字列の長さ(文字数という意味ではなく、表示領域の長さ)の情報が入っていて、その値は textLength.baseVal.valueで取得できます(2)。これでテキストの枠を文字列の長さに合わせることが出来ます。

ここまでの実装では、テキストの移動、寸法変更は未実施です。また、台が回転すると文字が逆立ちするという問題が有り、それも未解決です。また、SVG のテキストには自動折り返し機能が無いので、現時点では1行のみの表示になっています。これらの問題は近日中に解決したいと思っています。

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« タイトルの入力(修正) | トップページ | テキスト作成 -2- »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: テキスト作成:

« タイトルの入力(修正) | トップページ | テキスト作成 -2- »