6

この投稿から、ピンチおよびズーム機能を実装するためのプラットフォームの改善がいくつかあることがわかりました。この新しいメソッド（ManipulationDeltaEventArgs.PinchManipulation）を使用して、WindowsPhoneのピンチズーム機能を実装する方法を説明します。

これとは別に、画像コントロールにもスクロール機能を実装する必要があります。現在の実装では、スクロールビューアとともにピンチおよびズーム機能にToolkit（ジェスチャリスナー）を使用していますが、スクロールイベントとピンチイベントの両方が重複しているように見えるため、ユーザーエクスペリエンスが低下します。

誰かが私のアプリケーションでこの問題を解決するのを手伝ってくれますか？機能を実現するのに役立つコードサンプルを探しています。

答えとしてマルチタッチ動作（codeplex）を取得することは期待されていません。プロジェクトで使用しているアセンブリはかなり古く、その多くがマーケットプレイスの提出に関する問題に直面していると聞いています。

4

3 に答える 3

28

以前の回答で述べたように、WP8専用アプリを構築している場合は、ピンチおよびズーム効果に新しいManipulationDeltaEventArgs.PinchManipulationを使用できます。ManipulationDeltaEventArgs.PinchManipulationデータを使用して画像を拡大縮小、移動、回転する方法の基本的な例を次に示します。

まず、グリッドの中央にホバリングする基本的な画像を作成します。

<Grid x:Name="ContentPanel">
    <Image Source="Assets\Headset.png" 
           Width="200" Height="150"
           ManipulationDelta="Image_ManipulationDelta"
           x:Name="img"
           >
        <Image.RenderTransform>
            <CompositeTransform CenterX="100" CenterY="75" />
        </Image.RenderTransform>
    </Image>
</Grid>

次に、ManipulationDeltaイベントを処理し、それがピンチマニピュレーションであるかどうかを確認し、UIElementに正しいSilverlight変換を適用します。

private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    if (e.PinchManipulation != null)
    {
        var transform = (CompositeTransform)img.RenderTransform;

        // Scale Manipulation
        transform.ScaleX = e.PinchManipulation.CumulativeScale;
        transform.ScaleY = e.PinchManipulation.CumulativeScale;

        // Translate manipulation
        var originalCenter = e.PinchManipulation.Original.Center;
        var newCenter = e.PinchManipulation.Current.Center;
        transform.TranslateX = newCenter.X - originalCenter.X;
        transform.TranslateY = newCenter.Y - originalCenter.Y;

        // Rotation manipulation
        transform.Rotation = angleBetween2Lines(
            e.PinchManipulation.Current, 
            e.PinchManipulation.Original);

        // end 
        e.Handled = true;
    }
}

// copied from http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
{
    if (line1 != null && line2 != null)
    {
        double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                   line1.PrimaryContact.X - line1.SecondaryContact.X);
        double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                   line2.PrimaryContact.X - line2.SecondaryContact.X);
        return (angle1 - angle2) * 180 / Math.PI;
    }
    else { return 0.0; }
}

これが私たちがしたことです：

  • スケーリング： PinchManipulationは実際にスケーリングを追跡するため、PinchManipulation.CumulativeScaleをスケーリング係数に適用するだけです。
  • 変換： PinchManipulationは、元の中心と新しい中心（2つのタッチポイント間で計算）を追跡します。古い中心から新しい中心を引くことにより、UIElementが移動する必要がある量を判断し、それを変換変換に適用できます。ここでのより良い解決策は、このコードでは行われない累積的な元のセンターを追跡することによって、複数の操作セッションも考慮に入れることに注意してください。
  • 回転： 2つのタッチポイント間の角度を計算し、それを回転変換として適用しました。詳細については、このNokiawikiの記事@ WindowsPhone8マップコントロールのリアルタイムローテーションをご覧ください。

このコードが正常に実行されることを示すいくつかの印刷画面を次に示します。

手つかずの画像 回転、変換、拡大縮小された画像 回転、変換、拡大縮小された画像

于 2012-12-24T23:02:57.257 に答える
4

ピンチからズーム、パンまでをスムーズに行うための完璧なソリューションを見つけました。実際には、次のリンクにある Microsoft コードのサンプルです http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

定型コードとして使用しただけで、驚くほど機能しました。

乾杯

于 2013-05-17T00:39:53.120 に答える
-2

自分でロールする場合は、Silverlightでのピンチズームに関するこの記事を確認してください。Silverlightでのピンチズームの正しい実装

Telerikには、すぐに使用できるパンとズームの画像コントロールもありますが、費用がかかります。Telerikのパンとズームコントロール

于 2012-12-21T06:02:19.070 に答える