views:

39

answers:

2

I am creating a Paint application with C#, WPF, and Visual Studio 4. Just like MS Paint, the user can draw lines and shapes.

How do I fill a user drawn irregular shape with color? Is there a library for doing something like this? Detecting a closed loop that is created by lines seem like an impractical approach. I can imagine all kinds of "leaks" because of one pixel gap.

Thanks.

+1  A: 

Here's a simple SSCCE.

Edit: It might not be precisely what you wanted, now re-reading the question, but perhaps it can give you an idea of how to structure your filling tools. As for pixel-perfection, even MS Paint requires a complete closed drawing, where as other libraries might use degrees of antialias matching to avoid "leaks".

XAML:

<Window x:Class="FreeformDrawing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        MouseLeftButtonDown="Window_MouseLeftButtonDown"
        MouseLeftButtonUp="Window_MouseLeftButtonUp"
        MouseMove="Window_MouseMove"
        Title="MainWindow" Height="400" Width="400">
    <Grid>
        <Canvas x:Name="DrawingCanvas" />
    </Grid>
</Window>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace FreeformDrawing
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private Polygon polygon;
        private bool isDrawing = false;

        public MainWindow()
        {
            InitializeComponent();
        }

        public void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (!isDrawing)
            {
                isDrawing = true;

                polygon = new Polygon()
                {
                    Stroke = Brushes.Black,
                    StrokeThickness = 1,
                    StrokeMiterLimit = 1,
                    StrokeLineJoin = PenLineJoin.Round,
                    StrokeStartLineCap = PenLineCap.Round,
                    StrokeEndLineCap = PenLineCap.Round
                };

                AddPoint(e.GetPosition(DrawingCanvas));
                DrawingCanvas.Children.Add(polygon);
            }
        }

        public void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            isDrawing = false;

            if (polygon != null)
            {
                polygon.Points.Add(polygon.Points.First());
                polygon.Fill = Brushes.Yellow;
            }
        }

        public void Window_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDrawing)
            {
                AddPoint(e.GetPosition(DrawingCanvas));
            }
        }

        private void AddPoint(Point value)
        {
            if (value.X < (DrawingCanvas.ActualWidth - 1)
            && value.Y < (DrawingCanvas.ActualHeight - 1))
            {
                polygon.Points.Add(value);
            }
        }
    }
}
Claus Jørgensen
This is good, thanks. However, what if the user created a complex shape. Imagine a hand drawn star created with one stroke (http://mathworld.wolfram.com/images/eps-gif/StarPolygons_650.gif) and the user only wants the center part filled.Likewise, imagine a rectangle that is drawn using 2 strokes.I am more comfortable with Java than C#, please forgive me if I am not right.Thanks again.
+1  A: 

Flood Fill Algoritms look like the way to go -

http://en.wikipedia.org/wiki/Flood_fill