Calculating positions from Manipulation events in c#

Question

I've created one helper app to demonstrate my problem.

I've a rectangle which is filled with an image brush, this brush can be transformed within the rectangle using gesture manipulations.

I'm determining the position of top left corner of the image from the top left corner of the rectangle. I'm getting correct values while (only) translating the image but getting wrong values while using pinch gestures. If you zoom in too much and translate the image, then brush moves in opposite direction.

Below is how you can reproduce my problem with the helper app attached below: Run the app, get the top left corners of both image and rectangle together by just moving(without pinching) the image until you get the position value as (0,0). Next Pinch and move the image and get back the top left corners together, now you can see that value is not (0,0).

Download here

Here is my Manipulation Delta Event:

public virtual void Brush_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        if (e.PinchManipulation != null)
        {
            // Rotate
            _currentAngle = previousAngle + AngleOf(e.PinchManipulation.Original) - AngleOf(e.PinchManipulation.Current);

            // Scale
            _currentScale *= e.PinchManipulation.DeltaScale;

            // Translate according to pinch center
            double deltaX = (e.PinchManipulation.Current.SecondaryContact.X + e.PinchManipulation.Current.PrimaryContact.X) / 2 -
                (e.PinchManipulation.Original.SecondaryContact.X + e.PinchManipulation.Original.PrimaryContact.X) / 2;

            double deltaY = (e.PinchManipulation.Current.SecondaryContact.Y + e.PinchManipulation.Current.PrimaryContact.Y) / 2 -
                (e.PinchManipulation.Original.SecondaryContact.Y + e.PinchManipulation.Original.PrimaryContact.Y) / 2;

            _currentPos.X = previousPos.X + deltaX;
            _currentPos.Y = previousPos.Y + deltaY;
        }
        else
        {
            // Translate

            previousAngle = _currentAngle;
            _currentPos.X += e.DeltaManipulation.Translation.X;
            _currentPos.Y += e.DeltaManipulation.Translation.Y;
            previousPos.X = _currentPos.X;
            previousPos.Y = _currentPos.Y;
        }

        e.Handled = true;

        ProcesstTransform();
    }

    void ProcesstTransform()
    {
        CompositeTransform gestureTransform = new CompositeTransform();

        gestureTransform.CenterX = _currentPos.X;
        gestureTransform.CenterY = _currentPos.Y;

        gestureTransform.TranslateX = _currentPos.X - outputSize.Width / 2.0;
        gestureTransform.TranslateY = _currentPos.Y - outputSize.Height / 2.0;

        gestureTransform.Rotation = _currentAngle;

        gestureTransform.ScaleX = gestureTransform.ScaleY = _currentScale;

        brush.Transform = gestureTransform;
    }

Answer 1

First, find the location of the initial upper left corner relative to the center of the transform. This is pretty much straight subtraction. These can be pre-calculated since the before-transformation frame won't change. You do NOT want to pre-scale _brushSize by multiplying in _scale. That will end up scaling the brush twice.

  Point origCentre = new Point(ManipulationArea.ActualWidth / 2, ManipulationArea.ActualHeight / 2);
  Point origCorner = new Point(origCentre.X - _brushSize.Width / 2, origCentre.Y - _brushSize.Height /2);

Then apply the gestureTransform to the corner point: Point transCorner = gestureTransform.Transform(origCorner);

  XValue.Text = transCorner.X.ToString();
  YValue.Text = transCorner.Y.ToString();

This will get things pretty close to accurate, barring some rounding errors and some weirdness from the way the translation is tracked both by changing the position and then by applying the transform. Typically you would only do the latter. I'll leave tracking that down as an exercise for the reader :)

Rob Caplan from Microsoft helped me to solve this issue.