CODEWITHSUNDEEP
c#.netwpf
roten
roten

Reputation: 258

Drawing Ellipse on Canvas with "negative" width/height using mouse events

On MouseDownEvent I set upper left corner of Ellipse I'm trying to draw.

public MyCircle(Point location)
    {
        ellipseObject = new Ellipse
        {
            Stroke = Brushes.Black,
            StrokeThickness = 2,
            Margin = new Thickness(location.X, location.Y, 0, 0)
        };
    }

Then on MouseMoveEvent I update Width and Height properties and it works fine as long as I don't move mouse above or/and to the left of my Ellipse upper left corner, in that case I'm getting exception that these properties can't be negative (which of course makes perfect sense).

public void Draw(Point location)
    {
        if (ellipseObject != null)
        {                
            ellipseObject.Width = location.X - ellipseObject.Margin.Left;
            ellipseObject.Height = location.Y - ellipseObject.Margin.Top;               
        }
    }

The problem doesn't exist with drawing lines:

public void Draw(Point location)
    {
        lineObject.X2 = location.X;
        lineObject.Y2 = location.Y;
    }

I know it's trivial, but I'm completely stuck on this. How should I handle drawing Ellipses?

Upvotes: 0

Views: 1163

Answers (2)

Nathan Tuggy
Nathan Tuggy

Reputation: 2244

Save the origin point separately and set the X and Y properties of the Ellipse's Margin to the mouse position and the Width and Height to the distances between the mouse and origin point.

Untested:

public MyCircle(Point location)
{
    ellipseObject = new Ellipse
    {
        Stroke = Brushes.Black,
        StrokeThickness = 2,
        Margin = new Thickness(location.X, location.Y, 0, 0)
        Tag = new Point(location.X, location.Y)
    };
}

public void Draw(Point location)
{
    if (ellipseObject != null)
    {                
        Point o = (Point)ellipseObject.Tag;
        double x = Math.Min(location.X, o.Left);
        double y = Math.Min(location.Y, o.Top);
        double width = Math.Abs(Math.Max(location.X, o.Left) - x);
        double height = Math.Abs(Math.Max(location.Y, o.Top) - y);
        ellipseObject.Margin.X = x;
        ellipseObject.Margin.Y = y;
        ellipseObject.Width = width;
        ellipseObject.Height = height;               
    }
}

Upvotes: 1

Ryan C
Ryan C

Reputation: 582

I had this EXACT problem when trying to create a crop tool. Problem is that you need to create if statements for when the cursor goes negative X or negative Y from your starting point. For starters, you'll need to have a global Point that you mark as your 'start' point. Also specify a global current point position that we'll talk about in a minute.

public Point startingPoint;
public Point currentPoint;

Then, make sure you have an onMouseDown event on whatever control you are trying to put the ellipse on. 

private void control_MouseDown(object sender, MouseEventArgs e)
    {
       startingPoint.X = e.X;
       startingPoint.Y = e.Y;
    }

Then, you need to create if statements in your MouseMove event to check with point (current mouse position, or starting point) has a lower X/Y value

private void control_MouseMove(object sender, MouseEventArgs e)
    {
          //The below point is what we'll draw the ellipse with.
          Point ellipsePoint;
          Ellipse ellipseObject = new Ellipse();
          currentPoint.X = e.X;
          currentPoint.Y = e.Y;
         //Then we need to get the proper width/height;
          if (currentPoint.X >= startingPoint.X)
          {
                 ellipsePoint.X = startingPoint.X;
                 ellipseObject.Width = currentPoint.X - startingPoint.X;
          }
          else
          {
                ellipsePoint.X = currentPoint.X;
                ellipseObject.Width = startingPoint.X - currentPoint.X;
          }
          if (currentPoint.Y >= startingPoint.Y)
          {
                ellipsePoint.Y = startingPoint.Y;
                ellipseObject.Height = currentPoint.Y - startingPoint.Y;
          }
          else
          {
                ellipsePoint.Y = currentPoint.Y;
                ellipseObject.Height = startingPoint.Y - currentPoint.Y;
          }
           ellipseObject.Stroke = Brushes.Black;
           ellipseObject.StrokeThickness = 2;
           ellipseObject.Margin = new Thickness(ellipsePoint.X, ellipsePoint.Y, 0, 0);
    }

Hope this helps!

Upvotes: 2

Related Questions