Windowsフォームのインク機能①
2013年12月19日
今回から、Windowsフォームのインク機能を紹介します。
Windowsフォームでは、InkPictureとInkEditという2つのコントロールを利用します。
InkEdit : 手書きの文字を認識してテキストボックスに表示するコントロール
InkPicture : 手書きのインクを表示するコントロール
こちらも、以前のWPFと同様に環境の構築から行う必要があります。
1. 「Windows SDK for Vista」のインストール
前回のBlog エントリで紹介した「Windows SDK for Vista」を使用します。
「Windows SDK for Vista」がインストールされていない場合は、以下のサイトからダウンロードし、インストールします。
「Windows SDK for Vista」に付属する「Microsoft.Ink.dll」を利用してインクの機能を実装していきます。
http://www.microsoft.com/ja-jp/download/details.aspx?id=30950
※ Windows SDK for Windows 7 でもMicrosoft.Ink.dll はインストールされますが、GAC に登録される点をご注意下さい。
2. プロジェクトの作成
Visual Studioを起動し、プロジェクトを作成します。
今回はWindowsフォームのC#で進めていきます。
3. ツールボックスへのコントロール追加
デフォルトの状態では、ツールボックスにはInkEditとInkPictureは表示されていませんので、ツールボックスのアイテムの選択からコントロールを追加します。
「.NET Framework コンポーネント」タブの参照から直接、Microsoft.Ink.dllというDLLを参照してコントロールを追加します。
私の環境では、以下のパスにありました。
C:\Program Files\Reference Assemblies\Microsoft\Tablet PC\v1.7
参照すると、InkEditとInkPictureが選択された状態で一覧に追加されます。
ダイアログの「OK」を選択し、ツールボックスへのアイテム追加を完了すると、ツールボックス上にInkEditとInkPictureが表示されます。
4. InkEditとInkPictureの配置
ウインドウ上にInkEditとInkPictureを設置します。
InkPictureは、背景がウインドウの背景と同じ色でわかりにくいので、ボーダーと背景色を設定しています。
以上で、InkEditとInkPictureの設置が終わりました。
実際にアプリケーションを実行してみましょう。
InkEditはコントロール上に文字を書くと、テキストボックス上に文字が表示されます。
InkPictureは、自由に線を書くことができます。
2つのコントロールは、筆圧に対応しています。
筆圧に対応したワコムのペンタブレットを使用すれば、筆圧によって線の太さが変わります。
5. モード切り替えのボタン追加
次に、InkPictureのモードを紹介します。
InkPictureはモードを切り替えることで、線を削除や選択を行うことができます。
Ink | 初期はこのモードに設定されています。 線の描画を行います。 |
Delete | ペンが選択した線を削除します。 |
Select | ペンが選択した線を拡大縮小・移動することができます。 |
ウインドウ上に以下のようにボタンを配置し、クリックイベントを追加します。
クリックイベント内では、InkPictureのEditingModeを設定します。
// Inkボタンのクリック private void inkButton_Click(object sender, EventArgs e) { inkPicture1.EditingMode = Microsoft.Ink.InkOverlayEditingMode.Ink; } // Deleteボタンのクリック private void deleteButton_Click(object sender, EventArgs e) { inkPicture1.EditingMode = Microsoft.Ink.InkOverlayEditingMode.Delete; } // Selectボタンのクリック private void selectButton_Click(object sender, EventArgs e) { inkPicture1.EditingMode = Microsoft.Ink.InkOverlayEditingMode.Select; }
実際にアプリケーションを実行してみると、Deleteでは線の削除ができ、Selectでは選択した線の拡縮や移動ができるようになっているかと思います。
サンプルソースはこちらにアップしてありますので、興味のある方は実際に試して頂ければと思います。
次回は、InkEditとInkPictureのデータ保存について紹介します。