Download - WinRT のマルチタッチマニピュレーション
WinRT のマルチタッチ マニピュレーション
瀬尾佳隆 (@seosoft) Microsoft MVP for Visual C#
技術ひろば.net 勉強会 2012年10月
自己紹介
瀬尾 佳隆 (せお よしたか)
MVP for Visual C# (Jan 2009 – Dec 2012)
マルチタッチ好き
Silverlight でも力技の “マルチタッチ” ネタやりました (決して詳しいわけではないんですが :-P)
ブログ・・・http://yseosoft.wordpress.com/
Twitter ・・・@seosoft
劇団四季とディズニーリゾートと AKB48 が好き
アジェンダ
タッチで描画
指とマウスとの違い(サイズ以外で)
マルチタッチでオブジェクト操作
まとめ
本日の結論
WinRT のマルチタッチマニピュレーションは とっても簡単
ほぼ定型的なコードで実現できます
深追いはしないほうがいいと思います
線形代数が好き!ならば止めませんが :-P
タッチで描画
ポインティングデバイスの位置づけ
WinRT
マウスは “ポインティングデバイスの一つ” という位置づけ
デバイス種類はイベント引数で判別できます
デスクトップ / Silverlight
“タッチも使えます” という位置づけ
タッチイベントは自動的にマウスイベントに昇格
専用のタッチイベント (WPF) や タッチクラス (SL)
PointerXXX イベント
タッチもマウスも PointerXXX イベント
MouseXXX はありません
Up / Down ではなく Pressed / Released
Pointer. PointerDeviceType で取得できます
ポインター判別(どの指のイベント?)
どのポインター(=指)のイベントなのかは PointerId で識別できます
Pressed から Released まで同じ ID (uint 型) で イベント発行されます
Dictionary で管理するといいでしょう
シングル/マルチタッチの判別
e.Cumulative.Scale == 1.0 ならばシングルタッチ、 そうでなければマルチタッチ
タッチ描画の例 (1/2)
タッチ描画の例 (2/2)
指とマウスとの違い(サイズ以外にも)
指先は “変形” する
指とマウスとの違いは、領域のサイズだけ ではありません
スクリーンとの摩擦で、指先は “変形” します
滑らかに移動したつもりでも、ギザギザ
InkManager でベジェ曲線に変換
ベジェ曲線に変換すれば滑らかな曲線に
InkManager を使えば簡単に BezierSegment (ベジェ曲線の要素) が作れます
ただしリアルタイムに描画するのはできません
変換した線は PoiterReleased のタイミングで描画
ベジェ曲線への変換の例 (1/3)
ベジェ曲線への変換の例 (2/3)
ベジェ曲線への変換の例 (3/3)
InkStrokeRenderingSegment を BezierSegment に変換
マルチタッチでオブジェクト操作
WinRT ではオブジェクト操作が簡単
オブジェクトを移動、拡大・縮小、回転
ManipulationDelta イベント
前回のイベントからの Delta 値が得られます
Delta 値 = 移動、拡大率、回転角の値
CompositeTransform クラス
座標変換はメソッドではなくてプロパティで指定
オブジェクトの RenderTransform プロパティ
初期化コードは定型的
オブジェクトの移動
X方向、Y方向の移動量を CompositeTransform.TranslateX / Y に代入
前回の Delta イベントからの移動量は e.Delta.Translate に入っています
タッチ開始後の変化総量は e.Cumulative に入っています
オブジェクトの拡大・縮小
X方向、Y方向の拡大率を CompositeTransform.ScaleX / Y に代入
X方向、Y方向それぞれに指定します
中心点(原点)の指定が大事
オブジェクトの回転
回転角を CompositeTransform.Rotation に代入
これも原点(中心点)の指定が大事
中心点は大事
中心
見た目に似ていても、 どこを中心にするかで座標変換は異なる
移動、拡大、回転の組み合わせ
何も考えずに CompositeTransform の それぞれのプロパティに値を代入するだけ
座標変換は任意の座標変換の組み合わせ
東に 0.5m、北に 1m、東に 0.5m 進むのと 北東に 1.4m 進むのとは結果は同じ
ちゃんとした議論をしたい方は線形代数の 参考書をどうぞ
まとめと参考
ちゃんとした議論をしたい方のために
はい、どうぞ!
http://bit.ly/SLTouch2
本日の結論
WinRT のマルチタッチマニピュレーションは とっても簡単
ほぼ定型的なコードで実現できます
深追いはしないほうがいいと思います
線形代数が好き!ならば止めませんが :-P
参考
MSDN:ストアアプリドキュメント
クイック スタート: タッチ入力
http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh465387.aspx
瀬尾の過去のセッション資料
Silverlight で作るマルチタッチアプリケーション
http://bit.ly/SLTouch
http://bit.ly/SLTouch2