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

Question

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

我在不同的 Canvas 上绘制了线条，并将它们的 thickness 绑定(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 来进行缩放？

祝你好运。