Draw An Eliptical Line On A Coordinate System Based On Focla Points?
I'm trying to draw a dashed line on a google map, so I can't use eshape.js. I need to create an array of points that approximate an elipse in a coordinate system. It's just for dis
Solution 1:
This is now something you can do within the Google Maps API. Recently, Google added Symbols to Polylines, allowing you to use SVG to style your lines: https://developers.google.com/maps/documentation/javascript/overlays#Symbols
Solution 2:
Give this a try (create a 1x1 bmp called blackpixel.bmp and add it next to the htm file you will create to contain the following code, should help you get waht you need. I found it here:
<HTML><HEAD><TITLE>
Ellipse example drawn to the screen, using a one-pixel black .bmp
image, for jackshu-ga
</TITLE><scripttype="text/javascript">functiondraw()
{
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]
}
}
functionellipseMaker(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=newArray(
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=newArray(0);
var quadrant2=newArray(0);
var quadrant3=newArray(0);
var quadrant4=newArray(0);
var output=newArray(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]=newArray(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]=newArray(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]=newArray(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]=newArray(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=newArray(0);
fakeOutput[++fakeOutput.length-1]=output[output.length-1];
return fakeOutput;};
var jumpedOutput=newArray(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><FORMid="dataIn"><tablecellspacing="0"cellpadding="0"><tr><td>Pixels down the screen, leftmost ellipse tip: </td><td><inputtype="text"length=5value="200"id="foci2Top"></td><tr><td>Pixels across the screen, leftmost ellipse tip:
</td><td><inputtype="text"length=5value="100"id="foci2Left"></td><tr><td>Pixels down the screen, rightmost ellipse tip:
</td><td><inputtype="text"length=5value="200"id="foci1Top"></td><tr><td>Pixels across the screen, rightmost ellipse tip:
</td><td><inputtype="text"length=5value="300"id="foci1Left"></td><tr><td>Enter half the 'squashed' width of the ellipse:
</td><td><inputtype="text"length=5value="130"id="semiMinor"></td><tr><td><inputtype=buttonvalue="Draw the ellipse"onClick =
"draw()"></td><td></td></tr></form></body></html>
Post a Comment for "Draw An Eliptical Line On A Coordinate System Based On Focla Points?"