沿着橢圓移動一個點

我在畫布上創建了一個橢圓，現在我需要畫出源於原點的三條線。舉個例子，假設第一行是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

沿着橢圓移動一個點

回答

相關問題