0

画面の起動時に、ランタイムプロセス中の背景画像の画像ズームと、Windows Phone 8アプリ開発中の画像アニメーションが必要です

4

1 に答える 1

2

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

<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 を適用するだけで済みます。
  • Transform: PinchManipulation は、元の中心と新しい中心 (2 つのタッチ ポイント間で計算) を追跡します。古い中心から新しい中心を差し引くことで、UIElement がどれだけ移動する必要があるかを判断し、それを変換変換に適用できます。ここでのより良い解決策は、このコードでは行われない累積的な元の中心を追跡することにより、複数の操作セッションも考慮することに注意してください。
  • 回転: 2 つのタッチ ポイント間の角度を計算し、回転変換として適用しました。
于 2015-08-11T14:06:17.030 に答える