« 球の移動 -3- | トップページ | 経路の作図 -2- »

2012年3月 3日 (土)

経路の作図 -1-

Flash 版 FlatTable では、経路作図モードに入るトリガーはダブルクリックでした(球をダブルクリックすると経路作図モードに入る)。SVG+JavaScript 版では、スマートフォンにも対応することを考えているわけですが、スマートフォンでダブルクリックを実装するには、クリック間隔の時間を監視する必要が有ります。しかし、たかがダブルクリックごときでタイマーを監視するのは気が進みません。そこで今回の移植では、トリガーとして何かボタンのような物を使うことにします。そのボタンのような物とは、

長クッションの木枠
Long_frame
です。これをクリックすると経路作図モードに入り、再度クリックすると経路作図モードを出るようにします。因みに、短クッションの方は球の移動モードの解除になっています。

経路作図の動作は次のようになります。

  1. 経路作図モードに入る前に経路を作図する球をクリックしておきます。
  2. その後、長クッションの木枠をクリックして経路作図モードに入ります。
  3. すると、クリックしておいた球の位置に矢印球が出現します。
  4. 球の移動と同じ操作で矢印球を移動させます(矢印球をクリックしておく必要は有りません)。
  5. exPad(仮想的マウスパッド)上でクリックすると、矢印球の位置に経路の節点が作成されます(この時、その位置にゴーストが出現する)。
  6. 予定の経路を作図したら、長クッションの木枠をクリックして経路作図モードを抜けます。
ゴーストや矢印球をクリックしてから経路作図モードに入ると、その部分に経路が追加されます。また、既に経路が作成されている基礎球(ゴーストや矢印球ではない最初の球)をクリックしてから経路作図モードに入ると、それまでの経路がキャンセルされて、新たな経路の作図が始まります。

経路は SVG の要素 polyline で構成します。マウスの動きに合わせてインタラクティブに経路を描画するには、Flash だと MovieClip の clear() と lineTo() を使いますが、polyline には、lineTo() に相当するものが有りません。また、SVG のプロパティ display をnone に設定すれば非表示にすることは出来ますが、それが Flash の clear() に相当しているとは思えません。そういう訳で、インタラクティブな経路の描画に polyline が使用できるのか心配でした。

ところで、polyline には次のような属性が有ります。

  • points="節点の座標"
  • fill="塗りつぶしの色"
  • stroke="線の色"
  • stroke-width="線幅"
  • その他いろいろ
この属性を使って、どうやって Flash の clear() や lineTo() のようなことが出来るのでしょうか? しばらく悩んだのですが、分かってみると答えは簡単でした。points を書き換えてやれば良いだけでした。特別に clear() なんてことは必要無かったのです。

コードは、こうなります。

function makePath(){ ~ var path = document.createElementNS(svgns, "polyline"); path.setAttribute("style", "fill:none;~"); // (1) ~ baseBall.path = path; flattable.appendChild(path); ~ } function drawPath(baseBall){ var ball = baseBall; var points = ""; do { var x = ball.x + centerX; // (2) var y = ball.y + centerY; points += x + " " + y + " "; } while (ball = ball.next); baseBall.path.setAttribute("points", points); }

ここで注意することが2つ。1つ目は、fill を none にしないと polyline が多角形のごとく塗り潰されるということです(1)。2つ目は、ball.x や ball.y で表されている座標はセンタースポットを原点とした時の座標であるのに対して、polyline の座標は SVG 本来の座標(つまり、原点は左上)であることです。この2つ目より、上記コード内の x, y には centerX, centerY のオフセットが繰り込まれています(2)。

-2- に続く

ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。現時点では矢印球の向きが経路の傾きに同調していませんが、これは後日対応する予定です。

« 球の移動 -3- | トップページ | 経路の作図 -2- »

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 経路の作図 -1-:

« 球の移動 -3- | トップページ | 経路の作図 -2- »