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 プロパティ

初期化コードは定型的

オブジェクトの移動

Ｘ方向、Ｙ方向の移動量を CompositeTransform.TranslateX / Y に代入

前回の Delta イベントからの移動量は e.Delta.Translate に入っています

タッチ開始後の変化総量は e.Cumulative に入っています

オブジェクトの拡大・縮小

Ｘ方向、Ｙ方向の拡大率を CompositeTransform.ScaleX / 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