14

ManipulationDeltaイベントとManipulationStartedイベント(画像コントロール上)に接続することで、ピンチズームとパンを実装することができました。

    private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        var transform = (CompositeTransform)image.RenderTransform;

        // pan
        transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X;
        transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y;

        // zoom
        if (e.PinchManipulation != null)
        {
            transform.CenterX = e.PinchManipulation.Original.Center.X;
            transform.CenterY = e.PinchManipulation.Original.Center.Y;

            transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale;
            transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale;
        }
    }

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
        // the user has started manipulating the screen, set starting points
        var transform = (CompositeTransform)image.RenderTransform;
        _scaleX = transform.ScaleX;
        _scaleY = transform.ScaleY;
        _translationX = transform.TranslateX;
        _translationY = transform.TranslateY;
    }

しかし、他のWindows Phone UIの滑らかさに比べると、非常に穏やかで硬い感じがします。ムーブメントに慣性はありません。

動きをよりスムーズにする方法はありますか?アニメーションやストーリーボードを使用する方法はありますか?少なくともスムーズなパンを実現するためにScrollViewを使用しようとしましたが、ManipulationDeltaイベントが正しく発生しません。

4

3 に答える 3

6

私はこれを数学的な観点から正しく理解したかったのです。結果は、TelerikのPanAndZoomImageと正確に似たものになります。興味がない場合は、この要点に直接ジャンプしてください(WP7.1 +で動作します)。System.Windows.InteractivityとWindowsPhoneツールキットを参照する必要があります。

使用法:

<Image Source="http://i.imgur.com/ZbKlRzK.jpg">
    <i:Interaction.Behaviors>
        <phoneApp1:PanAndZoomBehavior MaxZoom="10" />
    </i:Interaction.Behaviors>
</Image>

算数

パンとズームは、CompositeTransformの4つの変換のうち2つ、つまり変換とスケーリングを使用します。重要なポイントは、これらのscale+translate変換のうちの2つを構成する方法を理解することです。入力や読み取りの負担が少ないため、ハスケルリッシュ表記を使用します。私たちの「プリミティブ」は

  1. scale s= x方向に係数sx、y方向にsyを使用して(sx、sy)をスケーリングします
  2. translate t=すべてのポイントをx方向にtx、y方向にtyだけオフセットします

CompositeTransformは、次のように表される中心点を中心にスケーリングします。

scaleAround c s = translate c . scale s . translate -c

次のルールが適用されます(私を信じていない場合は、すべての演算子がコンポーネントごとに計算されます)。

  1. translate a . translate b = translate (a+b)
  2. scale a . scale b = scale (a*b)
  3. translate t . scale s = scale s . translate (t/s)

CompositeTransformは次のようなものです

transform s c t = translate t . scaleAround c s
                = translate (t+c) . scale s . translate -c

これらの変換のうちの2つを構成するときは、上記のような形式になるまでプリミティブを移動する必要があります。これらの2つのCompositeTransformsになりaましょう。bしたがって、次のようになります。

transform' = b . a
           = translate bt . scaleAround bc bs . translate at . scaleAround ac as
           = translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac
           = translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac
           = translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac
           = translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac
           = translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs)
           = translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs)

これは、特定の人々が特定のことを行う理由に関する膨大な量のドキュメントに不満を感じたからです。

実際の構成コードについては、こちらをご覧ください

于 2013-10-17T23:35:28.860 に答える
5

あなたが8について話していることは知っていますが、7に関連する記事へのリンクを投稿しますが、Windows Phoneで遊んでいるときに非常に便利だったので、次のようにします。

https://www.wintellect.com/building-touch-interfaces-for-windows-phones-part-3/

それ以来、それほど変わっとは思いません...

于 2013-02-25T22:55:58.340 に答える
1

私はそれが遅い答えであることを知っていますが、この問題を解決するのに役立つ可能性のある別のサンプルプロジェクトがあります http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7

于 2014-04-15T07:28:39.193 に答える