jmrker
04-21-2011, 09:41 PM
I needed a way to draw a straight line over an image, but I had difficulty in finding a way that I could understand. This is not the most efficient method, but it did fit my needs for instruction purposes. I thought others might find it a useful starting point should they need a simplified application with similar needs. :thumbsup:
(Ignore the image or use your own.
It is useful in the design of a spectacle correction to minimize the magnification effects when the prescription differs significantly between the two eyes).
I would be interested in constructive comments.
<html>
<head>
<title> Anisokonia Nomograph </title>
<script type="text/javascript">
var cx = 0; var cy = 0; // current mouse position
var xs = 0; var ys = 0; // position on first click (setPosFlag = -1)
var imgString =
'<img id="shape" height:"700px" width="600px" src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">';
function $_(IDS) { return document.getElementById(IDS); }
// From: http://www.p01.org/releases/Drawing_lines_in_JavaScript/
function DrawLine() {
var Ax = xs; var Ay = ys;
var Bx = cx; var By = cy;
var bla = ""
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ ) {
bla += "<div style='position:absolute;left:"
+ Math.round( Ax+(Bx-Ax)*i/lineLength ) +"px;top:"
+ Math.round( Ay+(By-Ay)*i/lineLength )
+"px;width:2px;height:2px;background:#f00'></div>";
}
$_('nomograph').innerHTML += bla;
}
var xpos = 0; var ypos = 0;
function followMe(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
xpos = evt.clientX; cx = xpos;
ypos = evt.clientY; cy = ypos;
if (setPosFlag == 0) {
$_('nomograph').innerHTML = imgString;
DrawLine();
}
}
function setPos() {
switch (setPosFlag) {
case -1:
xs = xpos; // $_('SxPos').value = xpos;
ys = ypos; // $_('SyPos').value = ypos;
setPosFlag = 0; break;
case 0:
$_('nomograph').innerHTML = imgString;
DrawLine();
setPosFlag = -1; break;
default: break;
}
}
document.onmousemove = followMe;
var setPosFlag = -1;
function ClearInfo() {
$_('nomograph').innerHTML = imgString;
setPosFlag = -1;
}
</script>
</head>
<body>
<table border="1">
<tr><td>
<div id="nomograph" onclick="setPos()">
<img id="shape" height:"700px" width="600px"
src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">
</div>
</td><td>
<button onclick="ClearInfo()">Clear</button>
</td></tr>
</table>
</body>
</html>
(Ignore the image or use your own.
It is useful in the design of a spectacle correction to minimize the magnification effects when the prescription differs significantly between the two eyes).
I would be interested in constructive comments.
<html>
<head>
<title> Anisokonia Nomograph </title>
<script type="text/javascript">
var cx = 0; var cy = 0; // current mouse position
var xs = 0; var ys = 0; // position on first click (setPosFlag = -1)
var imgString =
'<img id="shape" height:"700px" width="600px" src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">';
function $_(IDS) { return document.getElementById(IDS); }
// From: http://www.p01.org/releases/Drawing_lines_in_JavaScript/
function DrawLine() {
var Ax = xs; var Ay = ys;
var Bx = cx; var By = cy;
var bla = ""
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ ) {
bla += "<div style='position:absolute;left:"
+ Math.round( Ax+(Bx-Ax)*i/lineLength ) +"px;top:"
+ Math.round( Ay+(By-Ay)*i/lineLength )
+"px;width:2px;height:2px;background:#f00'></div>";
}
$_('nomograph').innerHTML += bla;
}
var xpos = 0; var ypos = 0;
function followMe(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
xpos = evt.clientX; cx = xpos;
ypos = evt.clientY; cy = ypos;
if (setPosFlag == 0) {
$_('nomograph').innerHTML = imgString;
DrawLine();
}
}
function setPos() {
switch (setPosFlag) {
case -1:
xs = xpos; // $_('SxPos').value = xpos;
ys = ypos; // $_('SyPos').value = ypos;
setPosFlag = 0; break;
case 0:
$_('nomograph').innerHTML = imgString;
DrawLine();
setPosFlag = -1; break;
default: break;
}
}
document.onmousemove = followMe;
var setPosFlag = -1;
function ClearInfo() {
$_('nomograph').innerHTML = imgString;
setPosFlag = -1;
}
</script>
</head>
<body>
<table border="1">
<tr><td>
<div id="nomograph" onclick="setPos()">
<img id="shape" height:"700px" width="600px"
src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">
</div>
</td><td>
<button onclick="ClearInfo()">Clear</button>
</td></tr>
</table>
</body>
</html>