UWP: Ink Canvas Not Rendering With 3D Projection / Can I rasterize InkCanvas?

Question

I created a UWP project and am using InkCanvas to capture and render input from a Microsoft Surface pen.

All of it works, until I apply a 3D projection to the <Grid> element housing the <InkCanvas>. Here, I have a <PlaneProjection> int the XAML markup and adjust its RotationY in C#. When RotationY!=0.0, all of the ink disappears. Is there a solution?

I can work around this problem by rasterizing a list of InkStrokes and showing an <Image> instead. I looked around on Google but it seems I would need some super fancy Direct2D pipeline. Any advice?

Answer 1

I was able to find a workaround to this problem using rasterization. However the asynchronous nature of the workaround may lead to race conditions if you are not careful.

Xaml:

<Grid width="640px" height = "480px" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
    <InkCanvas x:Name = "InkCanvas1"/>
        <Grid Background="White" x:Name="RasterGrid">
        <Image x:name="RasterImage" Visibility="Collapsed">
            <Image.Projection>
                <PlaneProjection x:Name="Projection1"/>
            </Image.Projection>
        </Image>
    </Grid>
</Grid>

C#:

public async Task<RenderTargetBitmap> rasterizeInkCanvas(){
    RenderTargetBitmap renderBMP = new RenderTargetBitmap();
    await renderBMP.render(InkCavas1);
    return renderBMP;
}

public async void setRotationAsync(double angle){
    RasterImage.Source = await rasterizeInkCanvas();
    InkCanvas1.Visibility = Visibility.Collapsed;
    RasterGrid.Visibility = Visibility.Visible;
    Projection1.RotationY = angle;
}

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e){
    double x = e.GetCurrentPoint(null).Position.X;
    setRotationAsync(180.0/Math.PI*x/320.0);
}

private void Grid_PointerExited(object sender, PointerRoutedEventArgs e){
    RasterGrid.Visibility = Visibility.Collapsed;
    InkCanvas1.Visibility = Visibility.Visible;
    Projection1.RotationY = 0.0;
}

The above code is not tested, but it represents the general idea of the working code in my application.

During my testing, I found that I could only rasterize an InkCanvas that was in the xaml element tree and had Visibility.Visible. I was not able to rasterize an InkCanvas that was stored only in memory.

Another user posted a similar solution. Please see stackoverflow.com/a/72282615/5166365.