Copy part of the drawing in the same DrawingSession

Question

I want to design a continues moving "waterfall" to represent a radio spectrum. The way to do this in for example HTML5 is to draw 1 horizontal line at the top. Then copy the entire drawing from the top until the last line -1. (So the whole is shifted 1 line down)

And then again draw 1 line at the top.

Is that even the right approach in Win2d?

It took me some time to discover that it cannot be done in the draw event, the canvas get cleared at every start of a session.

Now struggling with offscreen drawing. For simplification we use just a rectangle in the example.

At the class I define device and offscreen:

private CanvasRenderTarget offscreen;
private CanvasDevice device = CanvasDevice.GetSharedDevice();
private DispatcherTimer Timer;

In the constructor:

offscreen = new CanvasRenderTarget(device, 300, 255, 96);
Timer = new DispatcherTimer();
Timer.Interval = TimeSpan.FromMilliseconds(refreshRate);
Timer.Tick += Timer_Tick;
Timer.Start();

Work in the Timer_Tick event:


private void Timer_Tick(object? sender, object e)
{
    using (CanvasDrawingSession ds = offscreen.CreateDrawingSession())
    { 
        // Draw rectangle
        ds.FillRectangle(10, 10, 100, 100, Colors.Red);
        // Source rect to be copied
        Rect sourceRegion = new Rect(10, 10, 50, 50);
        // Define the destination point on the current canvas
        Vector2 destinationPoint = new Vector2(150, 150);
        // Copy the specified region from the source to the destination  
        **ds.DrawImage(offscreen, destinationPoint, sourceRegion); // Unhandled error**
    }
    if (this.waterfallCanvas != null) this.waterfallCanvas.Invalidate();
}

private void waterfallCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    if (offscreen != null) args.DrawingSession.DrawImage(offscreen, 0, 0);
}

It throws a unhandled InteropServices.COMExeption

Are you sure you can use Win2D with WPF, or are you perhaps building a WinUI3 application? In WPF you could simply write into a WriteableBitmap to create and update the waterfall image. — Clemens
– Clemens, Commented Oct 4 at 5:06

Clemens · Accepted Answer · 2025-10-05 15:29:32Z

You do not need Win2D to create a moving waterfall image. Instead, you can simply use a WritableBitmap as shown in the example below.

Create an Image element in XAML like

<Grid Background="Black">
    <Image x:Name="image" Stretch="None"
           HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

and update it with the following code. In each update cycle, the content of the buffer are moved one line down. Then the first line is updated with random grayscale values. Finally the byte array is copied to the WriteableBitmap's PixelBuffer.

public sealed partial class MainWindow : Window
{
    private readonly byte[] buffer;
    private readonly WriteableBitmap bitmap;
    private readonly DispatcherTimer timer = new();
    private readonly Random random = new();

    public MainWindow()
    {
        InitializeComponent();

        bitmap = new(300, 300);
        buffer = new byte[bitmap.PixelWidth * bitmap.PixelHeight * 4];

        image.Source = bitmap;

        timer.Interval = TimeSpan.FromMilliseconds(100);
        timer.Tick += (s, e) => UpdateBitmap();
        timer.Start();
    }

    private void UpdateBitmap()
    {
        var stride = bitmap.PixelWidth * 4; // bytes per line

        Array.Copy(buffer, 0, buffer, stride, buffer.Length - stride);

        for (int i = 0; i < stride; i += 4)
        {
            var intensity = (byte)random.Next(0, 0xFF);

            buffer[i] = intensity; // B
            buffer[i + 1] = intensity; // G
            buffer[i + 2] = intensity; // R
            buffer[i + 3] = 0xFF; // A
        }

        using var stream = bitmap.PixelBuffer.AsStream();

        stream.Write(buffer, 0, buffer.Length);
    }
}

Collectives™ on Stack Overflow

Copy part of the drawing in the same DrawingSession

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related