收藏http://www.ajaxbbs.net/test/wz_jsgraphics/index.htm
確實很強大
下來研究研究
JS
/* This notice must be untouched at all times.
wz_jsgraphics.js v. 3.03
The latest version is available at
http://www.walterzorn.com
or http://www.devira.com
or http://www.walterzorn.de
Copyright (c) 2002-2004 Walter Zorn. All rights reserved.
Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
Last modified: 28. 1. 2008
Performance optimizations for Internet Explorer
by Thomas Frank and John Holdsworth.
fillPolygon method implemented by Matthieu Haller.
High Performance JavaScript Graphics Library.
Provides methods
- to draw lines, rectangles, ellipses, polygons
with specifiable line thickness,
- to fill rectangles, polygons, ellipses and arcs
- to draw text.
NOTE: Operations, functions and branching have rather been optimized
to efficiency and speed than to shortness of source code.
LICENSE: LGPL
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA,
or see http://www.gnu.org/copyleft/lesser.html
*/
var jg_ok, jg_ie, jg_fast, jg_dom, jg_moz;
function _chkDHTM(x, i)
{
x = document.body || null;
jg_ie = x && typeof x.insertAdjacentHTML != "undefined" && document.createElement;
jg_dom = (x && !jg_ie &&
typeof x.appendChild != "undefined" &&
typeof document.createRange != "undefined" &&
typeof (i = document.createRange()).setStartBefore != "undefined" &&
typeof i.createContextualFragment != "undefined");
jg_fast = jg_ie && document.all && !window.opera;
jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";
jg_ok = !!(jg_ie || jg_dom);
}
function _pntCnvDom()
{
var x = this.wnd.document.createRange();
x.setStartBefore(this.cnv);
x = x.createContextualFragment(jg_fast? this._htmRpc() : this.htm);
if(this.cnv) this.cnv.appendChild(x);
this.htm = "";
}
function _pntCnvIe()
{
if(this.cnv) this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast? this._htmRpc() : this.htm);
this.htm = "";
}
function _pntDoc()
{
this.wnd.document.write(jg_fast? this._htmRpc() : this.htm);
this.htm = '';
}
function _pntN()
{
;
}
function _mkDiv(x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:' + w + 'px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + this.color +
(!jg_moz? ';overflow:hidden' : '')+
';"><\/div>';
}
function _mkDivIe(x, y, w, h)
{
this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}
function _mkDivPrt(x, y, w, h)
{
this.htm += '<div style="position:absolute;'+
'border-left:' + w + 'px solid ' + this.color + ';'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:0px;'+
'height:' + h + 'px;'+
'clip:rect(0,'+w+'px,'+h+'px,0);'+
'background-color:' + this.color +
(!jg_moz? ';overflow:hidden' : '')+
';"><\/div>';
}
var _regex = /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;
function _htmRpc()
{
return this.htm.replace(
_regex,
'<div style="overflow:hidden;position:absolute;background-color:'+
'$1;left:$2;top:$3;width:$4;height:$5"></div>\n');
}
function _htmPrtRpc()
{
return this.htm.replace(
_regex,
'<div style="overflow:hidden;position:absolute;background-color:'+
'$1;left:$2;top:$3;width:$4;height:$5;border-left:$4px solid $1"></div>\n');
}
function _mkLin(x1, y1, x2, y2)
{
if(x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1;
if(dx >= dy)
{
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while(dx > 0)
{--dx;
++x;
if(p > 0)
{
this._mkDiv(ox, y, x-ox, 1);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
this._mkDiv(ox, y, x2-ox+1, 1);
}
else
{
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if(y2 <= y1)
{
while(dy > 0)
{--dy;
if(p > 0)
{
this._mkDiv(x++, y, 1, oy-y+1);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
this._mkDiv(x2, y2, 1, oy-y2+1);
}
else
{
while(dy > 0)
{--dy;
y += yIncr;
if(p > 0)
{
this._mkDiv(x++, oy, 1, y-oy);
p += pru;
oy = y;
}
else p += pr;
}
this._mkDiv(x2, oy, 1, y2-oy+1);
}
}
}
function _mkLin2D(x1, y1, x2, y2)
{
if(x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1;
var s = this.stroke;
if(dx >= dy)
{
if(dx > 0 && s-3 > 0)
{
var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.ceil(s/2);
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx,
ox = x;
while(dx > 0)
{--dx;
++x;
if(p > 0)
{
this._mkDiv(ox, y, x-ox+ad, _s);
y += yIncr;
p += pru;
ox = x;
}
else p += pr;
}
this._mkDiv(ox, y, x2-ox+ad+1, _s);
}
else
{
if(s-3 > 0)
{
var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;
}
else var _s = s;
var ad = Math.round(s/2);
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy,
oy = y;
if(y2 <= y1)
{
++ad;
while(dy > 0)
{--dy;
if(p > 0)
{
this._mkDiv(x++, y, _s, oy-y+ad);
y += yIncr;
p += pru;
oy = y;
}
else
{
y += yIncr;
p += pr;
}
}
this._mkDiv(x2, y2, _s, oy-y2+ad);
}
else
{
while(dy > 0)
{--dy;
y += yIncr;
if(p > 0)
{
this._mkDiv(x++, oy, _s, y-oy+ad);
p += pru;
oy = y;
}
else p += pr;
}
this._mkDiv(x2, oy, _s, y2-oy+ad+1);
}
}
}
function _mkLinDott(x1, y1, x2, y2)
{
if(x1 > x2)
{
var _x2 = x2;
var _y2 = y2;
x2 = x1;
y2 = y1;
x1 = _x2;
y1 = _y2;
}
var dx = x2-x1, dy = Math.abs(y2-y1),
x = x1, y = y1,
yIncr = (y1 > y2)? -1 : 1,
drw = true;
if(dx >= dy)
{
var pr = dy<<1,
pru = pr - (dx<<1),
p = pr-dx;
while(dx > 0)
{--dx;
if(drw) this._mkDiv(x, y, 1, 1);
drw = !drw;
if(p > 0)
{
y += yIncr;
p += pru;
}
else p += pr;
++x;
}
}
else
{
var pr = dx<<1,
pru = pr - (dy<<1),
p = pr-dy;
while(dy > 0)
{--dy;
if(drw) this._mkDiv(x, y, 1, 1);
drw = !drw;
y += yIncr;
if(p > 0)
{
++x;
p += pru;
}
else p += pr;
}
}
if(drw) this._mkDiv(x, y, 1, 1);
}
function _mkOv(left, top, width, height)
{
var a = (++width)>>1, b = (++height)>>1,
wod = width&1, hod = height&1,
cx = left+a, cy = top+b,
x = 0, y = b,
ox = 0, oy = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,
st = (aa2>>1)*(1-(b<<1)) + bb2,
tt = (bb2>>1) - aa2*((b<<1)-1),
w, h;
while(y > 0)
{
if(st < 0)
{
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0)
{
st += bb2*((x<<1)+3) - aa4*(y-1);
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
w = x-ox;
h = oy-y;
if((w&2) && (h&2))
{
this._mkOvQds(cx, cy, x-2, y+2, 1, 1, wod, hod);
this._mkOvQds(cx, cy, x-1, y+1, 1, 1, wod, hod);
}
else this._mkOvQds(cx, cy, x-1, oy, w, h, wod, hod);
ox = x;
oy = y;
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
}
w = a-ox+1;
h = (oy<<1)+hod;
y = cy-oy;
this._mkDiv(cx-a, y, w, h);
this._mkDiv(cx+ox+wod-1, y, w, h);
}
function _mkOv2D(left, top, width, height)
{
var s = this.stroke;
width += s+1;
height += s+1;
var a = width>>1, b = height>>1,
wod = width&1, hod = height&1,
cx = left+a, cy = top+b,
x = 0, y = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,
st = (aa2>>1)*(1-(b<<1)) + bb2,
tt = (bb2>>1) - aa2*((b<<1)-1);
if(s-4 < 0 && (!(s-2) || width-51 > 0 && height-51 > 0))
{
var ox = 0, oy = b,
w, h,
pxw;
while(y > 0)
{
if(st < 0)
{
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0)
{
st += bb2*((x<<1)+3) - aa4*(y-1);
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
w = x-ox;
h = oy-y;
if(w-1)
{
pxw = w+1+(s&1);
h = s;
}
else if(h-1)
{
pxw = s;
h += 1+(s&1);
}
else pxw = h = s;
this._mkOvQds(cx, cy, x-1, oy, pxw, h, wod, hod);
ox = x;
oy = y;
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
}
this._mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);
this._mkDiv(cx+a+wod-s, cy-oy, s, (oy<<1)+hod);
}
else
{
var _a = (width-(s<<1))>>1,
_b = (height-(s<<1))>>1,
_x = 0, _y = _b,
_aa2 = (_a*_a)<<1, _aa4 = _aa2<<1, _bb2 = (_b*_b)<<1, _bb4 = _bb2<<1,
_st = (_aa2>>1)*(1-(_b<<1)) + _bb2,
_tt = (_bb2>>1) - _aa2*((_b<<1)-1),
pxl = new Array(),
pxt = new Array(),
_pxb = new Array();
pxl[0] = 0;
pxt[0] = b;
_pxb[0] = _b-1;
while(y > 0)
{
if(st < 0)
{
pxl[pxl.length] = x;
pxt[pxt.length] = y;
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0)
{
pxl[pxl.length] = x;
st += bb2*((x<<1)+3) - aa4*(y-1);
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
pxt[pxt.length] = y;
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
if(_y > 0)
{
if(_st < 0)
{
_st += _bb2*((_x<<1)+3);
_tt += _bb4*(++_x);
_pxb[_pxb.length] = _y-1;
}
else if(_tt < 0)
{
_st += _bb2*((_x<<1)+3) - _aa4*(_y-1);
_tt += _bb4*(++_x) - _aa2*(((_y--)<<1)-3);
_pxb[_pxb.length] = _y-1;
}
else
{
_tt -= _aa2*((_y<<1)-3);
_st -= _aa4*(--_y);
_pxb[_pxb.length-1]--;
}
}
}
var ox = -wod, oy = b,
_oy = _pxb[0],
l = pxl.length,
w, h;
for(var i = 0; i < l; i++)
{
if(typeof _pxb[i] != "undefined")
{
if(_pxb[i] < _oy || pxt[i] < oy)
{
x = pxl[i];
this._mkOvQds(cx, cy, x, oy, x-ox, oy-_oy, wod, hod);
ox = x;
oy = pxt[i];
_oy = _pxb[i];
}
}
else
{
x = pxl[i];
this._mkDiv(cx-x, cy-oy, 1, (oy<<1)+hod);
this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
ox = x;
oy = pxt[i];
}
}
this._mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);
this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
}
}
function _mkOvDott(left, top, width, height)
{
var a = (++width)>>1, b = (++height)>>1,
wod = width&1, hod = height&1, hodu = hod^1,
cx = left+a, cy = top+b,
x = 0, y = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,
st = (aa2>>1)*(1-(b<<1)) + bb2,
tt = (bb2>>1) - aa2*((b<<1)-1),
drw = true;
while(y > 0)
{
if(st < 0)
{
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0)
{
st += bb2*((x<<1)+3) - aa4*(y-1);
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
if(drw && y >= hodu) this._mkOvQds(cx, cy, x, y, 1, 1, wod, hod);
drw = !drw;
}
}
function _mkRect(x, y, w, h)
{
var s = this.stroke;
this._mkDiv(x, y, w, s);
this._mkDiv(x+w, y, s, h);
this._mkDiv(x, y+h, w+s, s);
this._mkDiv(x, y+s, s, h-s);
}
function _mkRectDott(x, y, w, h)
{
this.drawLine(x, y, x+w, y);
this.drawLine(x+w, y, x+w, y+h);
this.drawLine(x, y+h, x+w, y+h);
this.drawLine(x, y, x, y+h);
}
function jsgFont()
{
this.PLAIN = 'font-weight:normal;';
this.BOLD = 'font-weight:bold;';
this.ITALIC = 'font-style:italic;';
this.ITALIC_BOLD = this.ITALIC + this.BOLD;
this.BOLD_ITALIC = this.ITALIC_BOLD;
}
var Font = new jsgFont();
function jsgStroke()
{
this.DOTTED = -1;
}
var Stroke = new jsgStroke();
function jsGraphics(cnv, wnd)
{
this.setColor = function(x)
{
this.color = x.toLowerCase();
};
this.setStroke = function(x)
{
this.stroke = x;
if(!(x+1))
{
this.drawLine = _mkLinDott;
this._mkOv = _mkOvDott;
this.drawRect = _mkRectDott;
}
else if(x-1 > 0)
{
this.drawLine = _mkLin2D;
this._mkOv = _mkOv2D;
this.drawRect = _mkRect;
}
else
{
this.drawLine = _mkLin;
this._mkOv = _mkOv;
this.drawRect = _mkRect;
}
};
this.setPrintable = function(arg)
{
this.printable = arg;
if(jg_fast)
{
this._mkDiv = _mkDivIe;
this._htmRpc = arg? _htmPrtRpc : _htmRpc;
}
else this._mkDiv = arg? _mkDivPrt : _mkDiv;
};
this.setFont = function(fam, sz, sty)
{
this.ftFam = fam;
this.ftSz = sz;
this.ftSty = sty || Font.PLAIN;
};
this.drawPolyline = this.drawPolyLine = function(x, y)
{
for (var i=x.length - 1; i;)
{--i;
this.drawLine(x[i], y[i], x[i+1], y[i+1]);
}
};
this.fillRect = function(x, y, w, h)
{
this._mkDiv(x, y, w, h);
};
this.drawPolygon = function(x, y)
{
this.drawPolyline(x, y);
this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);
};
this.drawEllipse = this.drawOval = function(x, y, w, h)
{
this._mkOv(x, y, w, h);
};
this.fillEllipse = this.fillOval = function(left, top, w, h)
{
var a = w>>1, b = h>>1,
wod = w&1, hod = h&1,
cx = left+a, cy = top+b,
x = 0, y = b, oy = b,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,
st = (aa2>>1)*(1-(b<<1)) + bb2,
tt = (bb2>>1) - aa2*((b<<1)-1),
xl, dw, dh;
if(w) while(y > 0)
{
if(st < 0)
{
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0)
{
st += bb2*((x<<1)+3) - aa4*(y-1);
xl = cx-x;
dw = (x<<1)+wod;
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
dh = oy-y;
this._mkDiv(xl, cy-oy, dw, dh);
this._mkDiv(xl, cy+y+hod, dw, dh);
oy = y;
}
else
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
}
}
this._mkDiv(cx-a, cy-oy, w, (oy<<1)+hod);
};
this.fillArc = function(iL, iT, iW, iH, fAngA, fAngZ)
{
var a = iW>>1, b = iH>>1,
iOdds = (iW&1) | ((iH&1) << 16),
cx = iL+a, cy = iT+b,
x = 0, y = b, ox = x, oy = y,
aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,
st = (aa2>>1)*(1-(b<<1)) + bb2,
tt = (bb2>>1) - aa2*((b<<1)-1),
// Vars for radial boundary lines
xEndA, yEndA, xEndZ, yEndZ,
iSects = (1 << (Math.floor((fAngA %= 360.0)/180.0) << 3))
| (2 << (Math.floor((fAngZ %= 360.0)/180.0) << 3))
| ((fAngA >= fAngZ) << 16),
aBndA = new Array(b+1), aBndZ = new Array(b+1);
// Set up radial boundary lines
fAngA *= Math.PI/180.0;
fAngZ *= Math.PI/180.0;
xEndA = cx+Math.round(a*Math.cos(fAngA));
yEndA = cy+Math.round(-b*Math.sin(fAngA));
_mkLinVirt(aBndA, cx, cy, xEndA, yEndA);
xEndZ = cx+Math.round(a*Math.cos(fAngZ));
yEndZ = cy+Math.round(-b*Math.sin(fAngZ));
_mkLinVirt(aBndZ, cx, cy, xEndZ, yEndZ);
while(y > 0)
{
if(st < 0) // Advance x
{
st += bb2*((x<<1)+3);
tt += bb4*(++x);
}
else if(tt < 0) // Advance x and y
{
st += bb2*((x<<1)+3) - aa4*(y-1);
ox = x;
tt += bb4*(++x) - aa2*(((y--)<<1)-3);
this._mkArcDiv(ox, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
oy = y;
}
else // Advance y
{
tt -= aa2*((y<<1)-3);
st -= aa4*(--y);
if(y && (aBndA[y] != aBndA[y-1] || aBndZ[y] != aBndZ[y-1]))
{
this._mkArcDiv(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
ox = x;
oy = y;
}
}
}
this._mkArcDiv(x, 0, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);
if(iOdds >> 16) // Odd height
{
if(iSects >> 16) // Start-angle > end-angle
{
var xl = (yEndA <= cy || yEndZ > cy)? (cx - x) : cx;
this._mkDiv(xl, cy, x + cx - xl + (iOdds & 0xffff), 1);
}
else if((iSects & 0x01) && yEndZ > cy)
this._mkDiv(cx - x, cy, x, 1);
}
};
/* fillPolygon method, implemented by Matthieu Haller.
This javascript function is an adaptation of the gdImageFilledPolygon for Walter Zorn lib.
C source of GD 1.8.4 found at http://www.boutell.com/gd/
THANKS to Kirsten Schulz for the polygon fixes!
The intersection finding technique of this code could be improved
by remembering the previous intertersection, and by using the slope.
That could help to adjust intersections to produce a nice
interior_extrema. */
this.fillPolygon = function(array_x, array_y)
{
var i;
var y;
var miny, maxy;
var x1, y1;
var x2, y2;
var ind1, ind2;
var ints;
var n = array_x.length;
if(!n) return;
miny = array_y[0];
maxy = array_y[0];
for(i = 1; i < n; i++)
{
if(array_y[i] < miny)
miny = array_y[i];
if(array_y[i] > maxy)
maxy = array_y[i];
}
for(y = miny; y <= maxy; y++)
{
var polyInts = new Array();
ints = 0;
for(i = 0; i < n; i++)
{
if(!i)
{
ind1 = n-1;
ind2 = 0;
}
else
{
ind1 = i-1;
ind2 = i;
}
y1 = array_y[ind1];
y2 = array_y[ind2];
if(y1 < y2)
{
x1 = array_x[ind1];
x2 = array_x[ind2];
}
else if(y1 > y2)
{
y2 = array_y[ind1];
y1 = array_y[ind2];
x2 = array_x[ind1];
x1 = array_x[ind2];
}
else continue;
// Modified 11. 2. 2004 Walter Zorn
if((y >= y1) && (y < y2))
polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
else if((y == maxy) && (y > y1) && (y <= y2))
polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);
}
polyInts.sort(_CompInt);
for(i = 0; i < ints; i+=2)
this._mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1);
}
};
this.drawString = function(txt, x, y)
{
this.htm += '<div style="position:absolute;white-space:nowrap;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'font-family:' + this.ftFam + ';'+
'font-size:' + this.ftSz + ';'+
'color:' + this.color + ';' + this.ftSty + '">'+
txt +
'<\/div>';
};
/* drawStringRect() added by Rick Blommers.
Allows to specify the size of the text rectangle and to align the
text both horizontally (e.g. right) and vertically within that rectangle */
this.drawStringRect = function(txt, x, y, width, halign)
{
this.htm += '<div style="position:absolute;overflow:hidden;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:'+width +'px;'+
'text-align:'+halign+';'+
'font-family:' + this.ftFam + ';'+
'font-size:' + this.ftSz + ';'+
'color:' + this.color + ';' + this.ftSty + '">'+
txt +
'<\/div>';
};
this.drawImage = function(imgSrc, x, y, w, h, a)
{
this.htm += '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
// w (width) and h (height) arguments are now optional.
// Added by Mahmut Keygubatli, 14.1.2008
(w? ('width:' + w + 'px;') : '') +
(h? ('height:' + h + 'px;'):'')+'">'+
'<img src="' + imgSrc +'"'+ (w ? (' width="' + w + '"'):'')+ (h ? (' height="' + h + '"'):'') + (a? (' '+a) : '') + '>'+
'<\/div>';
};
this.clear = function()
{
this.htm = "";
if(this.cnv) this.cnv.innerHTML = "";
};
this._mkOvQds = function(cx, cy, x, y, w, h, wod, hod)
{
var xl = cx - x, xr = cx + x + wod - w, yt = cy - y, yb = cy + y + hod - h;
if(xr > xl+w)
{
this._mkDiv(xr, yt, w, h);
this._mkDiv(xr, yb, w, h);
}
else
w = xr - xl + w;
this._mkDiv(xl, yt, w, h);
this._mkDiv(xl, yb, w, h);
};
this._mkArcDiv = function(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects)
{
var xrDef = cx + x + (iOdds & 0xffff), y2, h = oy - y, xl, xr, w;
if(!h) h = 1;
x = cx - x;
if(iSects & 0xff0000) // Start-angle > end-angle
{
y2 = cy - y - h;
if(iSects & 0x00ff)
{
if(iSects & 0x02)
{
xl = Math.max(x, aBndZ[y]);
w = xrDef - xl;
if(w > 0) this._mkDiv(xl, y2, w, h);
}
if(iSects & 0x01)
{
xr = Math.min(xrDef, aBndA[y]);
w = xr - x;
if(w > 0) this._mkDiv(x, y2, w, h);
}
}
else
this._mkDiv(x, y2, xrDef - x, h);
y2 = cy + y + (iOdds >> 16);
if(iSects & 0xff00)
{
if(iSects & 0x0100)
{
xl = Math.max(x, aBndA[y]);
w = xrDef - xl;
if(w > 0) this._mkDiv(xl, y2, w, h);
}
if(iSects & 0x0200)
{
xr = Math.min(xrDef, aBndZ[y]);
w = xr - x;
if(w > 0) this._mkDiv(x, y2, w, h);
}
}
else
this._mkDiv(x, y2, xrDef - x, h);
}
else
{
if(iSects & 0x00ff)
{
if(iSects & 0x02)
xl = Math.max(x, aBndZ[y]);
else
xl = x;
if(iSects & 0x01)
xr = Math.min(xrDef, aBndA[y]);
else
xr = xrDef;
y2 = cy - y - h;
w = xr - xl;
if(w > 0) this._mkDiv(xl, y2, w, h);
}
if(iSects & 0xff00)
{
if(iSects & 0x0100)
xl = Math.max(x, aBndA[y]);
else
xl = x;
if(iSects & 0x0200)
xr = Math.min(xrDef, aBndZ[y]);
else
xr = xrDef;
y2 = cy + y + (iOdds >> 16);
w = xr - xl;
if(w > 0) this._mkDiv(xl, y2, w, h);
}
}
};
this.setStroke(1);
this.setFont("verdana,geneva,helvetica,sans-serif", "12px", Font.PLAIN);
this.color = "#000000";
this.htm = "";
this.wnd = wnd || window;
if(!jg_ok) _chkDHTM();
if(jg_ok)
{
if(cnv)
{
if(typeof(cnv) == "string")
this.cont = document.all? (this.wnd.document.all[cnv] || null)
: document.getElementById? (this.wnd.document.getElementById(cnv) || null)
: null;
else if(cnv == window.document)
this.cont = document.getElementsByTagName("body")[0];
// If cnv is a direct reference to a canvas DOM node
// (option suggested by Andreas Luleich)
else this.cont = cnv;
// Create new canvas inside container DIV. Thus the drawing and clearing
// methods won't interfere with the container's inner html.
// Solution suggested by Vladimir.
this.cnv = this.wnd.document.createElement("div");
this.cnv.style.fontSize=0;
this.cont.appendChild(this.cnv);
this.paint = jg_dom? _pntCnvDom : _pntCnvIe;
}
else
this.paint = _pntDoc;
}
else
this.paint = _pntN;
this.setPrintable(false);
}
function _mkLinVirt(aLin, x1, y1, x2, y2)
{
var dx = Math.abs(x2-x1), dy = Math.abs(y2-y1),
x = x1, y = y1,
xIncr = (x1 > x2)? -1 : 1,
yIncr = (y1 > y2)? -1 : 1,
p,
i = 0;
if(dx >= dy)
{
var pr = dy<<1,
pru = pr - (dx<<1);
p = pr-dx;
while(dx > 0)
{--dx;
if(p > 0) // Increment y
{
aLin[i++] = x;
y += yIncr;
p += pru;
}
else p += pr;
x += xIncr;
}
}
else
{
var pr = dx<<1,
pru = pr - (dy<<1);
p = pr-dy;
while(dy > 0)
{--dy;
y += yIncr;
aLin[i++] = x;
if(p > 0) // Increment x
{
x += xIncr;
p += pru;
}
else p += pr;
}
}
for(var len = aLin.length, i = len-i; i;)
aLin[len-(i--)] = x;
};
function _CompInt(x, y)
{
return(x - y);
}
HTML 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JS畫板</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="wz_jsgraphics.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function drawObj(el) {
el = this.el = document.getElementById(el);
this.gc = new jsGraphics(el);
o = this;
this.cacheTime = [];
this.cacheAction = [];
el.onmousedown = function() {
o.draw = true;
}
document.onmouseup = function() {
o.draw = false;
o.start = null;
}
el.onmousemove = function(e) {
e = window.event || e;
if (!o.draw) return;
if (o.start) {
o.end = [e.x || e.pageX, e.y || e.pageY];
o.gc.drawLine.apply(o.gc, o.start.concat(o.end));
o.gc.paint();
o.cacheAction.push("o.gc.drawLine.apply(o.gc,[" + o.start.concat(o.end) + "]);o.gc.paint();");
o.cacheTime.push(+new Date);
o.start = o.end;
return;
}
o.start = [e.x || e.pageX, e.y || e.pageY];
o.cacheTime.push(+new Date);
}
}
drawObj.prototype = {
setColor: function(c) {
this.gc.setColor(c);
this.cacheAction.push("o.gc.setColor('" + c + "');");
o.cacheTime.push(+new Date);
},
setStroke: function(c) {
this.gc.setStroke(c);
this.cacheAction.push("o.gc.setStroke('" + c + "');");
o.cacheTime.push(+new Date);
},
clear: function(c) {
this.gc.clear(); ! c && (this.cacheAction.length = 0);
},
getCode: function() {
//return this.lastHTML = this.el.innerHTML;
return this.cacheAction.join('');
},
runCode: function(s) {
s = s.split(';');
this.repaint(s);
},
repaint: function(s) {
this.gc.setColor('#000000');
this.gc.setStroke(1);
var c = ["o.setColor('" + this.gc.color + "');o.setStroke('" + this.gc.stroke + "');"];
this.clear(true);
var s1 = (s || this.cacheAction).concat(c);
if (s1.length) {
var o = this,i = 0,l = s1.length;
(function() {
if (i == l) return;
window.eval(s1[i++]);
setTimeout(arguments.callee, o.cacheTime[i]-o.cacheTime[i-1]);
})();
}
}
}
var dd;
window.onload = function() {
dd = new drawObj('test');
document.forms[0].reset();
intocolor();
document.body.onclick = OnDocumentClick;
}
//----------顏色面板--------------------------------
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
var current = null;
function intocolor() {
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=12>';
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
if (i == 0) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
} else {
colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">'
}
colorTable = colorTable + '<td width=11 style="background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
}
}
}
}
colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">' + '<tr height=30><td colspan=21 bgcolor=#cccccc>' + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' + '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' + '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>' + '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" οnmοuseοver="doOver(event)" οnmοuseοut="doOut()" οnclick="doclick(event)" style="cursor:hand;">' + colorTable + '</table>';
document.getElementById('colorpanel').innerHTML = colorTable
}
//將顏色值字母大寫
function doOver(e) {
e = e || event;
var src = e.target || e.srcElement;
if ((src.tagName == "TD") && (current != src)) {
if (current != null) {
current.style.backgroundColor = current._background
}
src._background = src.style.backgroundColor;
document.getElementById('DisColor').style.backgroundColor = src.style.backgroundColor;
document.getElementById('HexColor').value = src.style.backgroundColor.toUpperCase();
src.style.backgroundColor = "white";
current = src
}
}
//將顏色值字母大寫
function doOut() {
if (current != null) current.style.backgroundColor = current._background.toUpperCase();
}
function doclick(e) {
e = e || event;
var src = e.target || e.srcElement;
if (src.tagName == "TD") {
var clr = src._background;
clr = clr.toUpperCase(); //將顏色值大寫
if (targetElement) {
//給目標無件設置顏色值
targetElement.value = clr;
dd.setColor(clr)
}
DisplayClrDlg(false);
return clr;
}
}
var targetElement = null; //接收顏色對話框返回值的元素
//當點下鼠標時，確定顯示還是隱藏顏色對話框
//點擊顏色對話框以外其它區域時，讓對話框隱藏
//點擊顏色對話框色區時，由 doclick 函數來隱藏對話框
function OnDocumentClick(e) {
e = e || event;
var srcElement = e.target || e.srcElement;
if (srcElement.alt == "clrDlg") {
//顯示顏色對話框
targetElement = srcElement;
DisplayClrDlg(e, true);
} else {
//是否是在顏色對話框上點擊的
while (srcElement && srcElement.id != "colorpanel") {
srcElement = srcElement.parentElement;
}
if (!srcElement) {
//不是在顏色對話框上點擊的
DisplayClrDlg(e, false);
}
}
}
//顯示顏色對話框
//display 決定顯示還是隱藏
//自動確定顯示位置
function DisplayClrDlg(e, display) {
var clrPanel = document.getElementById("colorpanel");
if (display) {
var left = document.body.scrollLeft + e.clientX;
var top = document.body.scrollTop + e.clientY;
if (e.clientX + clrPanel.style.width > document.body.clientWidth) {
//對話框顯示在鼠標右方時，會出現遮擋，將其顯示在鼠標左方
left -= clrPanel.style.width;
}
if (e.clientY + clrPanel.style.height > document.body.clientHeight) {
//對話框顯示在鼠標下方時，會出現遮擋，將其顯示在鼠標上方
top -= clrPanel.style.height;
}
clrPanel.style.left = left;
clrPanel.style.top = top;
clrPanel.style.display = "block";
} else {
clrPanel.style.display = "none";
}
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
*{margin:0;padding:0} body{padding:5px}
</STYLE>
</HEAD>
<BODY>
<h1 style='text-align:center'>
JS畫板
<span style='color:#999;font-size:14px'>
By 網者歸來
</span>
</h1>
<form>
<div style='border:1px dotted #666;background:#eee;margin:5px 0;padding:5px'>
畫筆顏色：
<input type="input" alt="clrDlg" value='#000000' />
畫筆寬度：
<select οnchange="dd.setStroke(parseInt(this.value));">
<option value="1" selected>
1px
</option>
<option value="3">
3px
</option>
<option value="5">
5px
</option>
<option value="7">
7px
</option>
<option value="9">
9px
</option>
</select>
<input type="button" value="清除畫板內容" οnclick="dd.clear();" />
<input type="button" value="重現繪畫過程" οnclick="dd.repaint();" />
<input type="button" value="獲取繪圖過程代碼" οnclick="document.getElementById('test1').value=dd.getCode();"
/>
<input type="button" value="執行測試代碼" οnclick="dd.runCode(document.getElementById('testcode').value);"
/>
</div>
<div style="border:5px solid #666">
<div id='test' style='width:100%;height:300px;'>
</div>
</div>
<textarea id='test1' style='width:100%;height:150px;margin-top:5px'>
</textarea>
<input type="button" value="執行繪圖過程代碼" οnclick="dd.runCode(document.getElementById('test1').value);"
/>
</form>
<div id="colorpanel" style="position:absolute;display:none;width:253px;height:177px;">
</div>
<textarea id='testcode' style='display:none'>
o.gc.setColor('#000000');o.gc.setStroke(1);o.gc.setStroke('3');o.gc.setColor('#FF0000');o.gc.drawLine.apply(o.gc,[249,190,250,190]);o.gc.paint();o.gc.drawLine.apply(o.gc,[250,190,252,192]);o.gc.paint();o.gc.drawLine.apply(o.gc,[252,192,253,193]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,193,253,194]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,194,255,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,197,257,199]);o.gc.paint();o.gc.drawLine.apply(o.gc,[257,199,258,200]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,200,260,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[260,204,261,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,204,262,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,206,263,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,208,263,209]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,209,263,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,210,264,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,211,263,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,233,255,235]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,235,256,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[256,237,260,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[260,241,261,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,242,262,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,244,262,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,245,263,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,247,264,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,249,264,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,250,264,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,252,264,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,254,265,256]);o.gc.paint();o.gc.drawLine.apply(o.gc,[249,328,250,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[250,328,252,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[252,328,253,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,328,254,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[254,327,255,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,326,256,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[256,326,257,325]);o.gc.paint();o.gc.drawLine.apply(o.gc,[257,325,258,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,324,258,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,323,261,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,321,264,318]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,318,269,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[269,316,276,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[276,310,286,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[286,304,287,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[287,303,288,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[288,302,289,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[289,302,289,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[289,301,289,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,215,301,217]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,217,301,219]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,219,301,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,220,301,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,223,301,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,227,302,233]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,233,302,234]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,234,302,236]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,236,302,238]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,238,302,239]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,239,302,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,241,302,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,243,302,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,244,302,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,245,302,246]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,246,302,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,247,302,248]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,248,302,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,249,302,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[315,209,324,207]);o.gc.paint();o.gc.drawLine.apply(o.gc,[324,207,336,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[336,206,345,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[345,204,350,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[350,203,354,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[354,203,355,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,203,356,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[356,203,355,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,204,355,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,205,353,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[353,214,351,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,220,351,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,224,351,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,227,349,235]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,235,349,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,241,349,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,242,349,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,245,349,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,249,349,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,252,349,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,255,349,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,258,349,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,260,349,261]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,261,348,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,242,334,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,244,334,246]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,246,334,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,249,334,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,251,334,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,255,334,257]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,257,334,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,258,334,259]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,259,334,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,260,334,261]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,261,333,263]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,263,333,264]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,264,331,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[331,268,330,271]);o.gc.paint();o.gc.drawLine.apply(o.gc,[330,271,330,273]);o.gc.paint();o.gc.drawLine.apply(o.gc,[330,273,329,275]);o.gc.paint();o.gc.drawLine.apply(o.gc,[329,275,329,276]);o.gc.paint();o.gc.drawLine.apply(o.gc,[329,276,328,278]);o.gc.paint();o.gc.drawLine.apply(o.gc,[328,278,327,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[327,280,327,281]);o.gc.paint();o.gc.drawLine.apply(o.gc,[327,281,326,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[326,282,326,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[326,285,325,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[325,287,325,288]);o.gc.paint();o.gc.drawLine.apply(o.gc,[325,288,324,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[324,289,323,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[323,291,322,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[322,292,322,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[322,293,321,295]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,295,321,296]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,296,321,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,297,320,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[320,298,320,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,278,334,279]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,279,336,281]);o.gc.paint();o.gc.drawLine.apply(o.gc,[336,281,338,283]);o.gc.paint();o.gc.drawLine.apply(o.gc,[338,283,339,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[339,285,342,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[342,287,347,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[347,292,357,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[357,298,358,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[358,298,359,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,249,377,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,250,377,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,251,377,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,252,377,253]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,253,377,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,254,377,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,255,377,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,258,377,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,260,377,262]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,262,377,263]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,263,377,264]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,264,377,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,265,377,266]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,266,377,267]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,207,398,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,208,398,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,210,398,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,211,398,216]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,216,398,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,220,398,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,224,398,226]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,226,398,228]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,228,398,232]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,232,398,234]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,234,398,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,237,398,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,240,398,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,247,398,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,250,398,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,254,399,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,258,399,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,260,399,262]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,262,399,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,265,400,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,268,400,272]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,272,400,274]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,274,400,278]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,278,400,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,280,400,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,282,400,284]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,284,400,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,287,400,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,291,400,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,292,400,294]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,294,400,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,297,400,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,298,400,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,300,400,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,302,400,305]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,305,400,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,307,400,308]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,308,400,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,311,400,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,313,400,314]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,314,400,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,316,400,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,317,400,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,319,400,320]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,320,400,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,321,400,322]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,322,400,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,323,400,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,324,400,325]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,325,400,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,326,400,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,327,400,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,328,399,329]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,329,398,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,328,397,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[397,327,396,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[396,326,395,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[395,324,393,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[393,323,392,322]);o.gc.paint();o.gc.drawLine.apply(o.gc,[392,322,391,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[391,321,390,320]);o.gc.paint();o.gc.drawLine.apply(o.gc,[390,320,390,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[390,319,389,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[389,319,388,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[388,317,387,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[387,317,386,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[494,195,496,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[496,197,497,198]);o.gc.paint();o.gc.drawLine.apply(o.gc,[497,198,498,201]);o.gc.paint();o.gc.drawLine.apply(o.gc,[498,201,506,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[503,237,504,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[504,237,505,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,302,505,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,303,505,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,304,505,305]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,305,505,306]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,306,505,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,307,505,308]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,308,505,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,309,505,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,310,505,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,311,505,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,313,505,314]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,314,505,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,313,505,312]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,312,506,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[506,310,507,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[507,309,511,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[511,307,517,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[517,304,518,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[518,304,521,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[521,303,522,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[522,302,523,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[523,301,525,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[525,300,524,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[501,240,502,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[502,240,501,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[501,240,499,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[499,241,496,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[496,241,494,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[494,241,492,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[492,242,491,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[491,242,489,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[489,242,486,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[531,227,532,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[532,227,536,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[536,227,542,226]);o.gc.paint();o.gc.drawLine.apply(o.gc,[542,226,549,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[549,224,553,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[553,223,555,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,223,556,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[556,223,561,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[561,223,567,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,223,573,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[573,223,574,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,223,577,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[577,223,578,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[578,223,579,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[579,223,580,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[580,223,582,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[582,223,583,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[583,223,584,222]);o.gc.paint();o.gc.drawLine.apply(o.gc,[584,222,584,221]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,195,567,196]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,196,567,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,197,567,198]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,198,567,199]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,199,567,200]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,200,567,201]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,201,567,202]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,202,567,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,203,567,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,204,567,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,205,567,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,206,567,207]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,207,567,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,208,567,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,210,567,212]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,212,567,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,214,567,217]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,217,570,221]);o.gc.paint();o.gc.drawLine.apply(o.gc,[570,221,571,228]);o.gc.paint();o.gc.drawLine.apply(o.gc,[571,228,572,233]);o.gc.paint();o.gc.drawLine.apply(o.gc,[572,233,574,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,237,574,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,243,577,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[577,251,579,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[579,258,580,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[580,265,582,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[582,268,584,273]);o.gc.paint();o.gc.drawLine.apply(o.gc,[584,273,586,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[586,280,586,283]);o.gc.paint();o.gc.drawLine.apply(o.gc,[586,283,587,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[587,285,589,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[589,289,590,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[590,293,592,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[592,297,593,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[593,302,596,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[596,309,598,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[598,311,599,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[599,313,601,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,316,601,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,317,602,318]);o.gc.paint();o.gc.drawLine.apply(o.gc,[602,318,604,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[604,319,606,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[606,321,608,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[608,323,609,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[609,324,609,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[609,323,610,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[610,317,612,312]);o.gc.paint();o.gc.drawLine.apply(o.gc,[612,312,618,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,297,618,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,293,618,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,292,617,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[617,290,616,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[616,290,614,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[614,290,612,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[543,258,544,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[544,258,545,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[545,258,550,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[550,258,551,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[551,258,552,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[552,258,553,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[553,258,554,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,258,557,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[557,258,559,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[559,258,560,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[560,258,561,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[561,258,562,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[562,258,563,257]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,269,554,271]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,271,554,274]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,274,554,276]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,276,555,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,282,555,284]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,284,555,288]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,288,555,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,289,555,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,293,555,294]);o.gc.paint();o.gc.drawLine.apply(o.gc,[545,304,548,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[548,303,550,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[550,302,552,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[552,301,556,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[556,299,557,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[557,297,567,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,293,570,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[570,292,571,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[571,292,572,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[572,291,573,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[573,290,573,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[590,201,591,202]);o.gc.paint();o.gc.drawLine.apply(o.gc,[591,202,594,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[594,205,597,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[597,208,598,209]);o.gc.paint();o.gc.drawLine.apply(o.gc,[598,209,600,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[600,211,601,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,214,601,213]);o.gc.paint();
</textarea>
</BODY>
</HTML>
