Question

我尝试将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矩形。

sombody有解决方案吗？

**更新**

对于那些正在寻找将笔画保存到uwp上的位图的正确方法的人。我找到了将InkCanvas Strokes保存到位图的UWP方式： InkStrokeContainer 对象有一个名为 SaveAsync（...）的方法，它将笔划保存到流中。如果您将此流用作位图的源，则将笔划设为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);
        }

*注意：此示例代码（https://www.nuget.org/packages/WriteableBitmapEx/）

中使用了WriteableBitmapEx

Answer 1

您可以使用Win2D呈现墨迹笔划。

从NuGet
将此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);
            }
        }
    }
}

Answer 2

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

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

通用Windows InkCanvas笔划在RenderTargetBitmap.RenderAsync

2 个答案: