C#•4w ago

More ideal/efficient way of drawing pixels on a canvas

Hello, I'm trying to build a sort of whiteboard application with Avalonia. I'm new to Avalonia and .NET in general but want to use this project to learn. So currently I have a simple canvas and using Xiaolin Wu's Line Algorithm I'm drawing lines on the canvas by placing small rectangles (simulating pixels) on it when the mouse is clicked and drawn on the canvas. This works fine to an extent but the whole line-drawing process bogs down after the canvas is populated a fair bit, I can imagine this is because my way of handling it is inefficient, after all I'm just adding numerous small rectangles as children of the canvas. I'm looking for a more ideal way of doing this whole drawing process. From the research I've done, bitmaps keep popping up so I think I'll go learn about them but if there are any suggestions, I'd like to hear them

C#
private void PutPixel(Point coord, double opacity)
    {
        var pixel = new Rectangle
        {
            Width = 2,
            Height = 2,
            Fill = Brushes.Red,
            Opacity = opacity
        };
        Canvas.SetLeft(pixel, coord.X);
        Canvas.SetTop(pixel, coord.Y);
        MainCanvas.Children.Add(pixel);
    }

C#
private void PutPixel(Point coord, double opacity)
    {
        var pixel = new Rectangle
        {
            Width = 2,
            Height = 2,
            Fill = Brushes.Red,
            Opacity = opacity
        };
        Canvas.SetLeft(pixel, coord.X);
        Canvas.SetTop(pixel, coord.Y);
        MainCanvas.Children.Add(pixel);
    }

6 Replies

HermesOP•4w ago

Did a bit of research on Bitmaps and also tried asking AI about an approach using Bitmaps and it's suggestion is to basically draw onto an off-screen bitmap and render that single bitmap onto the canvas instead :LETSFUCKINGTHINK: Guess I'll look into that

JakenVeina•4w ago

That is indeed an approach I've seen before, and works well enough.

oli_burg•4w ago

You can derive your own control from Control and override the Render method. Here you can use the methods of the DrawingContext context parameter to draw directly on the canvas. See: https://docs.avaloniaui.net/docs/guides/custom-controls/draw-with-a-property

Draw with a Property | Avalonia Docs

On this page you will see how to draw a custom control, using the value for a simple property that defines the background color. The code now looks like this:

HermesOP•4w ago

Can hardly find any proper documentation on WriteableBitmap tho, at least so far Seems it's not mature? I see manipulations involving raw pointers and the likes

HermesOP•4w ago

A breakthrough, using WriteableBitmap

JakenVeina•4w ago

🙌

Gaming

Programming

More ideal/efficient way of drawing pixels on a canvas

Did you find this page helpful?