wpf - 从 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 上绘图，我使用的绘图方法只是一个实验。