從SurfaceInkCanvas繪製筆畫到圖像

Question

我正試圖創建一個允許用戶在圖像上繪製的應用程序。我從PhotoPaint SDK示例開始。我知道SurfaceInkCanvas設置爲透明，位於圖像頂部。當用戶完成繪圖時，我想將筆畫繪製到圖像本身上。這是我卡住的地方。任何人都可以請我指出正確的方向？

謝謝！

Answer 1

下載WriteableBitmap的extenstion庫來源：http://writeablebitmapex.codeplex.com/

用法：

using System; 
using System.IO; 
using System.Net; 
using System.Windows; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 

namespace TestApp 
{ 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
     } 

     private void SaveImage(object sender, RoutedEventArgs e) 
     { 
      var bi = FromUrl("http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg", Environment.CurrentDirectory); 

      if (bi.Format != PixelFormats.Pbgra32) 
       bi = BitmapFactory.ConvertToPbgra32Format(bi); 

      WriteableBitmap wrb = new WriteableBitmap(bi); 

      foreach (var stroke in ink.Strokes) 
      { 
       foreach (var point in stroke.StylusPoints) 
       { 
        wrb.DrawLine((int)point.X, (int)point.Y, (int)(point.X + 1), (int)(point.Y + 1), Colors.Red); 
       } 
      } 

      var encoder = new JpegBitmapEncoder(); 
      BitmapFrame frame = BitmapFrame.Create(wrb); 
      encoder.Frames.Add(frame); 

      using (var stream = File.Create("result.jpg")) 
      { 
       encoder.Save(stream); 
      } 

     } 

     public static BitmapSource FromUrl(string url, string workingPath) 
     { 
      string[] strArr = url.Split(new char[] { '/' }); 
      string file = workingPath + "\\" + strArr[strArr.Length - 1]; 
      if (!File.Exists(file)) 
      { 
       using (WebClient client = new WebClient()) 
       { 
        client.DownloadFile(url, file); 
       } 
      } 
      return BitmapImageFromFile(file); 
     } 

     public static BitmapSource BitmapImageFromFile(string file) 
     { 
      BitmapImage bi = new BitmapImage(); 
      try 
      { 
       bi.BeginInit(); 
       bi.CacheOption = BitmapCacheOption.OnLoad; 
       bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache; 
       bi.UriSource = new Uri(file, UriKind.RelativeOrAbsolute); 
       bi.EndInit(); 
      } 
      catch { return ToBitmapSource(System.Drawing.Bitmap.FromFile(file)); } 
      return bi; 
     } 

     public static BitmapSource ToBitmapSource(System.Drawing.Image bitmap) 
     { 
      using (MemoryStream stream = new MemoryStream()) 
      { 
       bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg); 
       stream.Position = 0; 
       BitmapImage result = new BitmapImage(); 
       result.BeginInit(); 
       result.CacheOption = BitmapCacheOption.OnLoad; 
       result.StreamSource = stream; 
       result.EndInit(); 
       result.Freeze(); 

       return result; 
      } 
     } 
    } 
} 

XAML：

<Window x:Class="TestApp.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" 
     Height="350" Width="525"> 
    <Grid> 
     <Image Source="http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg" 
       Name="img"/> 
     <InkCanvas Background="Transparent" 
        Name="ink"/> 
     <Button Content="Save" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Margin="5" 
       Click="SaveImage"/> 
    </Grid> 
</Window> 

也許你會找到一個更好的方式來借鑑使用此擴展的WriteableBitmap的，我使用的繪圖方法只是一個實驗。