How to calculate translation when scaling in WPF / surface

Question

I am doing a surface application where I need to scale the scene (zoom) while the user zooms with his fingers (e.g. pinching)

I am currently working fine, but the problem is that I need to increase the center point between users' fingers.

I have a point, but the math behind the translation is hard to understand.

When I apply ScaleTransformCanvas to my ribbon, it zooms in on the upper left corner of the canvas, I need it to increase the center point of my gesture finger (which again I have).

How would translation math work to zoom in, zoom in at the center point of gestures?

Edit:

This is basically what I have:

void Affine2DManipulationDelta(object sender, Affine2DOperationDeltaEventArgs e)
{
    //apply zoom and translate
    if (e.ScaleDelta != 1)
        ApplyZoom(e);
    else if (e.Delta.Length != 0)
        ApplyTranslation(e);
}

private void ApplyZoom(Affine2DOperationDeltaEventArgs e)
{
    //scale
    var newScale = _zoomTransform.ScaleX * e.ScaleDelta;
    newScale = GetCappedZoomLevel(newScale);

    _zoomTransform.ScaleX = newScale;
    _zoomTransform.ScaleY = newScale;
}

private void ApplyTranslation(Affine2DOperationDeltaEventArgs e)
{
    var xDiff = e.ManipulationOrigin.X - _screenStartPoint.X;
    var yDiff = e.ManipulationOrigin.Y - _screenStartPoint.Y;

    var translateX = xDiff + _startOffset.X;
    var translateY = yDiff + _startOffset.Y;

    //bounds testing to limit translation
    var rect = new Rect(0.0, 0.0, ZoomCanvas.RenderSize.Width, ZoomCanvas.RenderSize.Height);
    Rect bounds = ZoomCanvas.TransformToAncestor(MainViewportCanvas).TransformBounds(rect);

    if (CanTranslateX(translateX, bounds))
        _translateTransform.X = translateX;

    if (CanTranslateY(translateY, bounds))
        _translateTransform.Y = translateY;
}

, ...

_zoomTransform - ScaleTransform, _translateTransform - TranslateTransform

MainViewport - , ZoomCanvas, , .

Answer 1

,

private void ApplyZoom(Affine2DOperationDeltaEventArgs e)
    {
        //scale
        var newScale = _zoomTransform.ScaleX * e.ScaleDelta;
        newScale = GetCappedZoomLevel(newScale);
        var pinchPoint = e.ManipulationOrigin;
        DoZoom(newScale, _transformGroup.Inverse.Transform(pinchPoint), pinchPoint);
    }

    private void DoZoom(double newScale, Point pinchPosition, Point physicalPosition)
    {
        _translateTransform.X = -1 * (pinchPosition.X * newScale - physicalPosition.X);
        _translateTransform.Y = -1 * (pinchPosition.Y * newScale - physicalPosition.Y);
        _zoomTransform.ScaleX = newScale;
        _zoomTransform.ScaleY = newScale;
    }

Answer 2

. , Surface, ( ). Affine2DManipulationDelta. , , .

private void OnManipulationDelta(object sender, Affine2DOperationDeltaEventArgs e)
{
    Debug.Assert(_scrollViewer != null);

    if (CanScale && _scrollViewer != null && e.ScaleDelta != 1)
    {
        var scrollViewerContent = _scrollViewer.Content as UIElement;

        //can't do anything if the content isn't present and isn't a UIElement
        if (scrollViewerContent != null)
        {
            var newScale = Scale * e.ScaleDelta;

            newScale = Math.Max(MinScale, newScale);
            newScale = Math.Min(MaxScale, newScale);

            var origin = e.ManipulationOrigin;
            var pointInContent = _scrollViewer.TranslatePoint(origin, scrollViewerContent);

            var deltaScale = newScale - Scale;
            //width and height changes across the whole image
            var deltaWidth = deltaScale * _scrollViewer.ExtentWidth;
            var deltaHeight = deltaScale * _scrollViewer.ExtentHeight;
            //width and height changes relative to the point in the scroll viewer content
            deltaWidth = (pointInContent.X / _scrollViewer.ExtentWidth) * deltaWidth;
            deltaHeight = (pointInContent.Y / _scrollViewer.ExtentHeight) * deltaHeight;

            _offset = Vector.Add(_offset, new Vector(deltaWidth, deltaHeight));
            var centerPoint = new Point(origin.X + deltaWidth, origin.Y + deltaHeight);
            centerPoint.Offset(_offset.X, _offset.Y);

            Scale = newScale;

            HorizontalOffset = _scrollViewer.HorizontalOffset + deltaWidth;
            VerticalOffset = _scrollViewer.VerticalOffset + deltaHeight;
        }
    }
    else if (CanPan && e.Delta.Length != 0)
    {
        var newHorizontalOffset = _scrollViewer.HorizontalOffset + (e.Delta.X * -1);
        var newVerticalOffset = _scrollViewer.VerticalOffset + (e.Delta.Y * -1);
        newHorizontalOffset = Math.Max(0, newHorizontalOffset);
        newVerticalOffset = Math.Max(0, newVerticalOffset);
        HorizontalOffset = newHorizontalOffset;
        VerticalOffset = newVerticalOffset;
    }
}