javascript - 焦点に基づく座標系で楕円形の線を描画しますか?

Question

Googleマップで破線を引こうとしているのですが、eshape.jsが使えません。座標系で楕円を近似する点の配列を作成する必要があります。あくまで表示用なので、それほど正確である必要はありません。

誰かが数学を説明することができれば、それは問題ありません。JavaScript で適用した場合の追加クレジット ;)

score 2 · Accepted Answer

これは、Google Maps API 内で実行できるようになりました。最近、Google はポリラインにシンボルを追加し、SVG を使用して線のスタイルを設定できるようにしました: https://developers.google.com/maps/documentation/javascript/overlays#Symbols

score 1 · Accepted Answer

これを試してみてください (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>

javascript - 焦点に基づく座標系で楕円形の線を描画しますか?

2 に答える 2

Related

Reference