如何在WPF/Surface中进行缩放时计算翻译

Question

我正在开发一个表面应用程序，需要在用户使用手指缩放（即捏合）时缩放场景（缩放）。

目前我已经让它正常工作了，但问题是我需要在用户手指之间的中心点上进行缩放。

我有这个点，但是背后的数学原理很难理解。

当我将ScaleTransform应用于我的画布场景时，它会在画布的左上角缩放，而我需要它在我的捏合手势的中心点上缩放（再次强调，我确实有这个点）。

如何计算出缩放的数学原理，以使其看起来像在手势的中心点上缩放？

编辑：

基本上这就是我所拥有的：

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 的画布，ZoomCanvas 是我应用变换的画布。

- Mark

Answer 1

我自己也曾经需要做这个。基本上，一个可以承载任意内容并允许用户使用手势进行平移和缩放的 Surface 控件。下面是我的 maniplation 处理器的 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's 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;
    }
}

- Kent Boogaart

---

只有几个问题，Scale、CanPan和CanScale是自定义属性吗？还是你扩展了一个ScrollViewer？使用ScrollViewer比使用X和Y平移更容易吗？ - Mark

Answer 2

这是我的实现，最终运行得非常好

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;
    }

- Mark