箱と矢印

  |     |  


概要:
Javascript と HTML5 canvas のお試しプログラムの一つとして、箱と矢印の描画、矩形領域のクリック判定をやってみました。

画面操作の説明:

• [正投影図]or[斜投影図]ボタンを押下すると、真上or斜め から見た図になります。
  
• [run]ボタンを押下すると、矩形領域(ノード)の位置が変わります。[stop]で止まります。
  
• [位置reset]ボタンを押下すると、矩形領域が初期位置に戻ります。
  
• 矩形領域をクリックすると、マウス座標から、どの矩形領域をクリックしたのかを判定し、テキストボックスにノード名を出力します。
  

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

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

KURUMA Keizo:2025

ミニゲーム関係 へ戻る /wiki/ へ戻る