如何得到Javascript中椭圆在特定度数下的边坐标?
How to get the edge coordinate of an ellipse in Javascript at a specific degree?
我正在尝试确定 Javascript 中椭圆 SVG 的边缘。我现在拥有的是椭圆的中心坐标,它上面的矩形坐标,以及椭圆的 top/left/right/bottom 边,但是我如何确定椭圆的 A、B、C、D 点坐标 Javascript?
Rational parametric equation 椭圆可能有帮助:
var e = document.querySelector('ellipse'),
p = document.querySelector('circle');
var rx = +e.getAttribute('rx'),
ry = +e.getAttribute('ry');
var angle = 0;
const spin = () => {
angle *= angle !== 360;
var t = Math.tan(angle++ / 360 * Math.PI);
var px = rx * (1 - t ** 2) / (1 + t ** 2),
py = ry * 2 * t / (1 + t ** 2);
p.setAttribute('cx', px);
p.setAttribute('cy', py);
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>
所以对于你的 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 ** 2) / (1 + t ** 2),
py = ry * 2 * t / (1 + t ** 2);
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>
让我们计算例如坐标 A.x, A.y
的点 A
。为此,我们先假设椭圆的圆心O
坐标为0, 0
。为了得到最后的一般情况,最终结果将只移动 O.x, O.y
.
现在,连接点 O
和 R2
的线由
描述
y = (R2.y / R2.x) * x
为了简化下面的符号,我们用 a := R2.y / R2.x
表示。椭圆本身被定义为满足以下条件的一组点:
(y/yd)**2 + (x/xd)**2 = 1
所以为了得到交集,我们可以将第一个方程代入第二个方程。这产生:
x**2 * ( (a/yd)**2 + 1/xd**2 ) = 1
因此(由于交点在第一象限,我们知道x
是正号):
x = 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = a * x
最后,为了解决椭圆中心的非零偏移,我们可以添加相应的偏移量。因此:
x = O.x + 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = O.y + a * x
我正在尝试确定 Javascript 中椭圆 SVG 的边缘。我现在拥有的是椭圆的中心坐标,它上面的矩形坐标,以及椭圆的 top/left/right/bottom 边,但是我如何确定椭圆的 A、B、C、D 点坐标 Javascript?
Rational parametric equation 椭圆可能有帮助:
var e = document.querySelector('ellipse'),
p = document.querySelector('circle');
var rx = +e.getAttribute('rx'),
ry = +e.getAttribute('ry');
var angle = 0;
const spin = () => {
angle *= angle !== 360;
var t = Math.tan(angle++ / 360 * Math.PI);
var px = rx * (1 - t ** 2) / (1 + t ** 2),
py = ry * 2 * t / (1 + t ** 2);
p.setAttribute('cx', px);
p.setAttribute('cy', py);
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>
所以对于你的 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 ** 2) / (1 + t ** 2),
py = ry * 2 * t / (1 + t ** 2);
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>
让我们计算例如坐标 A.x, A.y
的点 A
。为此,我们先假设椭圆的圆心O
坐标为0, 0
。为了得到最后的一般情况,最终结果将只移动 O.x, O.y
.
现在,连接点 O
和 R2
的线由
y = (R2.y / R2.x) * x
为了简化下面的符号,我们用 a := R2.y / R2.x
表示。椭圆本身被定义为满足以下条件的一组点:
(y/yd)**2 + (x/xd)**2 = 1
所以为了得到交集,我们可以将第一个方程代入第二个方程。这产生:
x**2 * ( (a/yd)**2 + 1/xd**2 ) = 1
因此(由于交点在第一象限,我们知道x
是正号):
x = 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = a * x
最后,为了解决椭圆中心的非零偏移,我们可以添加相应的偏移量。因此:
x = O.x + 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = O.y + a * x