技術ひろば.net 勉強会2012年10月 (10月27日開催) セッション資料

1. WinRT のマルチタッチ
マニピュレーション
瀬尾佳隆 (@seosoft)
Microsoft MVP for Visual C#
技術ひろば.net 勉強会 2012年10月

2. 自己紹介
瀬尾 佳隆 （せお よしたか）
MVP for Visual C# (Jan 2009 – Dec 2012)
マルチタッチ好き
Silverlight でも力技の “マルチタッチ” ネタやりました
（決して詳しいわけではないんですが :-P）
ブログ・・・http://yseosoft.wordpress.com/
Twitter ・・・@seosoft
劇団四季とディズニーリゾートと AKB48 が好き

3. アジェンダ
タッチで描画
指とマウスとの違い（サイズ以外で）
マルチタッチでオブジェクト操作
まとめ

4. 本日の結論
WinRT のマルチタッチマニピュレーションは
とっても簡単
ほぼ定型的なコードで実現できます
深追いはしないほうがいいと思います
線形代数が好き！ならば止めませんが :-P

5. タッチで描画

6. ポインティングデバイスの位置づけ
WinRT
マウスは “ポインティングデバイスの一つ”
という位置づけ
デバイス種類はイベント引数で判別できます
デスクトップ / Silverlight
“タッチも使えます” という位置づけ
タッチイベントは自動的にマウスイベントに昇格
専用のタッチイベント (WPF) や タッチクラス (SL)

7. PointerXXX イベント
タッチもマウスも PointerXXX イベント
MouseXXX はありません
Up / Down ではなく
Pressed / Released
Pointer. PointerDeviceType
で取得できます

8. ポインター判別（どの指のイベント？）
どのポインター（＝指）のイベントなのかは
PointerId で識別できます
Pressed から Released まで同じ ID (uint 型) で
イベント発行されます
Dictionary で管理するといいでしょう

9. シングル／マルチタッチの判別
e.Cumulative.Scale == 1.0
ならばシングルタッチ、
そうでなければマルチタッチ

10. タッチ描画の例 (1/2)

11. タッチ描画の例 (2/2)

12. 指とマウスとの違い（サイズ以外にも）

13. 指先は “変形” する
指とマウスとの違いは、領域のサイズだけ
ではありません
スクリーンとの摩擦で、指先は “変形” します
滑らかに移動したつもりでも、ギザギザ

14. InkManager でベジェ曲線に変換
ベジェ曲線に変換すれば滑らかな曲線に
InkManager を使えば簡単に
BezierSegment (ベジェ曲線の要素) が作れます
ただしリアルタイムに描画するのはできません
変換した線は PoiterReleased のタイミングで描画

15. ベジェ曲線への変換の例 (1/3)

16. ベジェ曲線への変換の例 (2/3)

17. ベジェ曲線への変換の例 (3/3)
InkStrokeRenderingSegment を BezierSegment に変換

18. マルチタッチでオブジェクト操作

19. WinRT ではオブジェクト操作が簡単
オブジェクトを移動、拡大・縮小、回転
ManipulationDelta イベント
前回のイベントからの Delta 値が得られます
Delta 値 = 移動、拡大率、回転角の値
CompositeTransform クラス
座標変換はメソッドではなくてプロパティで指定
オブジェクトの RenderTransform プロパティ

20. 初期化コードは定型的

21. オブジェクトの移動
Ｘ方向、Ｙ方向の移動量を
CompositeTransform.TranslateX / Y に代入
前回の Delta イベントからの移動量は
e.Delta.Translate に入っています
タッチ開始後の変化総量は
e.Cumulative に入っています

22. オブジェクトの拡大・縮小
Ｘ方向、Ｙ方向の拡大率を
CompositeTransform.ScaleX / Y に代入
Ｘ方向、Ｙ方向それぞれに指定します
中心点（原点）の指定が大事

23. オブジェクトの回転
回転角を
CompositeTransform.Rotation に代入
これも原点（中心点）の指定が大事

24. 中心点は大事
中心
見た目に似ていても、
どこを中心にするかで座標変換は異なる

25. 移動、拡大、回転の組み合わせ
何も考えずに CompositeTransform の
それぞれのプロパティに値を代入するだけ
座標変換は任意の座標変換の組み合わせ
東に 0.5m、北に 1m、東に 0.5m 進むのと
北東に 1.4m 進むのとは結果は同じ
ちゃんとした議論をしたい方は線形代数の
参考書をどうぞ

26. まとめと参考

27. ちゃんとした議論をしたい方のために
はい、どうぞ！
http://bit.ly/SLTouch2

28. 本日の結論
WinRT のマルチタッチマニピュレーションは
とっても簡単
ほぼ定型的なコードで実現できます
深追いはしないほうがいいと思います
線形代数が好き！ならば止めませんが :-P

29. 参考
MSDN：ストアアプリドキュメント
クイック スタート: タッチ入力
http://msdn.microsoft.com/ja-
jp/library/windows/apps/xaml/hh465387.aspx
瀬尾の過去のセッション資料
Silverlight で作るマルチタッチアプリケーション
http://bit.ly/SLTouch
http://bit.ly/SLTouch2