# Help with some circle math

The code below is to draw a rectangle and an ellipse from the mousedown point (P1) to the mouseup point (p2)

All is good with the rectangle but the ellipse also scales to the bounds of the rectangle rather than edge of the ellipse.

How can I ensure that the edge of the ellipse moves so that it is under the mouse pointer and not the corner of the rectangle ?

hope that makes sense !

``````Private Sub CompositionTarget_Rendering(ByVal sender As Object, ByVal e As EventArgs)
If cropping Then
Dim width As Double = CInt(Math.Truncate(Math.Abs(p2.X - p1.X)))
Dim height As Double = CInt(Math.Truncate(Math.Abs(p2.Y - p1.Y)))
Dim left As Double = If(p1.X &lt; p2.X, p1.X, p2.X)
Dim top As Double = If(p1.Y &lt; p2.Y, p1.Y, p2.Y)

cropRectangle.SetValue(canvas.LeftProperty, left)
cropRectangle.SetValue(canvas.TopProperty, top)
cropRectangle.Width = width
cropRectangle.Height = height

cropEllipse.SetValue(canvas.LeftProperty, p1.X - Math.Abs(p2.X - p1.X))
cropEllipse.SetValue(canvas.TopProperty, p1.Y - Math.Abs(p2.Y - p1.Y))
cropEllipse.Width = (Math.Abs(p2.X - p1.X)) * 2
cropEllipse.Height = (Math.Abs(p2.Y - p1.Y)) * 2

End If
End Sub
``````
###### Who is Participating?

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

High School Computer Science, Computer Applications, and Mathematics TeachersCommented:
Is this WinForms?...WPF?  What kind of control are "cropRectangle" and "cropEllipse"?  Can you post a screenshot to show what you mean?
Author Commented:
I couldn't capture the mouse but imagine that it's at the bottom right of the square.  For a circle it needs to be on the edge of the circle
Capture.JPG
Author Commented:
it's WP8. ellipse and rectangle are XAML shapes.
CIOCommented:
> .. the ellipse also scales to the bounds of the rectangle rather than edge of the ellipse.

How could the ellipse not scale to the edge of the ellipse (itself)?

/gustav
President and Btrieve GuruCommented:
Your question DOES make sense.  In my experience, most programs that allow you to draw ellipses (I tested both SnagIt and Paint Shop Pro just now) use the cursor to set the bounding rectangle corner, and then draw the ellipse inside the bounding rectangle -- exactly as you are doing now.  Because the screen is continuously updating the ellipse on the screen, the user has sufficient feedback to be able to size the ellipse exactly to the needed dimensions.

In your case, you actually want the cursor on the ellipse boundary, instead.  This may be considered a non-standard UI design, so you might want to re-think this requirement if this is your own application -- stick to the UI design that is in common use for best results.

If this is not your own application (i.e. a homework problem or something like this), then the problem degenerates to a math problem.  You would need to determine the angle (0-360) of the mouse cursor from the CENTER of the ellipse (which has to be calculated based on the current bounding rectangle size) first.  Then, you would calculate the size of the ellipse which is needed to include the current mouse point on the edge of the ellipse.  You would then re-calculate the bounding rectangle needed for an ellipse of that size.  Finally, you would reset the bounding rectangle again to the new size (which, in theory, could impact the center point, which can then force a recalculation of everything else again).  See how this gets tricky quickly?

Experts Exchange Solution brought to you by

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Author Commented:
Thanks for bringing me back down to earth Bill.  I just got caught up in the idea that if I'm expanding an ellipse then, the mouse pointer should be on the edge of the ellipse and not some invisible bounding box.  If it's good enough for PSP then it's OK by me :)  Thanks.
"Batchelor", Developer and EE Topic AdvisorCommented:
It is easy if you consider drawing the ellipse from the upper or lower center to left or right center of it. Or, in other words, you are setting the starting and ending point of one ellipse quarter. in fact that is exactly the same as setting the bounding rectangle to twice the hight and width of what the mouse points span.

For drawing ellipses interactively the common methods are:
a) the mouse determines the bounding rectangle
b) the mouse determines the upper/lower and left/right boundary, as described in this comment above
c) use point 1 as the center and point 2 as the radius.

All this approaches assume you are building an ellipse with cartessian axis, that is both diameters are vertical/horizontal. If the ellipse needs to be rotated by an angle, you can't set that in one go - too many variables.
Commented:
As much as geometry and math is concerned there is no chance to make circle cross the dot (which is angle) with real numbers at any discrete accuracy.
###### It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.