UNO平台（WPF/Windows/Wasm）绘图应用鼠标卡顿优化咨询

针对你遇到的Canvas上Ellipse跟随鼠标移动卡顿的问题，以下是几个高效的优化方案：

1. 使用RenderTransform替代Canvas.Left/Top #

Canvas的SetLeft/SetTop会触发布局系统的Measure/Arrange流程，在高频的PointerMoved事件中会带来额外性能开销。改用TranslateTransform直接修改元素的渲染位置，绕开布局流程，能明显降低延迟：

修改XAML： #

<Grid>
    <Canvas Width="2088" Height="2100.17014099374" x:Name="MainCanvas" >
        <Canvas.Background>
            <SolidColorBrush Color="#eaeaea"></SolidColorBrush>
        </Canvas.Background>
        <Ellipse Name="SnapPoint" Width="25" Height="25" Fill="Blue">
            <Ellipse.RenderTransform>
                <TranslateTransform X="400" Y="400"/>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>
</Grid>

修改代码后台： #

private void MainCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var position = e.GetCurrentPoint(MainCanvas).Position;
    if (SnapPoint.RenderTransform is TranslateTransform transform)
    {
        transform.X = position.X;
        transform.Y = position.Y;
    }
}

2. 对PointerMoved事件做节流处理 #

高频的PointerMoved事件（每秒可触发数百次）会导致UI更新过于频繁，通过节流限制每秒更新次数（比如60次，对应16ms间隔），既能保证视觉流畅度，又能减少不必要的计算：

private DateTime _lastUpdateTime = DateTime.MinValue;
private const int ThrottleIntervalMs = 16; // 对应60fps的更新间隔

private void MainCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var now = DateTime.Now;
    if (now - _lastUpdateTime < TimeSpan.FromMilliseconds(ThrottleIntervalMs))
        return;

    _lastUpdateTime = now;
    var position = e.GetCurrentPoint(MainCanvas).Position;
    
    if (SnapPoint.RenderTransform is TranslateTransform transform)
    {
        transform.X = position.X;
        transform.Y = position.Y;
    }
}

3. 启用硬件加速与元素缓存 #

针对不同平台开启硬件加速，并对移动元素启用缓存，减少重复渲染的开销：

• Wasm平台：在Program.cs中添加以下代码启用硬件加速：

  Uno.UI.Runtime.WebAssembly.WebAssemblyRuntime.EnableHardwareAcceleration = true;
  

• 全平台通用：给Ellipse添加CacheMode，将元素缓存为位图，避免每次重绘都重新计算形状：

  <Ellipse Name="SnapPoint" Width="25" Height="25" Fill="Blue" CacheMode="BitmapCache">
      <!-- 保持RenderTransform配置 -->
  </Ellipse>
  

4. 简化Canvas背景绘制 #

如果Canvas使用纯色背景，当前的实现没问题；如果后续需要复杂背景，建议使用预渲染的静态元素或图片，避免每次重绘都重新渲染背景层。

内容的提问来源于stack exchange，提问作者Tim Davis