ドラッグ&ドロップ (Drag and Drop)

4月 28, 2009

説明:

QC にはUI (User Interface) 用のPatch がありません。ボタンなどが必要な場合は、 Xcode & Interface Builder を使って、Cocoa アプリケーションとして仕上げるのが、本来の使い方になります。

本blog はUI の勉強を兼ねて、QC のPatch を組み合わせて、UI 部品を作っていくことにします。手始めにDrag & Drop を実装します。

動作:

・画像をDrag & Drop することができます。(Mode 1 以外)

・カーソル(↑)キー でモードを切り替え

見所:

Mode 1 はマウスに合わせて画像が動きます。Drag & Drop ではありません。

Mode 2 はマウスをクリックしている間のみ、マウスに合わせて動きます。簡易Drag & Drop です。

Mode 3 はマウスをクリックした場所と、画像との距離を保ったまま、動きます。

Mode 4 は画像の上でクリックしたのみ、Mode 3 の動作をします。

解説:

UI は領域判定や、クリックの順序など、細かい挙動を詰めていくほど、自然な動きになります。例えば、Mode 3 では画像の外でクリックしても、Drag & Drop できてしまいます。

Mode 4 では領域上でドラッグを「開始」したかどうかを判定しています。「領域上にいるか」だけの判定だけでは、画像の外でドラッグを開始し、画像の上にカーソルが来た場合、画像を押してしまいます。

オブジェクトが1つの場合はこれで完成ですが、複数のオブジェクトが有る場合は、それぞれの重なりを判定する必要があります。また、画像の透明部分を判定すると、より自然になります。

判定部分をJavascript で書けばもう少し簡単になると思うので、UI 部品シリーズは次回からJavascript Patchを使う予定です。

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

option -クリックで QTZ をダウンロード(ブラウザ内では動作しません)

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。