在UWP油墨畫布上顯示背景圖像

Question

我在我的UWP應用程序中有一個InkCanvas，並且想要顯示圖像（理想情況下作爲Canvas的一部分，但除此之外，以某種方式覆蓋它（這個想法是我可以保存更改圖像回圖像文件）WPF似乎讓InkCanvas要孩子，但在UWP這似乎並不可能我已經試過如下：。

 <InkCanvas x:Name="drawInkCanvas"> 
      <Image Source="{Binding DrawingImage}"/> 

     </InkCanvas> 

但是，不起作用;我也試過這個：

 <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"> 
      <InkCanvas x:Name="drawInkCanvas" Opacity=".5"/> 
      <Image Source="{Binding DrawingImage}" Opacity=".5"/> 

     </Canvas> 

這是公平的，我沒有很高的h經營;無論如何，儘管它確實是一種工作，但它使圖像和InkCanvas看起來都不對，顯然，它不允許我保存最終的圖像。

理想情況下，會有背景圖片或類似的東西。有什麼我可以用來實現這一點;我正在接近這樣的觀點，即我可能需要用標準畫布替換InkCanvas，然後重新編寫所有InkCanvas功能！

Answer 1

所以，你有兩個問題：

1. 如何使用InkCanvas在Image控制借鑑。
2. 如何將結果保存到文件中。

在本例中，我將使用簡單的UWP應用程序，該應用程序假定您的資產文件夾中有「sample.jpg」文件，並且清單中有「圖片庫」功能。

爲了解決第一個問題，只是把兩者InkCanvas和Image到同一容器（如Grid），但請記住，爲了事項：

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid> 
     <Image Source="/Assets/sample.jpg"></Image> 
     <InkCanvas x:Name="ink"></InkCanvas> 
    </Grid> 
    <Button Content="Save" 
      Width="100" 
      Height="25" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" Click="BtnSave_Click"/> 
</StackPanel> 

如果你把InkCanvas第一（像你的問題例子一樣） - 它不會工作。但是，如果將InkCanvas放在最後 - 一切正常，您可以繪製圖片。

現在要解決第二個問題，您需要使用Win2D（安裝nuget Win2D.uwp包），因爲標準RenderTargetBitmap將不會渲染InkCanvas內容。首先繪製原始圖像（直接從原始圖像中獲取圖像，例如從原始文件中獲取圖像），然後在其上繪製墨跡畫布的內容。 MainPage的完整代碼（如果您在上面添加xaml，將會有完整的工作示例）：

public sealed partial class MainPage : Page { 
    public MainPage() { 
     this.InitializeComponent(); 
     // just set some properties of ink canvas, not directly relevant to your question 
     ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch; 
     var attr = new InkDrawingAttributes(); 
     attr.Color = Colors.Red; 
     attr.IgnorePressure = true; 
     attr.PenTip = PenTipShape.Circle; 
     attr.Size = new Size(4, 10); 
     ink.InkPresenter.UpdateDefaultDrawingAttributes(attr); 
    } 

    private async void BtnSave_Click(object sender, RoutedEventArgs e) { 
     // grab output file 
     StorageFolder storageFolder = KnownFolders.SavedPictures; 
     var file = await storageFolder.CreateFileAsync("output.jpg", CreationCollisionOption.ReplaceExisting); 

     CanvasDevice device = CanvasDevice.GetSharedDevice(); 
     CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int) ink.ActualWidth, (int) ink.ActualHeight, 96); 

     // grab your input file from Assets folder 
     StorageFolder appInstalledFolder = Windows.ApplicationModel.Package.Current.InstalledLocation; 
     StorageFolder assets = await appInstalledFolder.GetFolderAsync("Assets"); 
     var inputFile = await assets.GetFileAsync("sample.jpg");    
     using (var ds = renderTarget.CreateDrawingSession()) { 
      ds.Clear(Colors.White);     
      var image = await CanvasBitmap.LoadAsync(device, inputFile.Path); 
      // draw your image first 
      ds.DrawImage(image); 
      // then draw contents of your ink canvas over it 
      ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes()); 
     } 

     // save results 
     using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) { 
      await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f); 
     } 
    } 
}