Search code examples
c#wpfrotationmulti-touchpixelsense

Change rotation point on rotation finger changed


I have a multitouch WPF application and I'd like to do a rotation of some stuff in it. The problem with ManipulationDelta, that ManipulationOrigin always is a center between 2 fingers, but I'd like to rotate with moving finger around fixed one.

Example: Finger1 fixed on screen and Finger2 goes around it, rotation with center in Finger1 point needed. Then Finger2 fixed and Finger1 goes around - now rotation with center in Finger2 point. All that stuff is done between one session of ManipulationStarted and ManipulationCompleted, because fingers is always on screen.

Now I'm trying to calculate vector between old position and new position, and rotate around finger, which position changed for minimum. It works, but not very well.

Any ideas how to get right rotation point at every moment in more nice way?

UPD: Problem of MSDN example (Clemens's code) - rectangle under Finger1 change it's position, while Finger1 was fixed.

Finger1 and Finger2 on fixed on screen. Two finger on screen

Finger2 rotated around Finger1 Finger2 rotated around FInger1

UPD2: If I do rotation around e.Menipulators.First().GetPosition(RotatingControl) everything is OK. Problem, that finger can be changed and I need to know which finger is moving now. It's not a hard problem. But sometimes both fingers rotates - in such case rotation should occurs around ManipulationOrigin


Solution

  • When transforming an object by the values provided by ManipulationDeltaEventArgs, you would usually update a transform matrix. This could be the Matrix property of a MatrixTransform used as RenderTransform as shown below.

    <Rectangle ...>
        <Rectangle.RenderTransform>
            <MatrixTransform x:Name="transform"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    

    This matrix would be updated according to translation, rotation and scaling delta values in a ManipulationDelta event handler like this:

    ManipulationDelta d = e.DeltaManipulation;
    Matrix m = transform.Matrix;
    m.Translate(d.Translation.X, d.Translation.Y);
    m.RotateAt(d.Rotation, e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
    m.ScaleAt(d.Scale.X, d.Scale.Y, e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
    transform.Matrix = m;
    

    This transformation will work perfectly with your fixed and moving fingers, except that it not only rotates, but also moves and scales the object. You could omit the scaling if you drop the m.ScaleAt(...) call and get a transform that is still near to what you want, as long as the distance between the fingers does not vary too much.

    However, there is still the movement, but that is something you can't get rid of. Imagine you first have finger 1 fixed, then rotate by 180°, then fix finger 2 and rotate back again by 180°. Obviously the total rotation is zero, but the object has moved.