0

I'm implementing some basic annotation draw features, such as arrows. Now I'm a little bit stuck with ellipse.

The methods to draw an ellipse usually address using it's two diameters and eventually a rotation:

Ellipse with it's two diameters

However I want to display the ellipse between the point user clicked and the one he's hovering, therefore I need a function that calculates diameters and rotation based on two points:

Ellipse between two points

How would I do that? Can it be achieved with sufficient performance (as it renders during mouse-hovering)?

Community
  • 1
  • 1
Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778

2 Answers2

0

It can be done in the same way that it is normally done, just using different math to calculate the shape. Without writing the entire code for you, you can start by having an event trigger when the user clicks the mouse button down. The function will copy the users x and y position based on the screen. Then there is a second function which will handle mouse movement. This function will keep track of the x and y coords of the mouse while it is in motion. The final function will be a mouse up event, when a user lifts their finger from the mouse button (assuming this is when the event should be finished). Using the initial and final position of the x and y coordinates, you can calculate the length of the line the user created. That line is the long diameter of the ellipse. Half this number for the large radius. Then use whatever ratio you are using to calculate the smaller radius from the larger one. Then create an ellipse based on these numbers.

For the math: Suppose your first point is x1,y1 and the end point is x2,y2

I'm also assuming that we have a line going from bottom-left to top-right

Distance between two points = sqrt((x2-x1)^2 + (y2-y1)^2) ---> (we will call this d1)

half of this is the length of the large radius ---> (we will call this r1)

Midpoint formula = ((x1+x2)/2 , (y1+y2)/2) ---> axis of rotation (we will call it (m1, m2))

distance from midpoint to end is just the radius

radius is now the hypotenuse of constructed plane, y2-m2 is height of right triangle.

Find the angles between midpoint and one end of larger radius - sin((y2-m2)/r1).

Angle of smaller radius is this angle + pi/4 radians.

calculate length of smaller radius based on ratio.

user3334871
  • 1,251
  • 2
  • 14
  • 36
  • I'm not asking about the drawing process, not even the implementation actually, but the math. But as I read your question I discovered my approach doesn't allow user to affect the second diameter. I didn't think about it earlier. – Tomáš Zato Nov 25 '14 at 22:44
  • Anyway, in your answer you've forgotten about rotation which is what's troubling me the most. – Tomáš Zato Nov 25 '14 at 22:45
  • @TomášZato ahh, I'll update my answer with the math if I can figure it out correctly. – user3334871 Nov 25 '14 at 22:48
0

the steps you shoul follow:

  1. get the angle of the line (from this post: get angle of a line from horizon)

  2. rotate the canvas or at least the part you currently drawing (live demo here: http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial)

  3. draw an ellipse in canvas (http://www.scienceprimer.com/draw-oval-html5-canvas)

the resulted ellipse will be transformed as described

Community
  • 1
  • 1
ymz
  • 6,602
  • 1
  • 20
  • 39