i want use javascript to draw an ellipse and line,can someone tell me how to do? |
Request for Question Clarification by
gan-ga
on
02 Nov 2002 18:20 PST
Hello jackshu,
There are a few different ways of doing this. It all depends on what
your application is.
I could show you how to do it in the Microsoft Internet Explorer 5
browser, using a very small .gif image, and place the ellipse and line
wherever you wanted on the page; you could in fact move them around in
response to user actions.
Perhaps that wasn't what you had in mind.. can you tell us a little
more about what you want to do, so that myself or another researcher
can provide you with an answer that closely fits your requirement?
Best regards,
gan
|
Request for Question Clarification by
gan-ga
on
02 Nov 2002 20:25 PST
Hello again jackshu,
The following URL displays some nice JavaScript code which will
provide coordinates for plotting an ellipse, given the position of the
two foci and the semi-minor axis length (half the 'squashed' width).
The code is testable at the URL, however it exists only in Google's
cache. The URL is therefore long, and may break after posting - if so,
you may need to copy-paste it into your browser's address: bar, rather
than click on it:
Scripting: The Circle and Ellipse makers:
http://216.239.51.100/search?q=cache:4Q2BcLDtpTwC:www.unitedscripters.com/scripts/math2.html+ellipse+javascript&hl=en&ie=UTF-8#2
Let me know if this code would be acceptable in an answer, or wether
you would like further information regarding drawing an ellipse.
|
Request for Question Clarification by
gan-ga
on
02 Nov 2002 20:34 PST
Unfortunately that link will not work, it redirects immediately.
Use this:
http://www.unitedscripters.com/scripts/math2.html
Best regards
gan
|
Clarification of Question by
jackshu-ga
on
03 Nov 2002 02:23 PST
hello,gan
may you tell me how can i put a small .gif image with an ellipse?
i know this idea about it but i dont know how to do , can you teach me?
THX
|
Request for Question Clarification by
gan-ga
on
03 Nov 2002 13:15 PST
Hello jackshu,
I'm working on something for you; I will post back as soon as possible.
Best regards,
gan
|
Request for Question Clarification by
gan-ga
on
03 Nov 2002 21:42 PST
Hello jackshu,
Here is a page I have put together for you, which will draw an ellipse
using a single-pixel black bitmap (.bmp) image, which you will need to
provide and place in the same directory as the page for it to work.
Copy and paste the code into an empty plain-text document, save it as
an .html file, and try it out - it is only an example, a little 'rough
around the edges', but if it is something like the kind of code you
are looking for, I shall try and explain it for you.
Let me know, if it is useful,
best regards,
gan
<HTML>
<HEAD>
<TITLE>
Ellipse example drawn to the screen, using a one-pixel black .bmp
image, for jackshu-ga
</TITLE>
</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>
<script>
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>
</body>
</html>
|
Request for Question Clarification by
gan-ga
on
03 Nov 2002 22:08 PST
Apologies jackshu, in the last posting, some lines in the code became
truncated, rendering the code unusable.
I am hoping the following, pre-truncated code will not break on
posting:
<HTML>
<HEAD>
<TITLE>
Ellipse example drawn to screen, using one-pixel black .gif image
</TITLE>
</HEAD>
<BODY>
<H3>Fill out the information, then click 'draw'</H3>
Note: you need a 1 x 1 pixel black bitmap (.bmp)
image in the same directory as this file.<p>
<FORM id="dt">
<table cellspacing="0" cellpadding="0">
<tr><td>Pixels down the screen, leftmost ellipse tip: </td>
<td><input type="text" length=5 value="200" id="f2T"></td>
<tr><td>Pixels across the screen, leftmost ellipse tip: </td>
<td><input type="text" length=5 value="100" id="f2L"></td>
<tr><td>Pixels down the screen, rightmost ellipse tip: </td>
<td><input type="text" length=5 value="200" id="f1T"></td>
<tr><td>Pixels across the screen, rightmost ellipse tip: </td>
<td><input type="text" length=5 value="300" id="f1L"></td>
<tr><td>Enter half the 'squashed' width of the ellipse: </td>
<td><input type="text" length=5 value="130"id="sM"></td>
<tr><td><input type=button value="Draw the ellipse" onClick =
"draw()">
</td>
<td> </td>
</tr>
</form>
<script>
function draw()
{
coords=eM(dt.f1T.value,dt.f1L.value,dt.f2T.value,dt.f2L.value,dt.sM.value)
for(i=0;i<coords.length;i++)
{
stylestring="style='container: positioned; position: absolute; top:
50; left: 800'"
document.write("<img src='blackpixel.bmp'
id='pixel"+i+"'"+stylestring+">")
}
for(j=1;j<coords.length;j++)
{
document.images[j].style.top=coords[j][0]
document.images[j].style.left=coords[j][1]
}
}
function eM(f1T, f1L, f2T, f2L, sM, jB, sln, incU, dpol){
/* 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:
sM=(sM && !isNaN(parseFloat(sM)) && parseFloat(sM)>0)?
parseFloat(sM):0.5;
f1T=(f1T && !isNaN(parseFloat(f1T)))? parseFloat(f1T):0;
f1L=(f1L && !isNaN(parseFloat(f1L)))? parseFloat(f1L):0;
f2T=(f2T && !isNaN(parseFloat(f2T)))? parseFloat(f2T):0;
f2L=(f2L && !isNaN(parseFloat(f2L)))? parseFloat(f2L):0;
incU=(incU && !isNaN(parseFloat(incU)))?
Math.abs( parseFloat(incU) ):0.5;
jB=(jB && !isNaN(parseFloat(jB)))? parseFloat(jB):0;
sln= (sln+""=="0")?0:1;
//initialize:
var major=Math.round( (Math.sqrt(
Math.pow(
(Math.max(f1T, f2T)-Math.min(f1T, f2T))
,2)+
Math.pow(
(Math.max(f1L, f2L)-Math.min(f1L, f2L))
,2)
))*1000 )/1000;
/* an exception: no major axis length! : */
var noMajor=0;
if(!major){major=Math.round( (sM*2)*100 )/100;
noMajor=1;};
var center=new Array(
Math.round( (((f1T+f2T)*0.5)) *100)/100,
Math.round( (((f1L+f2L)*0.5)) *100)/100
);
var semiMajor=Math.round((major/2)*1000)/1000;
while(incU>semiMajor){/*validate more*/
incU-=semiMajor;
incU=Math.round( incU*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(f1L,f2L) - Math.min(f1L,f2L))/major;
var thetaSin=(Math.max(f1T,f2T) - Math.min(f1T,f2T))/major;
var SMsm=semiMajor/sM;
var smSM=sM/semiMajor;
var prevY=0;
//run:
for(var x=semiMajor, y=0; x>=0; x-=incU, y+=incU){
if(x<0){x=0;};
if(y>sM){y=sM;};
/* 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;
//sln?
if(!noMajor && sln && ( (Y-prevY)>incU) ){
Y=Math.round((y*1000))/1000;
X=Math.round(
Math.abs(
(SMsm)*(Math.sqrt( Math.pow(sM,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(!dpol){output.pop();};
if(jB){
if(jB>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+=jB){
if((j+jB) > 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>
</body>
</html>
|
Clarification of Question by
jackshu-ga
on
10 Nov 2002 19:47 PST
gan, thank you tell me the java code,but i test it,and i cant run it
,it has some problem i couldnt solve.
i cant find where the problem is , could help me one more time, test
it again?
|
Request for Question Clarification by
gan-ga
on
11 Nov 2002 03:47 PST
Hello again jackshu,
I'm working on a step-by-step for you, so that you should find it
easier to obtain a working copy of the javascript code to study.
I'm aware that you must be having problems running the code as posted
- this is due to the posting process itself having cut some lines of
code in two, where they need to be all on one line.
I shall post back as soon as I'm confident that I have a method you
can easily follow.
Best regards,
gan.
|
Request for Question Clarification by
gan-ga
on
12 Nov 2002 08:58 PST
Hello jackshu,
You may like to visit the following page:
Demonstration: Using JavaScript to draw an ellipse:
http://www.beginnerprogrammer.com/jackshu.html
If you use your browser's 'View > Souce' menu, you should be
able to examine the code and functions used to create and
display the ellipse. Also, a link is provided to the original
author's page, where he provides a discussion of his ellipseMaker()
javascript function.
I hope this helps; let me know if it brings you success in your
application.
Best regards,
gan
|
