jquery - How to get the edge coordinate of an ellipse in Javascript at a specific degree? - Stack Overflow

admin管理员组

文章数量:1335409

I am trying to determine the edges of an ellipse SVG in Javascript. What i have now is the center coordinate of the ellipse, the rectangle coordinates over it, and the top/left/right/bottom edges of the ellipse, but how can i determine the A,B,C,D point coordinates of an ellipse in Javascript?

I am trying to determine the edges of an ellipse SVG in Javascript. What i have now is the center coordinate of the ellipse, the rectangle coordinates over it, and the top/left/right/bottom edges of the ellipse, but how can i determine the A,B,C,D point coordinates of an ellipse in Javascript?

• javascript
• jquery
• math
• geometry
• ellipse

Share Improve this question Follow asked Aug 2, 2018 at 18:58 dodododo 47922 gold badges99 silver badges2323 bronze badges 1

• Hope this is 2D... if you mean by specific degree the diagonal then use parametric ellipse equation with 45,135,225,315 degrees. If you really mean any angle then pute coordinate aligned with bigger semi axis and pute the other one from ellipse equation. – Spektre Commented Aug 3, 2018 at 7:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Rational parametric equation of an ellipse might help:

var e = document.querySelector('ellipse'),
  p = document.querySelector('circle');

var rx = +e.getAttribute('rx'),
  ry = +e.getAttribute('ry');

var angle = 0;
const spin = () => {
    var t = Math.tan(angle / 360 * Math.PI);
    var px = rx * (1 - t * t) / (1 + t * t),
        py = ry * 2 * t / (1 + t * t);
    p.setAttribute('cx', px);
    p.setAttribute('cy', py);
    angle = ++angle % 360;
    requestAnimationFrame(spin)
}

requestAnimationFrame(spin)

<svg viewBox="-105 -55 210 110" height="200" width="400">
<ellipse stroke="#000" fill="#fff" cx="0" cy="0" rx="100" ry="50"/>
<circle fill="red" r="3"/>
</svg>

So for your points a, b, c, d:

var e = document.querySelector('ellipse'),
  a = document.querySelector('#a'),
  b = document.querySelector('#b'),
  c = document.querySelector('#c'),
  d = document.querySelector('#d');

var rx = +e.getAttribute('rx'),
  ry = +e.getAttribute('ry');

[a, b, c, d].forEach((p, i) => {
    var t = Math.tan(i * Math.PI / 4 + Math.atan(2 * ry / rx) / 2);
    var px = rx * (1 - t * t) / (1 + t * t),
        py = ry * 2 * t / (1 + t * t);
    console.log(p.id + '(' + px + ', ' + py + ')');
    p.setAttribute('cx', px);
    p.setAttribute('cy', py);
})

<svg viewBox="-105 -55 210 110" height="200" width="400">
<rect stroke="#000" fill="#fff" x="-100" y="-50" width="200" height="100"/>
<path stroke="#000" d="M-100-50L100 50zM-100 50L100-50z"/>
<ellipse stroke="#000" fill="none" cx="0" cy="0" rx="100" ry="50"/>
<circle id="a" fill="red" r="3"/>
<circle id="b" fill="red" r="3"/>
<circle id="d" fill="red" r="3"/>
<circle id="c" fill="red" r="3"/>
</svg>

Let's calculate for example the point A with coordinates A.x, A.y. To this end, let's assume first that the center O of the ellipse has coordinates 0, 0. To get the general case at the end, the final result will be just shifted by O.x, O.y.

Now, the line connecting points O and R2 is described by

y = (R2.y / R2.x) * x

To simplify the notation below, let's denote a := R2.y / R2.x. The ellipse itself is defined as a set of points which satisfy:

(y/yd)**2 + (x/xd)**2 = 1

So in order to get the intersection, we can just substitute the first equation into the second one. This yields:

x**2 * ( (a/yd)**2 + 1/xd**2 ) = 1

thus (since the intersection point is in the first quadrant, we know that x has a positive sign):

x = 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = a * x

Finally, to address non-zero offset of the center of the ellipse, we can just add the corresponding offset. Therefore:

x = O.x + 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = O.y + a * x

本文标签： jqueryHow to get the edge coordinate of an ellipse in Javascript at a specific degreeStack Overflow