« FlatTable のアニメーションに球の音を追加 | トップページ | MathJax のプレビュー »

2014年6月15日 (日)

状態遷移図を描きたい

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

このブログで採り上げている FlatTable は SVG で作成していますが、 SVG 版以前に Flash 版が出来ていました。その Flash 版では、ダブルクリックの判定を自前で行っています。これをプログラミングする時、状態遷移の把握が難しくてプログラミングがはかどらないので、 Excel で状態遷移図を作成し、それを利用していました。その1つが下図です。

状態遷移図

その後、これを状態遷移図としてもっとマシなものにしたくて状態遷移図ツールを探したのですが、気に入る物が見つかりませんでした。

しばらくして MathJax で CD (可換図式)が書けるようになりました。しかし、CD 環境では斜めの射線が引けないので、斜め射線に対応しているものを探したところ MathJax で使える \(\xypic\) 拡張として XyJax というものの有ることが分かりました。この XyJax (即ち \(\xypic\)) は斜め射線だけでなく曲線も引けます。これを使えば状態遷移図が描けそうです。ただし、 XyJax は MathJax の正式な機能ではないので、アクセス先を MathJax とは別に用意しなければなりません。将来、 XyJax が MathJax に取り込まれた場合の変更が煩わしいので、 MathJax で正式に取り込まれるのを待っていたのですが、待ち切れなくて XyJax を利用することにしました。 XyJax は以下から入手できます。

http://sonoisa.github.io/xyjax/xyjax.html

XyJax を使って作成した状態遷移図は以下の通りです。

\[\xymatrix{ & & & & *+[F:<3pt>]\txt{null\\MakeArw\\Accept} \ar@/_10pt/[llld]^<>(0.4){Accept,stopDrag}_<>(0.6){[move]} \ar@/_40pt/[llld]^<>(0.3){MakeArw,stopDrag}_-{[release]}\\ \ar[r]^<{[start]} & *+[F=:<3pt>]\txt{Press\\(*)\\null} \ar[rrr]^-{[press]}_-{Press,startDrag} & & & *+[F:<3pt>]\txt{(Press)\\Release\\MvDetect} \ar[u]^-{[release]}_-{Release} \ar[d]^-{MvDetect}_-{[move]}\\ & & & & *+[F:<3pt>]\txt{(Press)\\Accept\\null} \ar@/^20pt/[lllu]^-{Accept,stopDrag}_{[release]} }\]

因みに、 XyJax のサイトには次のような状態遷移図の例が載っていました。

\[\xymatrix { *\txt{start} \ar[r] & *++[o][F-]{0} \ar@(r,u)[]^b \ar[r]_a & *++[o][F-]{1} \ar[r]^b \ar@(r,d)[]_a & *++[o][F-]{2} \ar[r]^b \ar `dr_l[l] `_ur[l] _(.2)a[l] & *++[o][F=]{3} \ar `ur^l[lll] `^dr[lll]^b [lll] \ar `dr_l[ll] `_ur[ll] [ll] }\]

« FlatTable のアニメーションに球の音を追加 | トップページ | MathJax のプレビュー »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 状態遷移図を描きたい:

« FlatTable のアニメーションに球の音を追加 | トップページ | MathJax のプレビュー »