基於焦點點在座標系上畫一條橢圓線？

我想在谷歌地圖上畫一條虛線，所以我不能使用eshape.js。我需要創建一個近似座標系中的橢圓的點陣列。這只是爲了顯示，所以它不必那麼精確。基於焦點點在座標系上畫一條橢圓線？

如果有人可以解釋數學沒關係。額外的功勞，如果你在javascript中應用它）

2012-08-06 Himmators

一個很好的起點是[橢圓極座標方程]（http://en.wikipedia.org/wiki/Ellipse#Polar_form_relativ e_to_center）。 – Kevin 2012-08-06 16:03:59

這是現在的東西，你可以在谷歌地圖API中做日前，谷歌添加的符號爲折線，讓您使用SVG風格你行： https://developers.google.com/maps/documentation/javascript/overlays#Symbols

來源

2012-08-06 18:14:56

是的，我知道，現在我需要的是一條橢圓線;） – Himmators 2012-08-06 19:52:37

哦，nm這看起來很有希望！ – Himmators 2012-08-06 20:07:17

試試這個（創建一個名爲blackpixel.bmp的1x1 bmp，並將其添加到您將創建的包含以下代碼的htm文件旁邊，應該幫助您獲得您。需要我發現它here：

<HTML> 
<HEAD> 
<TITLE> 
Ellipse example drawn to the screen, using a one-pixel black .bmp 
image, for jackshu-ga 
</TITLE> 
<script type="text/javascript"> 

function draw() 
{ 
coords=ellipseMaker(dataIn.foci1Top.value,dataIn.foci1Left.value,dataIn.foci2Top.value,dataIn.foci2Left.value,dataIn.semiMinor.value) 

for(i=0;i<coords.length;i++) 
    { 
    document.write("<img src='blackpixel.bmp' id='pixel"+i+"' style='container: positioned; position: absolute; top: 50; left: 800'>") 
    } 

for(j=1;j<coords.length;j++) 
    { 
    document.images[j].style.top=coords[j][0] 
    document.images[j].style.left=coords[j][1] 
    } 
} 

