グラフィックの扱い方(自前ドラッグ)


 今回はFAQだと思いますが、GUI環境で使える便利なテクニックです。
 
 ドロー系ツールなどのグラフィックを扱うソフトでは、オブジェクトのサイズ変更や動かしたりする操作が必要です。
 一応、VBではドラッグ&ドロップのイベントをコーディングすればそれなりの機能は実現できますが、見た目がいまいちカッコよくないですね。
 今回は、グラフィックオブジェクトをカッコよく操作する手法について解説します。

 今回の講座のサンプルは、 ここを押すとダウンロード できます。



 フォーム上に並んでいる3つのオブジェクトをマウスで摘んで、自由に動かすことができます。
 ただそれだけの機能ですが、簡単なプログラムで応用範囲も広いテクニックですので、是非習得して下さい。


'ドラッギングフラグ
Dim Drg As Boolean
'位置情報
Dim DrX As Single, DrY As Single

変数をパブリックに宣言しているのは、ドラッギングの操作が複数のイベントにまたがって処理しているためです。


Private Sub Pic_MouseDown(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
 If Button = 1 Then
  If Drg = False Then
   Drg = True
   DrX = X: DrY = Y
   Pic(Index).ZOrder 0
  End If
 End If
End Sub

マウスダウン(左ボタン)でドラッギングのフラグをオンにして移動を開始させます。
そのときに、マウスのX,Y位置を格納しておくのも重要です。
Zoerderを0にしているのは、移動の最中に外のオブジェクトの下に隠れてしまわないようにするためです。


Private Sub Pic_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)

 Dim XX As Single, YY As Single
 If Button = 1 Then
  If Drg Then
   XX = Pic(Index).Left + X - DrX
   YY = Pic(Index).Top + Y - DrY
   Pic(Index).Move XX, YY
  End If
 End If
End Sub

ここの処理は、マウス左ボタンが押されていてドラッギングフラグがオンの時にだけ通るようにします。(フラグDrgはそのためのスイッチです)
XX,YYの位置計算はオブジェクトの移動をスムーズにするためのもので、次のように計算します。
 位置 = フォーム上のオブジェクトの位置
     + オブジェクト上でマウスが動いた距離
     − オブジェクト上でマウスが最初に押された位置
これで、オブジェクトがマウスに付いてくるように移動されます。


Private Sub Pic_MouseUp(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
 Drg = False
End Sub

マウスアップ時の処理は、フラグをオフにするだけです。
ちょうどマウスを離した位置にオブジェクトが置かれます。
最後に、上記3つのイベントプロシージャに共通のパラメータの解説をします。

ボタンやシフトキーのステータスを組み合わせると操作のバリエーションを増やす事ができます。 
また、オブジェクトをコントロール配列にすることでプログラム上の扱いも簡潔になりますね。(詳しくは、Chap.3 コントロール配列を使う を参照して下さい)


最後に
 Windowsのプログラミングの本でお約束のように取り上げられる例題は、
  ・テキストエディタ
  ・住所録
  ・ペイントソフト
 などなどです。しかし、MS-WORDに付いてくるドローツールの類はあまり取り上げられません。それは、上記のプログラムに対して見た目が地味である上、標準の機能では実現が難しい(と思われている?)からなのかも知れません。
 しかし、このテクニックは非常に応用範囲が広く、ユーザーフレンドリーなインターフェイスを構築するためには有効な手法だと思います。
 この「VBステップアップ講座」では、一般にはあまり触れられないような(しかし簡単に実現できてプログラミングの幅が広がるような)テクニックについて、今後も取り上げたいと思います。リクエスト等ありましたら、メールをお送り下さい。

目次に戻る