2
* FCKeditor - The text editor for internet
3
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
5
* Licensed under the terms of the GNU Lesser General Public License:
6
* http://www.opensource.org/licenses/lgpl-license.php
8
* For further information visit:
9
* http://www.fckeditor.net/
11
* "Support Open Source software. What about a donation today?"
13
* File Name: wz_jsgraphics.js
14
* Javascript Graphics.
17
* Grant French (grant@mcpuk.net)
19
/***********************************************************************
20
** Title.........: Javascript Graphics
21
** Version.......: 1.0
22
** Author........: Xiang Wei ZHUO <wei@zhuo.org>
23
** Filename......: wz_jsgraphics.js
24
** Last changed..: 31 Aug 2003
25
** Notes.........: Modified for Image Editor, added extra commands
28
/* This notice must be untouched at all times.
30
wz_jsgraphics.js v. 2.03
31
The latest version is available at
32
http://www.walterzorn.com
33
or http://www.devira.com
34
or http://www.walterzorn.de
36
Copyright (c) 2002-2003 Walter Zorn. All rights reserved.
37
Created 3. 11. 2002 by Walter Zorn <walter@kreuzotter.de>
38
Last modified: 11. 6. 2003
40
High Performance JavaScript Graphics Library.
42
- to draw lines, rectangles, ellipses, polygons
43
with specifiable line thickness,
44
- to fill rectangles and ellipses
46
NOTE: Operations, functions and branching have rather been optimized
47
to efficiency and speed than to shortness of source code.
49
This program is free software;
50
you can redistribute it and/or modify it under the terms of the
51
GNU General Public License as published by the Free Software Foundation;
52
either version 2 of the License, or (at your option) any later version.
53
This program is distributed in the hope that it will be useful,
54
but WITHOUT ANY WARRANTY;
55
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
56
See the GNU General Public License
57
at http://www.gnu.org/copyleft/gpl.html for more details.
60
var jg_ihtm, jg_ie, jg_dom,
61
jg_n4 = (document.layers && typeof document.classes != "undefined");
63
function chkDHTM(x, i)
65
x = document.body || null;
66
jg_ie = (x && typeof x.insertAdjacentHTML != "undefined");
67
jg_dom = (x && !jg_ie &&
68
typeof x.appendChild != "undefined" &&
69
typeof document.createRange != "undefined" &&
70
typeof (i = document.createRange()).setStartBefore != "undefined" &&
71
typeof i.createContextualFragment != "undefined");
72
jg_ihtm = (!jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined");
81
this.wnd.document.write(this.htm);
91
var x = document.createRange();
92
x.setStartBefore(this.cnv);
93
x = x.createContextualFragment(this.htm);
94
this.cnv.appendChild(x);
104
this.cnv.insertAdjacentHTML("BeforeEnd", this.htm);
112
function pntCnvIhtm()
114
this.cnv.innerHTML += this.htm;
131
function mkDiv(x, y, w, h)
133
this.htm += '<div style="position:absolute;'+
136
'width:' + w + 'px;'+
137
'height:' + h + 'px;'+
138
'clip:rect(0,'+w+'px,'+h+'px,0);'+
139
'overflow:hidden;background-color:' + this.color + ';'+
148
function mkDivPrint(x, y, w, h)
150
this.htm += '<div style="position:absolute;'+
151
'border-left:' + w + 'px solid ' + this.color + ';'+
154
'width:' + w + 'px;'+
155
'height:' + h + 'px;'+
156
'clip:rect(0,'+w+'px,'+h+'px,0);'+
157
'overflow:hidden;background-color:' + this.color + ';'+
165
function mkLyr(x, y, w, h)
167
this.htm += '<layer '+
170
'width="' + w + '" '+
171
'height="' + h + '" '+
172
'bgcolor="' + this.color + '"><\/layer>\n';
179
function mkLbl(txt, x, y)
181
this.htm += '<div style="position:absolute;white-space:nowrap;'+
184
'font-family:' + this.ftFam + ';'+
185
'font-size:' + this.ftSz + ';'+
186
'color:' + this.color + ';' + this.ftSty + '">'+
195
function mkLin(x1, y1, x2, y2)
206
var dx = x2-x1, dy = Math.abs(y2-y1),
208
yIncr = (y1 > y2)? -1 : 1;
221
this.mkDiv(ox, y, x-ox, 1);
228
this.mkDiv(ox, y, x2-ox+1, 1);
243
this.mkDiv(x++, y, 1, oy-y+1);
254
this.mkDiv(x2, y2, 1, oy-y2+1);
263
this.mkDiv(x++, oy, 1, y-oy);
269
this.mkDiv(x2, oy, 1, y2-oy+1);
278
function mkLin2D(x1, y1, x2, y2)
289
var dx = x2-x1, dy = Math.abs(y2-y1),
291
yIncr = (y1 > y2)? -1 : 1;
299
var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;
300
_s = (!(s-0x4)? Math.ceil(_s) : Math.round(_s)) + 1;
303
var ad = Math.ceil(s/2);
314
this.mkDiv(ox, y, x-ox+ad, _s);
321
this.mkDiv(ox, y, x2-ox+ad+1, _s);
328
var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;
329
_s = (!(s-0x4)? Math.ceil(_s) : Math.round(_s)) + 1;
332
var ad = Math.round(s/2);
345
this.mkDiv(x++, y, _s, oy-y+ad);
356
this.mkDiv(x2, y2, _s, oy-y2+ad);
365
this.mkDiv(x++, oy, _s, y-oy+ad);
371
this.mkDiv(x2, oy, _s, y2-oy+ad+1);
380
function mkLinDott(x1, y1, x2, y2)
391
var dx = x2-x1, dy = Math.abs(y2-y1),
393
yIncr = (y1 > y2)? -1 : 1,
402
if (drw) this.mkDiv(x, y, 1, 1);
412
if (drw) this.mkDiv(x, y, 1, 1);
422
if (drw) this.mkDiv(x, y, 1, 1);
432
if (drw) this.mkDiv(x, y, 1, 1);
440
function mkOv(left, top, width, height)
442
var a = width>>1, b = height>>1,
443
wod = width&1, hod = (height&1)+1,
444
cx = left+a, cy = top+b,
447
aa = (a*a)<<1, bb = (b*b)<<1,
448
st = (aa>>1)*(1-(b<<1)) + bb,
449
tt = (bb>>1) - aa*((b<<1)-1),
455
st += bb*((x<<1)+0x3);
460
st += bb*((x<<1)+0x3) - (aa<<1)*(y-1);
461
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-0x3);
466
this.mkOvQds(cx, cy, -x+0x2, ox+wod, -oy, oy-1+hod, 1, 1);
467
this.mkOvQds(cx, cy, -x+1, x-1+wod, -y-1, y+hod, 1, 1);
469
else this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, oy-h+hod, w, h);
475
tt -= aa*((y<<1)-0x3);
479
this.mkDiv(cx-a, cy-oy, a-ox+1, (oy<<1)+hod);
480
this.mkDiv(cx+ox+wod, cy-oy, a-ox+1, (oy<<1)+hod);
487
function mkOv2D(left, top, width, height)
492
var a = width>>1, b = height>>1,
493
wod = width&1, hod = (height&1)+1,
494
cx = left+a, cy = top+b,
496
aa = (a*a)<<1, bb = (b*b)<<1,
497
st = (aa>>1)*(1-(b<<1)) + bb,
498
tt = (bb>>1) - aa*((b<<1)-1);
501
if (s-0x4 < 0 && (!(s-0x2) || width-0x33 > 0 && height-0x33 > 0))
505
pxl, pxr, pxt, pxb, pxw;
510
st += bb*((x<<1)+0x3);
515
st += bb*((x<<1)+0x3) - (aa<<1)*(y-1);
516
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-0x3);
531
this.mkOvQds(cx, cy, -x+1, ox-pxw+w+wod, -oy, -h+oy+hod, pxw, h);
537
tt -= aa*((y<<1)-0x3);
541
this.mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);
542
this.mkDiv(cx+a+wod-s+1, cy-oy, s, (oy<<1)+hod);
548
var _a = (width-((s-1)<<1))>>1,
549
_b = (height-((s-1)<<1))>>1,
551
_aa = (_a*_a)<<1, _bb = (_b*_b)<<1,
552
_st = (_aa>>1)*(1-(_b<<1)) + _bb,
553
_tt = (_bb>>1) - _aa*((_b<<1)-1),
565
st += bb*((x<<1)+0x3);
572
st += bb*((x<<1)+0x3) - (aa<<1)*(y-1);
573
tt += (bb<<1)*(++x) - aa*(((y--)<<1)-0x3);
579
tt -= aa*((y<<1)-0x3);
587
_st += _bb*((_x<<1)+0x3);
588
_tt += (_bb<<1)*(++_x);
589
_pxb[_pxb.length] = _y-1;
593
_st += _bb*((_x<<1)+0x3) - (_aa<<1)*(_y-1);
594
_tt += (_bb<<1)*(++_x) - _aa*(((_y--)<<1)-0x3);
595
_pxb[_pxb.length] = _y-1;
599
_tt -= _aa*((_y<<1)-0x3);
600
_st -= (_aa<<1)*(--_y);
601
_pxb[_pxb.length-1]--;
610
for (var i = 0; i < l; i++)
612
if (typeof _pxb[i] != "undefined")
614
if (_pxb[i] < _oy || pxt[i] < oy)
617
this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, _oy+hod, x-ox, oy-_oy);
626
this.mkDiv(cx-x+1, cy-oy, 1, (oy<<1)+hod);
627
this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
632
this.mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);
633
this.mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);
641
function mkOvDott(left, top, width, height)
643
var a = width>>1, b = height>>1,
644
wod = width&1, hod = height&1,
645
cx = left+a, cy = top+b,
647
aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
648
st = (aa2>>1)*(1-(b<<1)) + bb,
649
tt = (bb>>1) - aa2*((b<<1)-1),
655
st += bb*((x<<1)+0x3);
660
st += bb*((x<<1)+0x3) - aa4*(y-1);
661
tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-0x3);
665
tt -= aa2*((y<<1)-0x3);
668
if (drw) this.mkOvQds(cx, cy, -x, x+wod, -y, y+hod, 1, 1);
677
function mkRect(x, y, w, h)
680
this.mkDiv(x, y, w, s);
681
this.mkDiv(x+w, y, s, h);
682
this.mkDiv(x, y+h, w+s, s);
683
this.mkDiv(x, y+s, s, h-s);
690
function mkRectDott(x, y, w, h)
692
this.drawLine(x, y, x+w, y);
693
this.drawLine(x+w, y, x+w, y+h);
694
this.drawLine(x, y+h, x+w, y+h);
695
this.drawLine(x, y, x, y+h);
704
this.PLAIN = 'font-weight:normal;';
705
this.BOLD = 'font-weight:bold;';
706
this.ITALIC = 'font-style:italic;';
707
this.ITALIC_BOLD = this.ITALIC + this.BOLD;
708
this.BOLD_ITALIC = this.ITALIC_BOLD;
710
var Font = new jsgFont();
720
var Stroke = new jsgStroke();
726
function jsGraphics(id, wnd)
728
this.setColor = new Function('arg', 'this.color = arg;');
731
this.getColor = new Function('return this.color');
733
this.setStroke = function(x)
738
this.drawLine = mkLinDott;
739
this.mkOv = mkOvDott;
740
this.drawRect = mkRectDott;
744
this.drawLine = mkLin2D;
746
this.drawRect = mkRect;
750
this.drawLine = mkLin;
752
this.drawRect = mkRect;
758
this.setPrintable = function(arg)
760
this.printable = arg;
761
this.mkDiv = jg_n4? mkLyr : arg? mkDivPrint : mkDiv;
766
this.setFont = function(fam, sz, sty)
770
this.ftSty = sty || Font.PLAIN;
775
this.drawPolyline = this.drawPolyLine = function(x, y, s)
777
var i = x.length-1; while (i >= 0)
778
this.drawLine(x[i], y[i], x[--i], y[i]);
783
this.fillRect = function(x, y, w, h)
785
this.mkDiv(x, y, w, h);
789
this.fillRectPattern = function(x, y, w, h, url)
791
this.htm += '<div style="position:absolute;'+
794
'width:' + w + 'px;'+
795
'height:' + h + 'px;'+
796
'clip:rect(0,'+w+'px,'+h+'px,0);'+
798
//'background-color:' + this.color + ';'+
799
"background-image: url('" + url + "');"+
800
"layer-background-image: url('" + url + "');"+
801
'z-index:100;"><\/div>';
805
this.drawHandle = function(x, y, w, h, cursor)
808
this.htm += '<div style="position:absolute;'+
811
'width:' + w + 'px;'+
812
'height:' + h + 'px;'+
813
'clip:rect(0,'+w+'px,'+h+'px,0);'+
814
'padding: 2px;overflow:hidden;'+
815
"cursor: '" + cursor + "';"+
816
'" class="handleBox" id="' + cursor + '" ><\/div>';
819
this.drawHandleBox = function(x, y, w, h, cursor)
822
this.htm += '<div style="position:absolute;'+
825
'width:' + w + 'px;'+
826
'height:' + h + 'px;'+
827
'clip:rect(0,'+(w+2)+'px,'+(h+2)+'px,0);'+
828
'overflow:hidden; border: solid 1px '+ this.color+';'+
829
"cursor: '" + cursor + "';"+
830
'" class="handleBox" id="' + cursor + '" ><\/div>';
835
this.drawPolygon = function(x, y)
837
this.drawPolyline(x, y);
838
this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);
843
this.drawEllipse = this.drawOval = function(x, y, w, h)
845
this.mkOv(x, y, w, h);
850
this.fillEllipse = this.fillOval = function(left, top, w, h)
852
var a = (w -= 1)>>1, b = (h -= 1)>>1,
853
wod = (w&1)+1, hod = (h&1)+1,
854
cx = left+a, cy = top+b,
857
aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1,
858
st = (aa2>>1)*(1-(b<<1)) + bb,
859
tt = (bb>>1) - aa2*((b<<1)-1),
861
if (w+1) while (y > 0)
865
st += bb*((x<<1)+0x3);
870
st += bb*((x<<1)+0x3) - aa4*(y-1);
873
tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-0x3);
875
this.mkDiv(pxl, cy-oy, dw, dh);
876
this.mkDiv(pxl, cy+oy-dh+hod, dw, dh);
882
tt -= aa2*((y<<1)-0x3);
886
this.mkDiv(cx-a, cy-oy, w+1, (oy<<1)+hod);
891
this.drawString = mkLbl;
895
this.clear = function()
898
if (this.cnv) this.cnv.innerHTML = this.defhtm;
904
this.mkOvQds = function(cx, cy, xl, xr, yt, yb, w, h)
906
this.mkDiv(xr+cx, yt+cy, w, h);
907
this.mkDiv(xr+cx, yb+cy, w, h);
908
this.mkDiv(xl+cx, yb+cy, w, h);
909
this.mkDiv(xl+cx, yt+cy, w, h);
914
this.setPrintable(false);
915
this.setFont('verdana,geneva,helvetica,sans-serif', String.fromCharCode(0x31, 0x32, 0x70, 0x78), Font.PLAIN);
916
this.color = '#000000';
918
this.wnd = wnd || window;
921
if (!(jg_ie || jg_dom || jg_ihtm)) chkDHTM();
922
if (typeof id != 'string' || !id) this.paint = pntDoc;
925
this.cnv = document.all? (this.wnd.document.all[id] || null)
926
: document.getElementById? (this.wnd.document.getElementById(id) || null)
928
this.defhtm = (this.cnv && this.cnv.innerHTML)? this.cnv.innerHTML : '';
929
this.paint = jg_dom? pntCnvDom : jg_ie? pntCnvIe : jg_ihtm? pntCnvIhtm : pntCnv;