在WPF画布中书写数千笔画的最佳方法

时间:2018-06-20 13:01:51

标签: c# .net wpf canvas

我必须在Wacom数位板(如纸上)上通过触摸来实现书写,并且需要在WPF画布中每秒渲染最高200笔画。问题是,在大约20s的持续写入后,它会有点滞后,并且滞后会增长。我将所有笔画存储在 HashSet 中。我考虑过在HashSet包含600多个元素并将其设置为背景图像并清除HashSet时进行屏幕截图,但是在大约30个屏幕截图之后,它会变得有点模糊。你有任何想法如何使它变得更好吗?

1 个答案:

答案 0 :(得分:2)

您可以使用WriteableBitmap。这非常快,但是可以通过将各个字节写入位图来工作,因此,如果您需要将效果应用于图形,则必须自己编写。这是如何使用WriteableBitmap的示例。在调试模式下,大约需要100毫秒才能在计算机上的1600 x 1200 px图像上绘制1000条线(每条线由1600点组成),但是我确信可以对其进行优化。

我只是随机画线,但是您可以从Canvas获取事件并捕获手写笔的位置,并在每次笔划后传递它们。

public partial class MainWindow : Window
{
    private WriteableBitmap _bitmap;
    private readonly Random _random = new Random();
    private readonly Stopwatch _stopwatch = new Stopwatch();
    private const int White = 0x00000000;
    private const int Red = 0x00FF0000;

    private int _width;
    private int _height;

    public MainWindow()
    {
        InitializeComponent();
        CanvasImage.Loaded += OnLoaded;
    }

    private async void OnLoaded(object sender, RoutedEventArgs e)
    {
        _width = (int)DrawableCanvas.ActualWidth;
        _height = (int)DrawableCanvas.ActualHeight;
        _bitmap = new WriteableBitmap(_width, _height, 96, 96, PixelFormats.Bgr32, null);
        CanvasImage.Source = _bitmap;

        while (true)
        {
            unsafe
            {
                for (var index = 0; index < _width * _height; index++)
                    *((int*)_bitmap.BackBuffer + index) = White;
            }

            _stopwatch.Start();

            for (var index = 0; index < 1000; index++)
            {
                var start = _random.Next(0, _width);
                var points = Enumerable.Range(0, _width).Select(x => new Point((x + start) % _width, x % _height));
                UpdateImage(points);
            }

            Debug.WriteLine($"Last 1000 draws took: {_stopwatch.ElapsedMilliseconds} ms");
            _stopwatch.Reset();

            await Task.Delay(300);
        }
    }

    private void UpdateImage(IEnumerable<Point> points)
    {
        _bitmap.Lock();

        foreach (var point in points)
        {
            var x = (int)point.X;
            var y = (int)point.Y;
            var offset = _width * y + x;
            unsafe
            {
                *((int*)_bitmap.BackBuffer + offset) = Red;
            }
        }

        _bitmap.AddDirtyRect(new Int32Rect(0, 0, _width, _height));
        _bitmap.Unlock();
    }
}

然后查看:

<Grid>
    <Border Width="1604" Height="1204" BorderThickness="2" BorderBrush="Blue">
        <Canvas x:Name="DrawableCanvas">
            <Image x:Name="CanvasImage"></Image>
        </Canvas>
    </Border>
</Grid>