(UWP)绘制图像并再次保存为图像/字节数组

Question

我在过去两天尝试了很多不同的解决方案,但似乎找不到最好的方法.

我想要的是:

1. Show image
2. Enable drawing red lines on image
3. Save image with lines

我已经尝试过Win2D,WriteableBitmapEx,InkCanvas,普通的Canvas和Lumia Imaging SDK,但是在工作解决方案上没有运气.我很有可能做错了,因为所有这些解决方案对我都不起作用.我似乎无法找到任何与UWP合作的好例子.有人知道一个很好的方法吗？

编辑:我正在用C#开发

Answer 1

1)第一种解决方案是使用DX.您可以使用Direct2D和DirectWrite渲染到屏幕,然后使用WIC API将渲染的图像保存到磁盘.如果您正在编写Windows应用商店应用,则可以让用户使用Windows :: Storage :: Pickers :: FileSavePicker选择目标文件.在这里您可以找到一个示例程序.

有关在UWP中使用DX渲染或保存图像的更完整示例,请参阅此处.

2)如果你想使用纯c#,win2D是direct2D的好包装,可用于绘制图像.在RenderTargetBitmap的帮助下,您可以将任意UIElement渲染到位图中.至于RenderTargetBitmap,这里是MSDN论文,这里是很好的样本.

对于您的情况,代码可能如下所示(您可以稍后保存到文件):

XAML:

<StackPanel>
    <Button Content="Save as image source" Click="SaveImageSource_Click" />
    <Grid x:Name="RenderedGrid" Height="500"  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
    <Image x:Name="RenderedImage" Stretch="None" />
    </Grid>
</StackPanel>

C#:

private  void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    args.DrawingSession.DrawEllipse(155, 155, 80, 30, Colors.Black, 3);
    args.DrawingSession.DrawLine(155, 155, 180, 180, Colors.Red);
}

private async void SaveImageSource_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(RenderedGrid, 500, 500);
    RenderedImage.Source = renderTargetBitmap;
}

如果有任何不清楚的地方,请告诉我.