沿着椭圆移动一个点

我在画布上创建了一个椭圆，现在我需要画出源于原点的三条线。举个例子，假设第一行是90度（垂直），所以点是（0,10）。我需要另外两条线在两个方向上远离点。沿着椭圆移动一个点

我确定我没有描述得很好，但基本上我想要做的是从一个已知的椭圆上的一个点上，找到距离椭圆上的另一个点x。

我已经试过寻找一个椭圆的弧，但没有任何东西似乎适合我所寻找的。

来源

2013-02-13 AdamDev

你知道椭圆的半径的最小值和最大值？ – bfavaretto 2013-02-13 21:13:06

是的，我正在绘制椭圆，所以我知道每一点。 – AdamDev 2013-02-13 21:15:13

所以，安德鲁莫顿比我快，看到他的答案。 – bfavaretto 2013-02-13 21:19:17

对于一个椭圆：

x = a cos(t) 
y = b sin(t)

所以：

x/a= cos(t) 
t = acos(x/a) 
y = b sin(acos(x/a))

插入您的a，b，并x值，你会得到y。

见http://www.mathopenref.com/coordparamellipse.html

而粗暴：

<html> 
<head><title>Ellipse</title></head> 
<body> 
<canvas id="myCanvas" style="position: absolute;" width="400" height="200"></canvas> 
<script type="text/javascript"> 

var a=120; 
var b=70; 

var c=document.getElementById("myCanvas"); 
var cxt=c.getContext("2d"); 

var xCentre=c.width/2; 
var yCentre=c.height/2; 


// draw axes 
cxt.strokeStyle='blue'; 
cxt.beginPath(); 
cxt.moveTo(0, yCentre); 
cxt.lineTo(xCentre*2, yCentre); 
cxt.stroke(); 

cxt.beginPath(); 
cxt.moveTo(xCentre, 0); 
cxt.lineTo(xCentre, yCentre*2); 
cxt.stroke(); 

// draw ellipse 
cxt.strokeStyle='black'; 

cxt.beginPath(); 

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01) { 
    xPos = xCentre - (a * Math.cos(i)); 
    yPos = yCentre + (b * Math.sin(i)); 

    if (i == 0) { 
     cxt.moveTo(xPos, yPos); 
    } else { 
     cxt.lineTo(xPos, yPos); 
    } 
} 
cxt.lineWidth = 2; 
cxt.strokeStyle = "#232323"; 
cxt.stroke(); 
cxt.closePath(); 

// draw lines with x=+/- 40 
var deltaX=40; 

var y1=b*Math.sin(Math.acos(deltaX/a)); 

cxt.strokeStyle='red'; 
cxt.beginPath(); 
cxt.moveTo(xCentre+deltaX, yCentre-y1); 
cxt.lineTo(xCentre, yCentre); 
cxt.lineTo(xCentre-deltaX, yCentre-y1); 
cxt.stroke(); 

</script> 
</body>

来源

2013-02-13 21:18:23

这找到了我已知的点的y值。从直接位于原点的点开始，让我们假设（0,15）我需要找到“右”x距离点和“左”x距离点。这两个点必须落在椭圆上。对不起，如果你的答案解释了这一点，但我不知道它将如何“沿着椭圆移动”。所以ARC应该是5的长度。 – AdamDev 2013-02-13 21:27:00

你说你想要一个点在椭圆上，右边是x个像素。假设x = 10.0，则y = b sin（acos（10.0/a））。对于左边的x像素，您需要y = b sin（acos（-10.0/a））。你知道a和b的值，因为你用它们来绘制椭圆。 – 2013-02-13 21:30:51

我想我对数学和逻辑感到困惑。当我说我想要一个点向左10点，当前X = 10。我的新点应该<10，因为椭圆的弧不是一条直线。我应该得到一个略大于0的答案。我可能要求太多，但让我们说这个点更接近水平终点，然后我不希望x点由于曲线而直接向左/右10 。 – AdamDev 2013-02-14 13:20:56

Andrew Morton的答案是足够的，但你可以（用http://www.scienceprimer.com/draw-oval-html5-canvas为基础，因为我以前从未使用HTML画布。）它有一个平方根而不是sin和acos。

假设有以原点为中心的椭圆形，与沿一个 X轴和沿 b Y轴的半径的半径。这个椭圆的方程式是

X /一个 + ý / b = 1

解决这个为 y给出

Ŷ =± b SQRT（1 - X /一个）

可以选择任何迹象是适当的。根据您的帖子，您需要正平方根。

翻译为Javascript：

function yForEllipse(a, b, x) { 
    return b * Math.sqrt(1 - x*x/a * a); 
}

来源

2013-02-13 22:37:48

沿着椭圆移动一个点

回答

相关问题