+ Canvasでミニツール

$ ミニゲーム関係 > [+ Canvasでミニツール]

箱と矢印

2025-11-16

箱と矢印	動作ページ
ソースファイル	修正済BSDライセンス または X11ライセンス でご自由にお使いください

Javascript と HTML5 canvas のお試しプログラムの一つとして、箱と矢印の描画、矩形領域のクリック判定をやってみました。
ウィンドウシステムのプログラミングでは、ユーザーがマウスでクリックしたときに、一体どのウィンドウを指したのか、判定する処理があります。私はそのようなプログラムを実装したことがなかったので、やってみたかった。

正投影図のとき:
番号が大きなnodeが大きなZ座標を持っています。
Z座標 でソートした状態で、手前の矩形領域から順に「クリック点は領域内か」をチェックしていきます。

斜投影図のとき:
Y座標 でソートした状態で、手前の矩形領域から順に「クリック点は領域内か」をチェックしていきます。

やってみるとわかること:

このプログラムでは視点を2つ、切り替え可能にしています。
それは、描画の見た目は、プログラミング上の「可変性がありえるもの」、別のコトバでは「将来の仕様変更などで変わるかもしれないもの」として扱っている、ということです。さらに別のコトバでは、プログラミングでは、1つのモノと2つのモノは区別する、という話で、見た目は2つのモノとしている、ということです。
それで、プログラマーはなるべく変わらない本質を見抜いて安定的なコードを書きたいので、画面上のクリック座標で判定するのではなく、クリックした座標をモノたちの座標系に変換して、判定してやる。そうすると、(Z順でのソートなのかY順でのソートなのかの違いはあっても)順に領域内か否かを判定していく、というロジックは不変になって、その部分のコードロジックは「安定的」になる、わけですな。

もう少し大きな話:

Web+DBシステムのプログラミングでは "テキストボックス" や "選択リスト" などのGUI部品(ウィジェット)を組み合わせて、アプリケーションを作ります。しかしありきたりなウィジェットと、Wiki風のCMSを組み合わせるだけでは、だれでもできる人月仕事になるだけです。「独自のウィジェット」を作り、応用することを考えることで、案件価値の向上を図りたい。「独自のウィジェット」を作る技術を、少しずつ更新していきたいものです。