Widget Demo 解体新書：フロアプラン

キャンバスに表示したアイテムの順序の切り替えとポインタ位置に対応した処理で実現します．

ここでの処理は大きく次の２つに分かれます：

重なり合ったフロアの表示をポインタ操作により切替える
ポインタの位置に応じて部屋のハイライト表示を切替える

とこれだけです．ぱっと見は派手で凝っていそうな感じのデモですが，処理は単純です．

フロア表示切替え

フロア表示の切替えから見ていきましょう．まず，キャンバスを用意します．

set c [canvas .c -width 250 -height 200]
pack $c -expand yes -fill both

このキャンバスにフロア３つ分のアイテムを作成します．データ型は polygon としデータは図形エディタで適当に作成しました．

$c create polygon 0 88 0 14 14 14 14 0 73 0 73 14 147 14 147 88 118 88 118 103 \
    29 103 29 88 -fill {#ffbebe} -tags floor1
$c create polygon 0 85 0 29 29 29 29 0 73 0 73 14 147 14 147 73 73 73 73 88 \
    -fill {#ffdede} -tags floor2
$c create polygon 14 29 73 29 73 14 118 14 118 73 14 73 \
    -fill {#ffbede} -tags floor3

そして，見やすいように１階と２階のアイテムをずらします．ずらさない場合と表示がどのように変わるか確認してみて下さい．

$c move floor1 1c 1c
$c move floor2 .5c .5c

フロア表示の切替えは個々のアイテムが押されたときにそれを最上部に表示させることで行ないます．キャンバス中のアイテムへのバインドで実現します．

$c bind floor1 <1> "$c raise floor1"
$c bind floor2 <1> "$c raise floor2"
$c bind floor3 <1> "$c raise floor3"

表示切替えは基本的には以上です．実際のデモでは表示切替えのたびにすべてのアイテムを削除後したあとで，上部に表示するフロアの壁の線や部屋ナンバーの文字を含め書き直しています．

実行例

ポインタ位置の部屋をハイライト表示

（執筆中）

おまけ

キャンバス上で Button-2 をドラッグすると表示フロア全体が移動するようにします．このとき -scrollregion オプションを使ってスクロール領域を制限しています．領域幅はキャンバス幅とします．この制限のある場合とない場合の違いを実行して試して下さい．

$c config -scrollregion [$c bbox all]
bind $c <2> "$c scan mark %x %y"
bind $c <B2-Motion> "$c scan dragto %x %y"

[2000/11/13]