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