UWP：基于ScrollViewer计算变换

Question

UWP：基于ScrollViewer计算变换

24

我有一个 Windows 通用应用程序，其中我使用 DirectX 渲染场景。我想利用 ScrollViewer，并因此将场景渲染在 ScrollViewer 后面，并希望根据 ScrollViewer 计算场景转换。到目前为止，它工作得很好，特别是平移和滚动。但是当我放大时，场景会在两种特殊情况下跳动：

场景有足够的空间并且居中，现在需要滚动。
相反的方向。

更多或更少我使用以下代码：

float zoom = scrollViewer.ZoomFactor;

float inverseZoom = 1f / scrollViewer.ZoomFactor;

float scaledContentW = Document.Size.X * scrollViewer.ZoomFactor;
float scaledContentH = Document.Size.Y * scrollViewer.ZoomFactor;

float translateX;
float translateY;

if (scaledContentW < scrollViewer.ViewportWidth)
{
    translateX = ((float)scrollViewer.ViewportWidth * inverseZoom - Document.Size.X) * 0.5f;
}
else
{
    translateX = -inverseZoom * (float)scrollViewer.HorizontalOffset;
}

if (scaledContentH < scrollViewer.ViewportHeight)
{
    translateY = ((float)scrollViewer.ViewportHeight * inverseZoom - Document.Size.Y) * 0.5f;
}
else
{
    translateY = -inverseZoom * (float)scrollViewer.VerticalOffset;
}

float visibleX = inverseZoom * (float)scrollViewer.HorizontalOffset;
float visibleY = inverseZoom * (float)scrollViewer.VerticalOffset; ;

float visibleW = Math.Min(Document.Size.X, inverseZoom * (float)scrollViewer.ViewportWidth);
float visibleH = Math.Min(Document.Size.Y, inverseZoom * (float)scrollViewer.ViewportHeight);

Rect2 visibleRect = new Rect2(visibleX, visibleY, visibleW, visibleH);

transform =
    Matrix3x2.CreateTranslation(
        translateX,
        translateY) *
    Matrix3x2.CreateScale(zoom);

你可以在这里获取示例：https://github.com/SebastianStehle/Win2DZoomTest

为确保我的眼睛没有问题，我进行了缩放，并将翻译和缩放值写入文件。您可以在此处查看：

https://www.dropbox.com/s/9ak6ohg4zb1mnxa/Test.png?dl=0

列的含义如下：

第1列：变换矩阵的计算缩放值（M11）= ScrollViewer.ZoomFactor 第2列：矩阵的计算x偏移量（见上文）第3列：矩阵 * 向量（500, 500）的x值，即：Column1*500+Column2

您可以看到，矩阵值看起来不错，但应用变换时会出现向右跳动几毫秒的情况。一个理论是，视口可能会因滚动条变得可见而发生变化。但实际并非如此。我还尝试过固定值，使滚动条可见，甚至为滚动查看器创建了一个没有滚动条的自定义模板。

顺便说一句：这是一个交叉发布，我还在此处提出了问题：https://github.com/Microsoft/Win2D/issues/125

- SebastianStehle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin XL · Accepted Answer

您看到这种行为是因为当您放大比ScrollViewer的大小更大时，缩放中心点会移动。要解决此问题，您只需要订阅ScrollViewer的LayoutUpdated事件，并在处理程序内手动将其内容保持在中心位置。

    private void ScrollViewer_LayoutUpdated(object sender, object e)
    {
        this.ScrollViewer.ChangeView(this.ScrollViewer.ScrollableWidth / 2, this.ScrollViewer.ScrollableHeight / 2, this.ScrollViewer.ZoomFactor, true);
    }

这将修复Win2D中两个绘制的Rectangle的跳跃移动。

更新

为了证明我的观点，跳跃行为很可能是由于当内容大小超过ScrollViewer的大小时，不寻常的x和/或y值的变化。因此，我编写了一些代码，在屏幕上记录这些值，如下所示 -

...
this.Test1.Text += ((float)translateX).ToString() + " ";
this.Test2.Text += ((float)translateY).ToString() + " ";

session.Transform =
    Matrix3x2.CreateTranslation(
        (float)translateX,
        (float)translateY) *
    Matrix3x2.CreateScale((float)zoom);

现在看上面图片中的数字。我尝试放大，直到出现跳跃场景。看到translate y数值被突出显示了吗？它略高于其先前的数值，这与下降趋势相悖。因此，为了解决这个问题，您需要能够跳过由ScrollViewer引起的这些异常值。