Windows タッチ&ジェスチャ研究室 Vol.02 ～Silverlightでのストレッチ/ピンチ～
前回の記事で、Sliverlightでマルチタッチを実装するには、Touchクラスを使用することを説明しました。
Touchクラスは、タッチされた座標等の生のデータを取得するクラスなので、ジェスチャーに対応したアプリを開発するには、生のデータを加工する必要があります。
今回は、Silverlightで2本の指を使用したストレッチ(2本の指の間隔を広げて拡大する)と、ピンチ(2本の指の間隔を狭めて縮小する)のサンプル アプリケーションを紹介します。
充分なテストをしている訳ではありませんので、実装時に参考する程度にしてください。
=======================
public partial class MainPage : UserControl
{
private Point FirstFingerOrigin = new Point();
private Point FirstFingerStart = new Point();
private Point FirstFingerEnd = new Point();
private Point FirstFingerFinish = new Point();
private int FirstFingerID = -1;
private Point SecondFingerOrigin = new Point();
private Point SecondFingerStart = new Point();
private Point SecondFingerEnd = new Point();
private Point SecondFingerFinish = new Point();
private int SecondFingerID = -1;
private Point FirstFingerTranslation = new Point();
private Point SecondFingerTranslation = new Point();
private Point Scale = new Point();
private double TotalScale;
public MainPage()
{
InitializeComponent();
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
}
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
TouchPointCollection touchPoints = e.GetTouchPoints(null);
foreach (var touchPoint in touchPoints)
{
switch (touchPoint.Action)
{
case TouchAction.Down:
if (FirstFingerID == -1)
{
// 最初のタッチのID
FirstFingerID = touchPoint.TouchDevice.Id;
FirstFingerOrigin = touchPoint.Position;
FirstFingerStart = FirstFingerOrigin;
FirstFingerTranslation.X = 0;
FirstFingerTranslation.Y = 0;
}
else if (SecondFingerID == -1)
{
// 2番めのタッチのID
SecondFingerID = touchPoint.TouchDevice.Id;
SecondFingerOrigin = touchPoint.Position;
SecondFingerStart = SecondFingerOrigin;
SecondFingerTranslation.X = 0;
SecondFingerTranslation.Y = 0;
}
break;
case TouchAction.Move:
if (FirstFingerID == touchPoint.TouchDevice.Id)
{
FirstFingerEnd = touchPoint.Position;
// 指が移動しているときに何かするときは、ここに実装する
FirstFingerStart = FirstFingerEnd;
}
else if (SecondFingerID == touchPoint.TouchDevice.Id)
{
SecondFingerEnd = touchPoint.Position;
// 指が移動しているときに何かするときは、ここに実装する
SecondFingerStart = SecondFingerEnd;
}
break;
case TouchAction.Up:
if (FirstFingerID == touchPoint.TouchDevice.Id)
{
FirstFingerFinish = touchPoint.Position;
FirstFingerTranslation.X =
FirstFingerFinish.X - FirstFingerOrigin.X;
FirstFingerTranslation.Y =
FirstFingerFinish.Y - FirstFingerOrigin.Y;
FirstFingerID = -1;
}
else if (SecondFingerID == touchPoint.TouchDevice.Id)
{
SecondFingerFinish = touchPoint.Position;
SecondFingerTranslation.X =
SecondFingerFinish.X - SecondFingerOrigin.X;
SecondFingerTranslation.Y =
SecondFingerFinish.Y - SecondFingerOrigin.Y;
SecondFingerID = -1;
}
// 1つめの指、2つめの指の両方が動いていたとき
if ((FirstFingerTranslation.X != 0 ||
FirstFingerTranslation.Y != 0) &&
(SecondFingerTranslation.X != 0 ||
SecondFingerTranslation.Y != 0))
{
Point originDistance = new Point();
Point finishDistance = new Point();
// タッチしたときの2つの指の距離
originDistance.X =
SecondFingerOrigin.X - FirstFingerOrigin.X;
originDistance.Y =
SecondFingerOrigin.Y - FirstFingerOrigin.Y;
// 離したときの2つの指の距離
finishDistance.X =
SecondFingerFinish.X - FirstFingerFinish.X;
finishDistance.Y =
SecondFingerFinish.Y - FirstFingerFinish.Y;
// 縮小率または拡大率
Scale.X = finishDistance.X / originDistance.X;
Scale.Y = finishDistance.Y / originDistance.Y;
// 三平方の定理を使い、距離を計算
double distance1, distance2;
distance1 = Math.Sqrt(Math.Pow(originDistance.X, 2) +
Math.Pow(originDistance.Y, 2));
distance2 = Math.Sqrt(Math.Pow(finishDistance.X, 2) +
Math.Pow(finishDistance.Y, 2));
TotalScale = distance2 / distance1;
}
// 結果を表示させるためのプログラム
// テキストボックスを3つ貼り付け、そこに情報を表示している
textBlock1.Text = Scale.X.ToString();
textBlock2.Text = Scale.Y.ToString();
textBlock3.Text = TotalScale.ToString();
break;
}
}
}
}
=======================
このプログラムを試すときは、まずTextBlockコントロールを3つ貼り付け、そしてMainPageクラスを上記のプログラムで書き換えてください。
結論としては、TotalScaleというフィールドに、拡大率(または縮小率)が入ります。1より大きい場合は拡大、1より小さい場合は縮小です。
単純に、ストレッチがピンチかを検知する場合は、TotalScaleのみを使えば検知できます。
水平方向または垂直方向の拡大率を使いたい場合は、Scale.XまたはScale.Yをご使用ください。
このプログラムでは、画面をタッチしたときのイベント発生時の、Down、Move、Upのそれぞれの処理を行っています。
指を動かしている最中にも画面の拡大/縮小を反映させたいときは、Moveの処置を行っているときに実装します。
主なフィールドの説明は、以下のとおりです。
FirstFingerOrigin : 最初の指がタッチしたときの座標
FirstFingerStart : 前回のMoveが呼ばれた時の座標 (Moveの処理を行うときに使用)
FirstFingerEnd : Moveが呼ばれたときの座標 (Moveの処理を行うときに使用)
FirstFingerFinish : 最初の指が離れたときの座標
Secondで始まるフィールドは、2本目にタッチした指に関する情報です。
Silverlightでも、Windows Phone 7の場合は、同じ機能をもったManipulationという機能がありますので、そちらをご使用ください。
[Windows タッチ&ジェスチャ研究室]
Vol.01 ～Silverlightのマルチタッチ検出～
マイクロソフト
田中達彦