Jimmy
Jimmy

Reputation: 45

Rotating a border with ManipulationDelta Event UWP

I would like to rotate the border with inertia. Where do I leave something out?

MainPage.xaml:

<Grid>
    <Border x:Name="ManipulationBorder" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Red"/>
</Grid>

MainPage.xaml.cs:

private TransformGroup transforms;
private MatrixTransform previousTransform;
private CompositeTransform deltaTransform;

public MainPage()
{
    this.InitializeComponent();

    InitManipulationTransforms();

    ManipulationBorder.ManipulationDelta += new ManipulationDeltaEventHandler(ManipulateMe_ManipulationDelta);

    ManipulationBorder.ManipulationMode =
        ManipulationModes.TranslateX |
        ManipulationModes.TranslateY |
        ManipulationModes.Rotate |
        ManipulationModes.TranslateInertia |
        ManipulationModes.RotateInertia;
}

private void InitManipulationTransforms()
{
    transforms = new TransformGroup();
    previousTransform = new MatrixTransform() { Matrix = Matrix.Identity };
    deltaTransform = new CompositeTransform();

    transforms.Children.Add(previousTransform);
    transforms.Children.Add(deltaTransform);

    ManipulationBorder.RenderTransform = transforms;
}

private void ManipulateMe_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    previousTransform.Matrix = transforms.Value;

    // Center point for rotation
    Point center = previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y));
    deltaTransform.CenterX = center.X;
    deltaTransform.CenterY = center.Y;

    // Rotation
    deltaTransform.Rotation = e.Delta.Rotation;
}

When I actually go to apply delta rotation in ManipulationDeltaRoutedEventArgs it does not work. Where am I wrong?

Thanks in advance.

Upvotes: 0

Views: 301

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

When I actually go to apply delta rotation in ManipulationDeltaRoutedEventArgs it does not work. Where am I wrong?

The standard touch-based rotation requires two touch points or more:

For single touch rotation you need fix the center of deltaTransform firstly. You need recalculate the Angle has been changed with single touch.

you will know the value of Angle = a1 - a2.

private void Right_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{

    var x = this.RightRotateTransform.CenterX - e.Position.X;
    var y = this.RightRotateTransform.CenterY - e.Position.Y;

    double a1 = Math.Atan(y / x);
    double a2 = Math.Atan((e.Delta.Translation.Y - y) / (x - e.Delta.Translation.X));

    this.RightRotateTransform.Angle += a1 - a2;
}

Upvotes: 1

Related Questions