我试图在谷歌地图上画一条虚线，所以我不能使用 eshape.js。我需要在坐标系中创建一个近似椭圆的点数组。它只是为了显示，所以它不必那么精确。
如果有人能解释一下数学就好了。如果您在 javascript 中应用它，将获得额外的积分；)
问问题
321 次
2 回答
2
现在，您可以在 Google Maps API 中执行此操作。最近，Google 为折线添加了符号，允许您使用 SVG 来设置线条样式： https ://developers.google.com/maps/documentation/javascript/overlays#Symbols
于 2012-08-06T18:14:56.213 回答
1
试一试（创建一个名为 blackpixel.bmp 的 1x1 bmp 并将其添加到您将创建的包含以下代码的 htm 文件旁边，应该可以帮助您获得所需的内容。我在这里找到了它：
<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-06T16:32:13.977 回答