function ellipseMaker(foci1Top, foci1Left, foci2Top, foci2Left, 
semiMinor, jumpBy, streamline, increaseUnit, dontPopOutLast){ 
/* Requires gen 4 browsers: using concat(), shift(), pop() 
* My thanks to G.E. Ivey from the sci/sci.math newsgroup 
* who helped with the (for me) complex ellipse translation/rotation 
formula. 
*/ 
//validate: 
semiMinor=(semiMinor && !isNaN(parseFloat(semiMinor)) && 
parseFloat(semiMinor)>0)? 
parseFloat(semiMinor):0.5; 
foci1Top=(foci1Top && !isNaN(parseFloat(foci1Top)))? 
parseFloat(foci1Top):0; 
foci1Left=(foci1Left && !isNaN(parseFloat(foci1Left)))? 
parseFloat(foci1Left):0; 
foci2Top=(foci2Top && !isNaN(parseFloat(foci2Top)))? 
parseFloat(foci2Top):0; 
foci2Left=(foci2Left && !isNaN(parseFloat(foci2Left)))? 
parseFloat(foci2Left):0; 
increaseUnit=(increaseUnit && !isNaN(parseFloat(increaseUnit)))? 
Math.abs(parseFloat(increaseUnit)):0.5; 
jumpBy=(jumpBy && !isNaN(parseFloat(jumpBy)))? parseFloat(jumpBy):0; 
streamline= (streamline+""=="0")?0:1; 
//initialize: 
var major=Math.round((Math.sqrt(
Math.pow(
(Math.max(foci1Top, foci2Top)-Math.min(foci1Top, foci2Top)) 
,2)+ 
Math.pow(
(Math.max(foci1Left, foci2Left)-Math.min(foci1Left, foci2Left)) 
,2) 
))*1000)/1000; 
    /* an exception: no major axis length! : */ 
    var noMajor=0; 
    if(!major){major=Math.round((semiMinor*2)*100)/100; 
    noMajor=1;}; 
var center=new Array(
Math.round((((foci1Top+foci2Top)*0.5)) *100)/100, 
Math.round((((foci1Left+foci2Left)*0.5)) *100)/100 
); 
var semiMajor=Math.round((major/2)*1000)/1000; 
while(increaseUnit>semiMajor){/*validate more*/ 
increaseUnit-=semiMajor; 
increaseUnit=Math.round(increaseUnit*10)/10; 
}; 
var quadrant1=new Array(0); 
var quadrant2=new Array(0); 
var quadrant3=new Array(0); 
var quadrant4=new Array(0); 
var output=new Array(0); 
//sine, cosine: are ratios/a side length: 
var thetaCos=(Math.max(foci1Left,foci2Left) - 
Math.min(foci1Left,foci2Left))/major; 
var thetaSin=(Math.max(foci1Top,foci2Top) - 
Math.min(foci1Top,foci2Top))/major; 
var SMsm=semiMajor/semiMinor; 
var smSM=semiMinor/semiMajor; 
var prevY=0; 
//run: 
for(var x=semiMajor, y=0; x>=0; x-=increaseUnit, y+=increaseUnit){ 
if(x<0){x=0;}; 
if(y>semiMinor){y=semiMinor;}; 
    /* used formula for Y: | (b/h) * SQRT(POW(h)-POW(x)) | */ 
    var Y=Math.round(
Math.abs(
(smSM)*(Math.sqrt(Math.pow(semiMajor,2) - Math.pow(x,2))) 
)*1000 
)/1000; 
    var X=Math.round((x*1000))/1000; 
    //streamline? 
    if(!noMajor && streamline && ((Y-prevY)>increaseUnit)){ 
    Y=Math.round((y*1000))/1000; 
    X=Math.round(
Math.abs(
(SMsm)*(Math.sqrt(Math.pow(semiMinor,2) - Math.pow(y,2))) 
)*1000 
)/1000; 
x=X; 
    } 
    prevY=Y; 
    //build path: 
var q1=++quadrant1.length-1; 
var q2=++quadrant2.length-1; 
var q3=++quadrant3.length-1; 
var q4=++quadrant4.length-1; 
    /* formulas used below for ellipse position translation from center 
in Origin (G.E. Ivey): 
    x'= x*cos(theta)+ y*sin(theta) 
    y'= -x*sin(theta)+ y*cos (theta) 
    then, I reversed signs accordingly to the 4 quadrants. 
    */ 
var xSin=X*thetaSin; 
var ySin=Y*thetaSin; 
var xCos=X*thetaCos; 
var yCos=Y*thetaCos; 
quadrant1[q1]=new Array(2); 
    quadrant1[q1][0]= Math.round((((-xSin) + yCos) + center[0]) 
*10)/10; 
    quadrant1[q1][1]= Math.round(((xCos + ySin) + center[1]) *10)/10; 
quadrant2[q2]=new Array(2); 
    quadrant2[q2][0]= Math.round(((xSin + yCos) + center[0]) *10)/10; 
    quadrant2[q2][1]= Math.round((((-xCos) + ySin) + center[1]) 
*10)/10; 
quadrant3[q3]=new Array(2); 
    quadrant3[q3][0]= Math.round(((xSin + (-yCos)) + center[0]) 
*10)/10; 
    quadrant3[q3][1]= Math.round((((-xCos) + (-ySin)) + center[1]) 
*10)/10; 
quadrant4[q4]=new Array(2); 
    quadrant4[q4][0]= Math.round((((-xSin) + (-yCos)) + center[0]) 
*10)/10; 
    quadrant4[q4][1]= Math.round(((xCos + (-ySin)) + center[1]) 
*10)/10; 
} 
quadrant2=quadrant2.reverse(); 
quadrant2.shift(); 
quadrant3.shift(); 
quadrant4=quadrant4.reverse(); 
quadrant4.shift(); 
output=output.concat(quadrant1, quadrant2, quadrant3, quadrant4); 
if(!dontPopOutLast){output.pop();}; 
if(jumpBy){ 
    if(jumpBy>output.length){ 
    var fakeOutput=new Array(0); 
    fakeOutput[++fakeOutput.length-1]=output[output.length-1]; 
    return fakeOutput;}; 
var jumpedOutput=new Array(0); 
    for(var j=0; j<output.length; j+=jumpBy){ 
    if((j+jumpBy) > output.length-1){ 
    jumpedOutput[++jumpedOutput.length-1]=output[output.length-1]; 
    break; 
    } 
    jumpedOutput[++jumpedOutput.length-1]=output[j]; 
    } 
return jumpedOutput;} 
return output; 
/*keep this comment to reuse freely 
http://www.unitedscripters.com */} 
</script> 

</HEAD> 
<BODY> 
<H3>Fill out the information in the boxes, then click 'draw'</H3> 
Note: you need a 1 x 1 pixel black bitmap (.bmp) image in the same 
directory as this file, for it to work.<p> 
<FORM id="dataIn"> 
<table cellspacing="0" cellpadding="0"> 
<tr><td>Pixels down the screen, leftmost ellipse tip: </td><td><input 
type="text" length=5 value="200" id="foci2Top"></td> 
<tr><td>Pixels across the screen, leftmost ellipse tip: 
</td><td><input type="text" length=5 value="100" id="foci2Left"></td> 
<tr><td>Pixels down the screen, rightmost ellipse tip: 
</td><td><input type="text" length=5 value="200" id="foci1Top"></td> 
<tr><td>Pixels across the screen, rightmost ellipse tip: 
</td><td><input type="text" length=5 value="300" id="foci1Left"></td> 
<tr><td>Enter half the 'squashed' width of the ellipse: 
</td><td><input type="text" length=5 value="130"id="semiMinor"></td> 
<tr><td><input type=button value="Draw the ellipse" onClick = 
"draw()"></td><td></td> 
</tr> 
</form> 


</body> 
</html>

來源

2012-08-06 16:32:13

這看起來更像是代碼，而不是什麼應該是nessecary – Himmators 2012-08-06 20:06:16

那麼你可以從中提取你需要的東西，它看起來好像它是某種樣本形式或某種東西來幫助獲得你正在尋找的大小。我相信你可能會找到一個較輕的代碼示例，也許10行，我只花了10分鐘搜索。 – 2012-08-06 20:30:53

基於焦點點在座標系上畫一條橢圓線？

回答

相關問題