c# - 在 WPF 中缓慢平移和缩放

Question

我在 WPF 的几个 Canvas 上绘制了大量的线条和文本。我在 WPF 中使用了最轻量级的元素:DrawingVisual

我在不同的 Canvas 上绘制了线条，并将其粗细绑定(bind)到缩放系数的倒数，以便在缩放时可以获得统一的线条粗细。这意味着当我缩放时，我只是用线条重新绘制 Canvas 。带有文本的 Canvas 仅在程序开始时创建。

现在我遇到了一个相当奇怪的问题。当我缩放时，性能会变慢。当我使用虚线样式时，性能会变得更差。速度很慢，就像您在单词中加载一个大文本文件并且滚动时遇到问题一样!

我的第一个想法是，也许线条的创建花费了太多时间。由于我是在每次缩放时创建这些(在鼠标滚轮上)，因此我使用了一个适度的秒表来测量滚动鼠标滚轮到线条创建结束之间所需的时间。令我惊讶的是，只需要 1 毫秒!因此，线条的创建不是问题。

经过进一步检查，我发现平移时的性能相当慢!速度很慢，就像您尝试在 Windows 中平移非常非常大的图像时一样!

那么可能是什么问题呢？我知道您需要一些代码，但由于代码很长，我只会显示 Mousewheel 事件内部发生的事情:

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    var sw = new Stopwatch();
    sw.Start();

    var st = GetScaleTransform(Window);
    var tt = GetTranslateTransform(Window);

    var absoluteX = MousePos.Current.X * st.ScaleX + tt.X;
    var absoluteY = MousePos.Current.Y * st.ScaleY + tt.Y;

    const double zoomfactorforwheel = 1.3;
    if (e.Delta > 0)
    {
        st.ScaleX = Math.Min(st.ScaleX * zoomfactorforwheel, Scalemax);
        st.ScaleY = Math.Min(st.ScaleY * zoomfactorforwheel, Scalemax);
    }
    else
    {
        st.ScaleX = Math.Max(st.ScaleX / zoomfactorforwheel, Scalemin);
        st.ScaleY = Math.Max(st.ScaleY / zoomfactorforwheel, Scalemin);
    }
    tt.X = absoluteX - MousePos.Current.X * st.ScaleX;
    tt.Y = absoluteY - MousePos.Current.Y * st.ScaleY;

    Scale = st.ScaleX;

    // Inside this function I'm drawing the lines on drawingvisual
    // Then I'm adding the drawingvisual to a canvas
    DrawZeroWidthDrawing(Scale);

    sw.Stop();
    Console.WriteLine(sw.ElapsedMilliseconds);
}

我开始认为它可能与 WPF 中的渲染方式有关，或者与 WPF 中鼠标按钮的处理方式有关？ 似乎有什么东西干扰了鼠标事件频率。非常感谢任何建议。

更新:我尝试实现 GameAlchemist 在我的代码中所说的内容，令我惊讶的是它仍然很慢。

private MouseWheelEventArgs e;
private bool zoomNeeded;

CompositionTarget.Rendering += CompositionTargetOnRendering;

private void CompositionTargetOnRendering(object sender, EventArgs eventArgs)
{
    if (zoomNeeded)
    {
        zoomNeeded = false;
        DoZoom();

        DrawZeroWidthDrawing();              
    }
}

private void OnMouseWheel(object sender, MouseWheelEventArgs e)
{
    this.e = e;
    zoomNeeded = true;
}

private void DoZoom()
{
    var st = GetScaleTransform(Window);
    var tt = GetTranslateTransform(Window);

    var absoluteX = MousePos.Current.X * st.ScaleX + tt.X;
    var absoluteY = MousePos.Current.Y * st.ScaleY + tt.Y;

    const double zoomfactorforwheel = 1.3;
    if (e.Delta > 0)
    {
        st.ScaleX = Math.Min(st.ScaleX * zoomfactorforwheel, Scalemax);
        st.ScaleY = Math.Min(st.ScaleY * zoomfactorforwheel, Scalemax);
    }
    else
    {
        st.ScaleX = Math.Max(st.ScaleX / zoomfactorforwheel, Scalemin);
        st.ScaleY = Math.Max(st.ScaleY / zoomfactorforwheel, Scalemin);
    }
    tt.X = absoluteX - MousePos.Current.X * st.ScaleX;
    tt.Y = absoluteY - MousePos.Current.Y * st.ScaleY;

    Scale = st.ScaleX;            
}

private static TranslateTransform GetTranslateTransform(UIElement element)
{
    return (TranslateTransform)((TransformGroup)element.RenderTransform)
      .Children.First(tr => tr is TranslateTransform);
}

private static ScaleTransform GetScaleTransform(UIElement element)
{
    return (ScaleTransform)((TransformGroup)element.RenderTransform)
      .Children.First(tr => tr is ScaleTransform);
}

我发现也许重画线条是罪魁祸首，但似乎不是!我删除了对实际使用新厚度重新绘制它们的函数的调用，只留下了缩放部分。结果没有改变!我的表现仍然不足。

private void CompositionTargetOnRendering(object sender, EventArgs eventArgs)
{
    if (zoomNeeded)
    {
        zoomNeeded = false;
        DoZoom();
    }
}

我尝试使用WPF性能工具测量FPS，在缩放期间它回落到16~24!

Answer 1

好的，这是我的建议:在所有事件处理程序中，不要绘制或修改与渲染相关的任何内容。因为这些事件可能在屏幕刷新期间触发多次(对于 60Hz 屏幕 = 16 毫秒)，所以您最终可能会徒劳地重新绘制几次。
因此，处理一些标志:在计算机图形学中，我们经常称它们为“脏”标志，但您可以根据需要调用它们。在这里，您可能会使用两个可能是私有(private)属性的 bool 值，我们将它们称为 linesNeedsRedraw 和 renderTransformNeedsUpdate (例如)。
例如，现在在 mouseWheelHandler 中，只需将对 DrawZeroWidthDrawing(Scale); 的调用替换为 lineNeedsRedraw = true; 即可。在鼠标移动处理程序中，将 RenderTransform 更改替换为 renderTransformNeedsUpdate=true;。

第二件事:在 CompositionTarget.Rendering 事件上 Hook 一个方法。这个方法非常简单:

void repaintIfRequired() {
    if (linesNeedRedraw) {
       DrawZeroWidthDrawing(Scale);
       linesNeedRedraw = false;
    }
    if (renderTransformNeedsUpdate) {
       // ... do your transform change
       renderTransformNeedsUpdate = false;
    }
}

这样，每帧最多有一次更新。

我将以一个问题结束:为什么不也使用 renderTransform 来进行缩放？

祝你好运。