CODEWITHSUNDEEP
c#xnadrawingmouseline
Stan
Stan

Reputation: 3699

Drawing a line where the mouse went

Basically, I want to draw a line where the mouse goes, like in paint, but, when I draw a dot over the mousePos every tick, this happens:

This happens

Now, I need some help turning this into a line, that doesn't have gaps or anything weird. Thanks for helping.

The code I'm using to generate the lines (This is not the code for in the picture!)

        protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        spriteBatch.Begin();

        Line newLine = new Line(pixel, point1, point2, 2, Color.White);
        allLines.Add(newLine);

        foreach (Line lines in allLines) 
        {
            lines.Draw(spriteBatch);
        }

        spriteBatch.End();

        base.Draw(gameTime);
    }

and the line object:

    public class Line
{
    Texture2D texture;
    Vector2 point1, point2;
    float width;
    Color color;
    float angle, length;

    public Line(Texture2D texture, Vector2 point1, Vector2 point2, float width, Color color) 
    {
        this.texture = texture;
        this.point1 = point1;
        this.point2 = point2;
        this.width = width;
        this.color = color;
        angle = (float)Math.Atan2(point2.Y - point1.Y, point2.X - point1.X);
        length = Vector2.Distance(point1, point2);
    }

    public void Draw(SpriteBatch spriteBatch) 
    {
        spriteBatch.Draw(texture, point1, null, color, angle, Vector2.Zero, new Vector2(length, width), SpriteEffects.None, 0);
    }
}

Upvotes: 3

Views: 2209

Answers (3)

Icemanind
Icemanind

Reputation: 48686

What your going to want to do is something like this (expanding on pathfinder666's answer):

private Point _lastPoint;

protected void MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)
{
    Graphics g = CreateGraphics();
    g.LineTo(_lastPoint.X, _lastPoint.Y, e.X, e.Y);
    _lastPoint = new Point(e.X, e.Y);
}

Now keep in mind, this might look a little jaggedy. You may want to use DrawArc instead to smooth it out a little. It depends on what you are trying to accomplish in the end.

Upvotes: 4

Nathan Wheeler
Nathan Wheeler

Reputation: 5932

What I've done in the past when I needed to draw lines/paths based on mouse movement is to use the Path objects rather than lines.

Here's a XAML/C# example. Just start a new XAML project in C#, and paste this into the default "MainWindow":

MainWindow.xaml.cs:

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

    private PathFigure _pathFigure = new PathFigure();
    PathFigureCollection _pathCollection = new PathFigureCollection();
    PathSegmentCollection _segments = new PathSegmentCollection();
    private PathGeometry _pathGeometry = new PathGeometry();

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        _pathFigure.Segments = _segments;
        _pathCollection.Add(_pathFigure);
        _pathGeometry.Figures = _pathCollection;
        myPath.Data = _pathGeometry;
    }

    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed)
        {
            LineSegment segment = new LineSegment();
            segment.Point = e.GetPosition(this);
            _pathFigure.Segments.Add(segment);

        }
    }

    private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _pathFigure.StartPoint = e.GetPosition(this);
    }
}

MainWindow.xaml:

<Window x:Class="TestPaths.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" Loaded="Window_Loaded" MouseMove="Window_MouseMove" MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <Grid>
        <Path Stroke="Black" StrokeThickness="1" Name="myPath" />
    </Grid>
</Window>

Output

MainWindow from PathGeometry Example

This example doesn't make you any new paths, so the line jumps when you press the left mouse button again (to the current position). It would be extremely simple to add the functionality to make new paths as needed.

This sample does eliminate the need to keep a rolling track of new points, as your last point is always available in the existing objects. For more information about paths, including how to set in curves and such, see the PathGeometry Docs on the MSDN.

Upvotes: 2

pathfinder666
pathfinder666

Reputation: 189

how about you you keep last point in memory and draw the line from that last point to the current point. you might have to smoothen out the curve to make it smooth and visually appealing.

Upvotes: 1

Related Questions