Entry
How do you draw straight lines?
Feb 16th, 2001 05:43
Martin Honnen,
The following code works with NN4, NN6 (though on some page loadings I
got unexplainable errors), IE4+ and Opera 5; the lines are plotted
point by point positioning a layer with the line color as the
background color at every point. This is very memory consuming and
demanding on the browsers.
<HTML>
<HEAD>
<TITLE>
Drawing of straight lines
</TITLE>
<SCRIPT>
var loaded = false;
function Line (args) {
if (args)
for (var p in args)
this[p] = args[p];
this.id = Line.lines.length;
Line.lines[this.id] = this;
this.createLine();
}
function Line_createLine () {
this.layerID = 'L' + this.id;
this.cEnd = {x: Math.max(this.from.x, this.to.x) + this.width, y:
Math.max(this.from.y, this.to.y) + this.width};
this.constant = (this.to.x * this.from.y - this.from.x * this.to.y) /
(this.to.x - this.from.x);
this.gradient = (this.to.y - this.constant) / this.to.x;
this.fun = function (x) { return this.gradient * x + this.constant; };
if (!loaded) {
this.writeCSS();
this.writeHTML();
}
}
Line.prototype.createLine = Line_createLine;
function Line_writeCSS () {
var html = '';
html += '<STYLE>';
html += '#' + this.layerID + ' {';
html += ' position: absolute;';
html += ' left: 0px; top: 0px;';
html += ' width: ' + this.cEnd.x + 'px;'
html += ' height: ' + this.cEnd.y + 'px;';
if (document.layers)
html += ' clip:rect(0px ' + this.cEnd.x + 'px ' + this.cEnd.y
+ 'px 0px);';
html += '}';
for (var x = this.from.x; x <= this.to.x; x += this.width) {
var y = Math.round(this.fun(x));
html += '#' + this.layerID + 'P' + x + ' {';
html += ' position: absolute;';
html += ' left: ' + x + 'px;';
html += ' top: ' + y + 'px;';
if (document.layers)
html += ' layer-background-color: ' + this.color + ';';
else
html += ' background-color: ' + this.color + ';';
html += ' width: ' + this.width + 'px;';
html += ' height: ' + this.width + 'px;';
html += ' clip: rect(0px ' + this.width + 'px ' + this.width +
'px 0px);';
html += '}';
}
html += '<\/STYLE>';
document.write(html);
}
Line.prototype.writeCSS = Line_writeCSS;
function Line_writeHTML () {
var html = '';
html += '<DIV ID="' + this.layerID + '">';
for (var x = this.from.x; x <= this.to.x; x += this.width)
html += '<DIV ID="' + this.layerID + 'P' + x + '"><\/DIV>';
html += '<\/DIV>';
document.write(html);
this.initLayer();
}
Line.prototype.writeHTML = Line_writeHTML;
function Line_setVisibility (visibility) {
if (!this.layer)
this.initLayer();
if (document.layers)
this.layer.visibility = visibility == 'visible' ? 'show' : 'hide';
else
this.layer.style.visibility = visibility;
}
Line.prototype.setVisibility = Line_setVisibility;
function Line_toggleVisibility () {
if (!this.layer)
this.initLayer();
if (document.layers) {
if (this.layer.visibility == 'hide')
this.layer.visibility = 'show';
else
this.layer.visibility = 'hide';
}
else {
if (this.layer.style.visibility.toLowerCase() == 'hidden')
this.layer.style.visibility = 'visible';
else
this.layer.style.visibility = 'hidden';
}
}
Line.prototype.toggleVisibility = Line_toggleVisibility;
function Line_initLayer () {
if (document.layers)
this.layer = document[this.layerID];
else if (document.all)
this.layer = document.all[this.layerID];
else if (document.getElementById)
this.layer = document.getElementById(this.layerID);
}
Line.prototype.initLayer = Line_initLayer;
Line.prototype.cStart = {x: 0, y: 0};
Line.prototype.from = {x: 0, y: 0};
Line.prototype.to = {x: 100, y: 100};
Line.prototype.color = 'green';
Line.prototype.width = 2;
Line.lines = new Array();
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
var l1 = new Line ();
if (document.all && !window.opera)
var to = {x: document.body.clientWidth, y:
document.body.clientHeight };
else
var to = {x: window.innerWidth, y: window.innerHeight };
var l2 = new Line ({
to: to,
color: 'red',
width: 3
});
if (document.all && !window.opera) {
var from = {x: 0, y: document.body.clientHeight};
var to = {x: document.body.clientWidth, y: 0};
}
else {
var from = {x: 0, y: window.innerHeight};
var to = {x: window.innerWidth, y: 0};
}
var l3 = new Line ({
from: from,
to: to,
color: 'blue',
width: 3
});
</SCRIPT>
<STYLE>
#gui {
position: absolute;
left: 10px; top: 180px;
z-index: 10;
}
</STYLE>
<DIV ID="gui">
<A HREF="javascript: void 0"
ONCLICK="l1.toggleVisibility();
return false;"
>
line 1 toggle visibility
</A>
<BR>
<A HREF="javascript: void 0"
ONCLICK="l2.toggleVisibility();
return false;"
>
line 2 toggle visibility
</A>
<BR>
<A HREF="javascript: void 0"
ONCLICK="l3.toggleVisibility();
return false;"
>
line 3 toggle visibility
</A>
</DIV>
</BODY>
</HTML>
You can find a working example at
http://home.t-online.de/home/martin.honnen/dhtml/drawLines.html
See also the line chart knowledge base enty at
http://www.faqts.com/knowledge_base/view.phtml/aid/1538/fid/128
