SurfaceInkCanvas에서 이미지에 획을 그립니다.

Question

사용자가 이미지를 그릴 수있는 앱을 만들려고합니다. 필자는 PhotoPaint SDK 샘플로 시작했습니다. SurfaceInkCanvas가 투명하게 설정되어 있고 이미지의 맨 위에 있다는 것을 알고 있습니다. 사용자가 드로잉을 끝내면 이미지 자체에 선을 그려 넣고 싶습니다. 내가 붙어있는 곳이야. 누구든지 올바른 방향으로 나를 가리켜 주시겠습니까?

감사합니다.

Answer 1

다운로드 WriteableBitmap의 확장 파일 라이브러리 : 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에 그릴 수있는 더 좋은 방법을 찾을 수 있습니다, 그리기 방법 나는 그것을 단지 실험에 사용했다.