通用 Windows InkCanvas 笔划在 RenderTargetBitmap.RenderAsync 上消失答案

【问题标题】：Universal Windows InkCanvas strokes disappear on RenderTargetBitmap.RenderAsync通用 Windows InkCanvas 笔划在 RenderTargetBitmap.RenderAsync 上消失
【发布时间】：2015-06-03 13:21:56
【问题描述】：

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

<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 属性的代码：

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。该图像仅显示 LightBlue 矩形。

有人对此有解决方案吗？

** 更新 **

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

        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/)

【问题讨论】：

标签： xaml win-universal-app

【解决方案1】：

您可以使用Win2D 来渲染墨迹。

从 NuGet 将 Win2D.uwp 添加到项目中
将此 InkCanvasExtensions.cs 文件添加到您的项目中
更改命名空间或将using Zoetrope; 添加到您的源
创建图像文件或流并将其传递给 InkCanvas.RenderAsync()

InkCanvasExtensions.cs

namespace Zoetrope
{
    using System;
    using System.Threading.Tasks;
    using Microsoft.Graphics.Canvas;
    using Windows.Graphics.Display;
    using Windows.Storage.Streams;
    using Windows.UI;
    using Windows.UI.Xaml.Controls;

    /// <summary>
    /// InkCanvas Extensions
    /// </summary>
    public static class InkCanvasExtensions
    {
        /// <summary>
        /// Render an InkCanvas to a stream
        /// </summary>
        /// <param name="inkCanvas">the ink canvas</param>
        /// <param name="fileStream">the file stream</param>
        /// <param name="backgroundColor">the background color</param>
        /// <param name="fileFormat">the file format</param>
        /// <returns>an async task</returns>
        public static async Task RenderAsync(
            this InkCanvas inkCanvas, 
            IRandomAccessStream fileStream, 
            Color backgroundColor,
            CanvasBitmapFileFormat fileFormat)
        {
            // do not put in using{} structure - it will close the shared device.
            var device = CanvasDevice.GetSharedDevice();
            var width = (float) inkCanvas.ActualWidth;
            var height = (float) inkCanvas.ActualHeight;
            var currentDpi = DisplayInformation.GetForCurrentView().LogicalDpi;

            using (var offscreen = new CanvasRenderTarget(device, width, height, currentDpi))
            {
                using (var session = offscreen.CreateDrawingSession())
                {
                    session.Clear(backgroundColor);

                    session.DrawInk(inkCanvas.InkPresenter.StrokeContainer.GetStrokes());
                }

                await offscreen.SaveAsync(fileStream, fileFormat);
            }
        }
    }
}

【讨论】：

聪明的迈克尔。

【解决方案2】：

在RenderTargetBitmap documentation 的 XAML 视觉效果和 RenderTargetBitmap 部分中，它描述：无法捕获的内容将在捕获的图像中显示为空白，但同一视觉树中的其他内容仍然可以捕获并呈现（无法捕获的内容的存在不会使该 XAML 组合的整个捕获无效）。因此可能是 InkCanvas 的内容不可捕获。

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

【讨论】：