silverlightで作るマルチタッチアプリケーション 2
DESCRIPTION
Silverlight でマルチタッチマニピュレーションを実現する方法。 技術ひろば.net 2011年3月 でのセッションを予定していた資料 (3月12日開催予定だったが急遽中止したため未実施)TRANSCRIPT
![Page 2: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/2.jpg)
瀬尾 佳隆 (せお よしたか) ◦ MVP for Visual C# (Jan 2009 – Dec 2011)
◦ 最近は Silverlight と SharePoint がお友達 ◦ でも、とってもよくハマる (泣)
◦ メール ・・・ [email protected] ◦ Blog ・・・ http://yseosoft.wordpress.com/ ◦ Twitter ・・・ http://twitter.com/seosoft ◦ Facebook ・・・ http://www.facebook.com/seosoft
◦ 個人事業主です(屋号は瀬尾ソフト)
2
![Page 3: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/3.jpg)
Silverlight でマルチタッチなアプリケーションを 作る勘所を共有します ◦ Silverlight でのマルチタッチアプリケーション開発で ほんのちょっとだけ苦労する理由
◦ タッチ対応なしからマルチタッチマニピュレーションまで 順を追って進めていきます
◦ 高校時代の数学をちょっとだけ思い出していただきます
Developers Summit 2011 の MVP LT のネタを 具体的なコードの紹介まで踏み込んでみます
3
![Page 4: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/4.jpg)
プロローグ
Step 0 : タッチ対応なし
Step 1 : シングルタッチに対応してみる
Step 2 : マルチタッチ対応の前に
Step 3 : 座標変換クラスを用意する
Step 4 : マルチタッチマニピュレーション
まとめ
4
![Page 5: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/5.jpg)
Silverlight はマルチタッチが ちょっとだけ苦手
5
![Page 6: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/6.jpg)
マルチタッチマニピュレーション ◦ スマートフォンや iPad でお馴染みの 「2本指で画面上のものを回したり拡大したりする」 アレのこと
ということで、本題に戻ります
6
![Page 7: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/7.jpg)
Silverlight ではマルチタッチサポートが少なめ ◦ タッチポイントは取れるが、 マニピュレーションの API は持っていない
ちなみに同じ Silverlight でも Windows Phone 7 は リッチな API を持ってます
7
WM_TOUCH WM_GESTURE Manipulation & Inertia
Win 32 〇 ◎ 〇
Silverlight 〇 × ×
WPF 〇 〇
http://msdn.microsoft.com/ja-jp/ff604678.aspx より
![Page 8: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/8.jpg)
API がないなら自前で座標演算すればいい ◦ タッチポイントは取れるし
◦ Matrix クラスがあるし (これは後述)
やってみると、想像したよりは難しくなかった! ◦ 「簡単だ」とは一言も言ってません
8
![Page 9: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/9.jpg)
タッチイベントは自動的に マウスイベントに昇格される
9
![Page 10: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/10.jpg)
Windows アプリは、シングルタッチの範囲ならば、 何もしなくても “タッチ対応” アプリでもある ◦ マウス操作できることはタッチ操作でもできる
◦ 1点目のタッチは OS 内部でマウスイベントに昇格される
昇格が都合が悪ければ、アプリで止めることもできる
実際、マニピュレーションには昇格は不都合
◦ ただし、マウス操作を前提としたアプリはポイントの領域が 狭いことが多い
タッチ操作できることと、タッチに最適化されているかどうかは 別の話
10
![Page 11: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/11.jpg)
写真を画面上に表示するアプリ ◦ マウス操作、タッチ操作で写真を移動します
◦ 最後には回したり大きくしたりするのが今日のゴール
まずは実装しているのはマウスイベントだけのデモ ◦ タッチでも操作できることを一応確認しておきます
◦ この後のためにソースコードも簡単に見ておきます
11
![Page 12: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/12.jpg)
12
![Page 13: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/13.jpg)
13
![Page 14: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/14.jpg)
積極的にタッチイベントを処理 まずはオブジェクトの移動から
14
![Page 15: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/15.jpg)
タッチ操作の意味は、アプリケーションごとに異なる ◦ フリック操作で、大きな領域の移動やページ移動の意味
◦ 原点の表示位置が固定されたグラフでは、 シングルタッチを拡大率の変更と考えてもよい
◦ シングルタッチ=オブジェクトの移動 が一般的(?)
今回の Step 0 のデモではオブジェクトの移動と 考えるのが自然 ◦ 今回は、「シングルタッチはオブジェクト移動」として続けます
15
![Page 16: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/16.jpg)
1点目のタッチイベントを自前でハンドリング ◦ 自動的にマウスイベントに昇格されるのを止める
◦ コードは定型的
16
![Page 17: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/17.jpg)
OS からのタッチ入力は Static な Touch クラスが受け取る (FrameReported イベント)
マウスイベントへの昇格を止めるには SuspentMousePromotionUntilTouchUp メソッド
タッチポイントは:
◦ プライマリ(1点目のポイント)・・・GetPrimaryTouchPoint
◦ すべてのポイント(プライマリも含む)・・・GetTouchPoints
17
![Page 18: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/18.jpg)
18
![Page 19: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/19.jpg)
Matrix クラスと高校時代の “行列”
19
![Page 20: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/20.jpg)
いよいよ回転と拡大
Silverlight はマニピュレーション用 API を 持っていない(前述)
が、座標変換に使う Matrix クラスがある ◦ これを使ってみましょう
Matrix と言うくらいなので、行列 です ◦ 高校時代の数学でやったアレ
20
![Page 21: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/21.jpg)
System.Windows.Media.Matrix クラス ◦ public Matrix(double m11, double m12,double
m21, double m22, double offsetX, double offsetY)
◦ これを UIElement.RenderTransform.MatrixTransform
に代入します
m11, m22 ・・・ X, Y 方向の拡大率
m12, m21 ・・・ 傾斜
※第3列は (0, 0, 1) 固定なので、
Matrix クラスでは指定しない
(アフィン変換行列)
![Page 22: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/22.jpg)
行列の積
![Page 23: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/23.jpg)
行列の積
例えば、1行1列の値は、 1つめの行列の1行目 と 2つめの行列の1列目 の各要素ごとの積を足したもの
![Page 24: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/24.jpg)
平行移動
拡大(縮小)
回転
こんなものだと思って、覚えて(覚えたふりして)ください
![Page 25: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/25.jpg)
Matrix クラスを実際に利用して 座標変換メソッド群
25
![Page 26: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/26.jpg)
例 ◦ 北東に (約) 1.4km 進むのは、東に 1km、北に 1km 進むのと同じ
◦ 自動車のドリフトは、移動の座標変換と回転の座標変換の 掛け合わせ
回転の行列、拡大の行列、移動の行列を用意して、 順に掛け合わせれば任意の座標変換ができる ◦ 厳密には、任意の「平面上の」座標変換と言うべき(?)
数学的にはこれを満たす行列のことを「アフィン変換行列」と 言うそうです
26
![Page 27: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/27.jpg)
27
A
A’
B
B’
A が A’ に、B が B’ に、それぞれ移動したとする
![Page 28: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/28.jpg)
28
A
A’
B
B’
B に対する A と A’ の角度の差が回転角、 距離の比が拡大率と考える A に対する B と B’ についても同様
![Page 29: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/29.jpg)
29
中心
見た目に似ていても、 どこを中心にするかで座標変換は異なる
![Page 30: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/30.jpg)
Static な座標変換クラス (Manipulation クラス) ◦ メソッドは 5つ
拡大、回転、平行移動、行列の積、点の座標変換
30
![Page 31: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/31.jpg)
31
![Page 32: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/32.jpg)
32
![Page 33: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/33.jpg)
行列の積 ABC の表現、どちらが読みやすい?
◦Multiply(C, Multiply(A, B));
◦A.Multiply(B).Multiply(C);
拡張メソッドを使うと・・・ ◦ public static Matrix Multiply(this Matrix m, …);
本当にちょっとした内容ですみません
33
こう 書ける
![Page 34: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/34.jpg)
34
![Page 35: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/35.jpg)
35
![Page 36: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/36.jpg)
36
![Page 37: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/37.jpg)
座標変換を駆使(?)して オブジェクトを操作する
37
![Page 38: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/38.jpg)
38
![Page 39: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/39.jpg)
39
![Page 40: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/40.jpg)
40
![Page 41: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/41.jpg)
41
![Page 42: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/42.jpg)
42
実は、この部分にはバグがあります。 割り算の分母が 0 になると・・・
今回はコードの単純化のためにあえてこのままで
![Page 43: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/43.jpg)
43
![Page 44: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/44.jpg)
Silverlight はマルチタッチがちょっとだけ苦手
Matrix クラスを使うと、Silverlight でも マルチタッチマニピュレーションを実現できる ◦ MSDN Magazine 2010年3月号で詳しく解説 されています http://msdn.microsoft.com/ja-jp/magazine/ee336121.aspx
ちょっとだけ高校時代の数学の復習が必要かも
44
![Page 45: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/45.jpg)
Silverlight でのマルチタッチ サポートの詳細 ◦ http://msdn.microsoft.com/ja-
jp/magazine/ee336026.aspx
理系なら知っておきたい 数学の基本ノート [線形代数編] ◦ 佐々木 隆宏 著、中経出版
タッチデバイスを持っていないけど試してみたい人 ◦ MultiTouchVista をどうぞ
http://multitouchvista.codeplex.com/
PC にマウスを2個繋げてマルチタッチをエミュレート
名前に Vista と付いていますが、Windows 7 対応
45
![Page 46: Silverlightで作るマルチタッチアプリケーション 2](https://reader033.vdocuments.net/reader033/viewer/2022051817/548e4c40b47959891d8b46bb/html5/thumbnails/46.jpg)
46