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