通用 Windows InkCanvas 笔触在 RenderTargetBitmap.RenderAsync 上消失 [英] Universal Windows InkCanvas strokes disappear on RenderTargetBitmap.RenderAsync

问题描述

我尝试将 InkCanvas 的笔触渲染到 Windows 10 通用应用程序中的 RenderTargetBitmap.这是我的 xaml 代码:

I try to render the strokes of a InkCanvas to a RenderTargetBitmap in a windows 10 universal App. Here is my xaml code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid x:Name="container">
        <Rectangle Fill="LightBlue" />
        <InkCanvas x:Name="InkCanvas" />
    </Grid>

    <Image Grid.Row="2" x:Name="TheImage" />

    <Button Grid.Row="3" Content="CopyToRendertargt" Click="Button_Click" />

</Grid>

这是我设置 Image.Source 属性的代码:

And here is my code to set the Image.Source property:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        InkCanvas.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse;
    }


    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        RenderTargetBitmap renderTarget = new RenderTargetBitmap();

        await renderTarget.RenderAsync(this.container);

        this.TheImage.Source = renderTarget;
    }

}

当我点击按钮时，我在 InkCanvas 上所做的笔画消失，InkCanvas 被冻结，直到我调整应用程序窗口的大小.笔画没有被渲染到 RenderTargetBitmap.图像仅显示浅蓝色矩形.

When i click to button the strokes i made on the InkCanvas disappear and the InkCanvas is forzen until i resize the app window. The strokes are not getting rendered to the RenderTargetBitmap. The Image shows just the LightBlue Rectangle.

有人对此有解决方案吗?

Does sombody have a solution for this?

** 更新 **

对于那些正在寻找在 uwp 上将笔画保存到位图的正确方法的人.我找到了将 InkCanvas 笔画保存到位图的 UWP 方式:InkStrokeContainer 对象有一个名为 SaveAsync(...) 的方法，它可以将笔画保存到流中.如果您将此流用作位图的源，则会将笔画作为位图.

For those who are searching for the right way to save strokes to a bitmap on uwp. I found the UWP-way of saving InkCanvas Strokes to a Bitmap: The InkStrokeContainer Object has a method called SaveAsync(...) which saves the strokes to a stream. If you use this stream as source for a Bitmap you get the strokes as Bitmap.

        InkStrokeContainer container = TheInkCanvas.InkPresenter.StrokeContainer;
        WriteableBitmap bmp;
        using (InMemoryRandomAccessStream ims =
            new InMemoryRandomAccessStream())
        {
            await container.SaveAsync(ims);
            bmp = await new WriteableBitmap(1, 1)
                .FromStream(ims, BitmapPixelFormat.Bgra8);
        }

*注意:此示例代码中使用了 WriteableBitmapEx (https://www.nuget.org/packages/WriteableBitmapEx/)

*Note: WriteableBitmapEx is used in this sample code (https://www.nuget.org/packages/WriteableBitmapEx/)

推荐答案

在 RenderTargetBitmap 文档，它描述:无法捕获的内容在捕获的图像中将显示为空白，但其他内容在捕获的图像中相同的可视化树仍然可以捕获并呈现(无法捕获的内容的存在不会使该 XAML 组合的整个捕获无效).因此可能是 InkCanvas 的内容不可捕获.

In the XAML visuals and RenderTargetBitmap section in the RenderTargetBitmap documentation, it describes: Content that can't be captured will appear as blank in the captured image, but other content in the same visual tree can still be captured and will render (the presence of content that can't be captured won't invalidate the entire capture of that XAML composition).So it could be that the content of InkCanvas is not captureable.

另一种方法是使用 Win2D(Microsoft 的 Direct2D .NET 包装器).Win2D 可以通过 nuget 包在 UWP 应用中使用.您将能够管理墨迹笔划并将其保存为图像(jpeg、png 和其他格式).

An alternative is to use Win2D (Direct2D .NET wrapper from Microsoft). Win2D can be used in an UWP app via a nuget package. You will be able to manage the ink strokes and save them to image (jpeg, png, and other formats).

这篇关于通用 Windows InkCanvas 笔触在 RenderTargetBitmap.RenderAsync 上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！