用Javascript和DHTML构建的矢量图形库

序:在 http://www.sitepoint.com/上看了 Simon 的一篇 BLOG ,引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/,并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js (感谢 Walter Zorn 开发了这个图形库),使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm,映入眼帘的是折线、多边形、圆等常见的一些几何图形,起初我以为不过是一些图片罢了,当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后,并细细阅读了关于它的说明后,才意识到除了VML 和 SVG可以在 网页上绘制显示矢量图形,仅用DHTML 和 Javascript 同样可以做到这一切!是不是觉得很吃惊呢?(双击一下这个文档,看看放大后的矢量图形吧),ok!废话少说,下面我将详细介绍一下这个图形库。

总览 (overview)

该图形库使用了 DHTML 和 Javascript 技术,它可以画线,圆,椭圆,折线,多边形,矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的,另外,使用这个图形库画出的图形是完全被优化到像素级的!

试着由给定的参数画几个图形 (Try it out)

x1  y1  x2  y2  
x  y  w  h  
x  y  w  h  
x  y
x  y  w  h  
x  y  w  h  
setColor("# ") setStroke( ) setStroke(Stroke.DOTTED )
Test Canvas

 

性能( Performance

在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中,我们可以利用、并设置具有背景颜色的 Div (或 Layer )元素,并且把这些 Div 元素缩小到与像素相似的大小,每一个 Div 元素代表了一个像素,然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候,要尽可能避免一些冗余的接连处,看下面的图:

从左至右,最左边的是最不好的画法,仔细看一下会发现阶梯状的每一行的连接处都会有一个 Div 连接,这个 Div 是没有用的,应该被删除;中间的画法已经很不错了,但应该再优化一下,以第一行为例:用三个 Div 表现水平的一行是多余的,应合为一个,同样垂直方向的 Div 也应合并(例如阶梯的末尾)。

按 Walter Zorn 所言,在画矢量图形时为获得更好的性能,并尽可能避免上述的一些冗余,他用了最好、最快速的算法,只用最少、最必要的 Div 元素来绘制图形。

需要说明的是,不要把这个图形库与用 Java 语言或其它语言开发的图形应用程序相比较,要知道,受基本的 HTML 和浏览器约束,采用 Javascript 脚本语言创建 Div 元素是非常慢的,在这里能达到图形绘制的最优化都已经是最好的结果。在使用这个图形库时,所绘制的图形像素最好不要超过 600 - 1000 像素。

是否应该选择 SVG? 目前具有 SVG 能力的浏览器或使用 SVG 插件的浏览器仍然是少数,所以如果你要画一些简单的矢量图形,使用这个矢量图形库还是一个不错的选择。

浏览器的兼容性

Linux 系统 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

Windows 系统 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

说明:如果在网页全部加载完成后,使用这个矢量图形库进行绘制,在 Opera 版本 7 以前的浏览器中不会执行, Netscape 版本 4 也不会执行。相反,当 HTML 页面正在被解析时, 使用这个图形库进行绘制是全部浏览器均能做到的。

怎样使用这个矢量图形库?

1 .包含这个库

插入下面的代码到你的 html 文件的开头部分(在 <head> 和 </head> 之间):

<script type="text/javascript" src="wz_jsgraphics.js"></script>

2 .使用层( div 或 layer )作为画布( canvases )
如果是当页面正被载入时,直接在 html 页面中绘制,那么这个步骤不是必须的。

如果在页面加载完成后绘制,应该设置几个具有绝对坐标的层,作为你的画布,每一个层应该有一个唯一的 id:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>

3 .下载并保存这个图形库

到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip下载,将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中,如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下,记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。

怎样使用这个矢量图形库中的绘制函数?

1 创建一个 jsGraphics 对象

a) 在页面完全载入后绘制:

(这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行)

还记得前面用 div 元素创建的画布吗?看下面的示例, 需要为 div 创建相应的 jsGraphics 对象,这些代码必须插入到相关的 div 元素结束标志 </div> 后面, 但必须在 </body> 的前面, div 元素的 id 作为 new jsGraphics(); 的构造参数,像下面这样:

<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");

//-->
</script>

如果有多个 div 元素,每一个 div 都需要有它自已的 jsGraphics 对象:

<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

//-->
</script>

b )在页面载入的时候绘制
(在 Netscape 4 和 Opera 5/6 可以执行)

只需要将构造参数设为空:

<script type="text/javascript">
<!--

var jg_doc = new jsGraphics();

//-->
</script>

你可以选择 jg,jg2 或 jg_doc 其它的变量名,只要不违反 Javascript 的命名规则就可以。

2. 图形绘制函数

为确保所有浏览器能正确执行, 这里选择页面载入时进行绘制,即上文的 b 方式

一旦产生这些图形对象(在这个示例中 jg, jg2 或 jg_doc ),就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示(采用上文 a 方式构造图形对象):

<script type="text/javascript">
<!--
function myDrawFunction()
{
jg_doc.setColor("#00ff00"); // 选择绿色
jg_doc.fillEllipse(100, 200, 100, 180); // 坐标点相对于文档 (document)
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint(); // 注意:直接在文档上绘制,而不与某个 div 关联 ,

jg.setColor("#ff0000"); // 选择红色
jg.drawLine(10, 113, 220, 55); // 坐标点相对于 div 元素 "myCanvas"
jg.setColor("#0000ff"); // 选择蓝色
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff"); // 选择蓝色
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();
}

var jg_doc = new jsGraphics(); // 直接在文档上绘制
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>

开始画时应首先选择画笔颜色,否则,画笔的颜色取默认值-黑色。坐标值作为绘制图形方法的参数,如果采用上文的 a 方式构造图形对象,那么坐标值是相对于 div 元素的左上角的。每一个画布(图形对象),它的 paint 方法必须被显示的调用以产生 html 格式的图形,否则,在你的屏幕上什么都不会发生。



函数名(方法) 示例代码(用 jg 图形对象)

setColor( "#HexColor" );
指定画笔颜色,一旦设置后,这个颜色会一直保留,直到下一次再重新指定画笔颜色,这个颜色值可以类似于 html 中的 #rrggbb 颜色表示,用名称表示颜色也可以,例如:“ maroon ”

jg.setColor("#ff0000");

or with identical result

jg.setColor("red");

setStroke( Number );
指定画笔采用的线厚度,这个厚度一旦被设置,会一直保留,直到下一次重新指定一,默认厚度是 1px.
要设置点划线型,需要传 Stroke.DOTTED 参数,点划线型同样适用于矩形,多边型,折线和椭圆。

jg.setStroke(3);

or

jg.setStroke(Stroke.DOTTED);

drawLine( X1, Y1, X2, Y2 );
画线。从第一个坐标点到第二个坐标点,线的厚度由 setStroke 设置。

jg.drawLine(20,50,453,40);

drawPolyline( Xpoints, Ypoints );
一条折线是一系列线段的集合, Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合,必须像下面这样声明:

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

var Xpoints = new Array(10,85,93,60);
var YPoints = new Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints);

drawRect( X, Y, width, height );

一个矩形的外边线。参照左上角的坐标点,并指定矩形的宽度和高度。

jg.drawRect(20,50,70,140);

fillRect( X, Y, width, height );

填充矩形,参照左上角的坐标点,并指定矩形的宽度和高度。

jg.fillRect(20,50,453,40);

drawPolygon( Xpoints, Ypoints );
多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合,必须像下面这样声明:

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

如果始点和终点末被指定,多边线将会自动闭合。

var Xpoints = new Array(10,85,93,60);
var Ypoints = new Array(50,10,105,87);
jg.drawPolygon(Xpoints, Ypoints);

Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.

fillPolygon( Xpoints, Ypoints );

填充矩形。参数作用见 drawPolygon()

jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));

drawEllipse( X, Y, width, height );

画椭圆边线。参照椭圆的外接矩形, x 和 y 是这个外接矩形的左上角坐标

jg.drawEllipse(20,50,70,140);
or
jg.drawOval(20,50,70,140);

fillEllipse( X, Y, width, height );
填充椭圆。参数见 drawEllipse()

jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141);

drawString( "Text", X, Y );

写文本至由 x 和 y 坐标指定的位置。不同于 Java ,坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义,举个例子:

"Some Text<br>more Text" 会被转义为两行


setFont( "font-family", "size+unit", Style );
在 drawString() 之前调用。指定字体,大小,样式,字体和大小可以是与 HTML 中指示的一样,至于样式,可以使用的有:
Font.PLAIN 默认样式,非粗体和斜体
Font.BOLD 粗体
Font.ITALIC 斜体

它们可以结合使用

jg.setFont("arial","15px",Font.BOLD);
jg.drawString("Some Text",20,50);

drawImage( "src", X, Y, width, height );
在指定的位置画图像, ”src” 参数指定图像所在路径, width 和 height 参数允许调整图像宽高。

jg.drawImage("friendlyDog.jpg", 20,50,100,150);

paint();
必须显示调用,才能真正在 html 页面上画图形,不推荐每隔一段(每画一个图形)就调用一次。

像下面这样的调用应该避免 :
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...

像下面这样的调用性能会很高 :
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*... 还有其它画的方法 ... */
jg.paint(); // 最后调用 paint()

jg.paint();

clear();

与图形对象关联的 div 画布中的图形被清除(在 div 中不是由这个图形对象创建的内容是不会被改变的)

jg.clear();

setPrintable( true );

默认情况下,打印这些图形是不太可行的,因为浏览器的默认打印设置中会关闭打印背景,调用 setPrintable() ,并设置参数为 true ,将重置图形为可打印的(至少在 Mozilla/Netscape 6+ and IE 中)

jg.setPrintable(false);

<script language="JavaScript"> var jg_ihtm, jg_ie, jg_fast, jg_dom, jg_moz, jg_n4 = (document.layers && typeof document.classes != "undefined"); function chkDHTM(x, i) { x = document.body || null; jg_ie = x && typeof x.insertAdjacentHTML != "undefined"; jg_dom = (x && !jg_ie && typeof x.appendChild != "undefined" && typeof document.createRange != "undefined" && typeof (i = document.createRange()).setStartBefore != "undefined" && typeof i.createContextualFragment != "undefined"); jg_ihtm = !jg_ie && !jg_dom && x && typeof x.innerHTML != "undefined"; jg_fast = jg_ie && document.all && !window.opera; jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined"; } function pntDoc() { this.wnd.document.write(jg_fast? this.htmRpc() : this.htm); this.htm = ''; } function pntCnvDom() { var x = document.createRange(); x.setStartBefore(this.cnv); x = x.createContextualFragment(jg_fast? this.htmRpc() : this.htm); this.cnv.appendChild(x); this.htm = ''; } function pntCnvIe() { this.cnv.insertAdjacentHTML("beforeEnd", jg_fast? this.htmRpc() : this.htm); this.htm = ''; } function pntCnvIhtm() { this.cnv.innerHTML += this.htm; this.htm = ''; } function pntCnv() { this.htm = ''; } function mkDiv(x, y, w, h) { this.htm += '
'; } function mkDivIe(x, y, w, h) { this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';'; } function mkDivPrt(x, y, w, h) { this.htm += '
'; } function mkLyr(x, y, w, h) { this.htm += ' /n'; } var regex = /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g; function htmRpc() { return this.htm.replace( regex, '
/n'); } function htmPrtRpc() { return this.htm.replace( regex, '
/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) { ++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) { 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) { 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 (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) { ++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) { 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) { 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) { if (drw) this.mkDiv(x, y, 1, 1); drw = !drw; if (p > 0) { y += yIncr; p += pru; } else p += pr; ++x; } if (drw) this.mkDiv(x, y, 1, 1); } else { var pr = dx<<1, pru = pr - (dy<<1), p = pr-dy; while ((dy--) > 0) { 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)+1, cx = left+a, cy = top+b, x = 0, y = b, ox = 0, oy = b, aa = (a*a)<<1, bb = (b*b)<<1, st = (aa>>1)*(1-(b<<1)) + bb, tt = (bb>>1) - aa*((b<<1)-1), w, h; while (y > 0) { if (st < 0) { st += bb*((x<<1)+3); tt += (bb<<1)*(++x); } else if (tt < 0) { st += bb*((x<<1)+3) - (aa<<1)*(y-1); tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3); w = x-ox; h = oy-y; if (w&2 && h&2) { this.mkOvQds(cx, cy, -x+2, ox+wod, -oy, oy-1+hod, 1, 1); this.mkOvQds(cx, cy, -x+1, x-1+wod, -y-1, y+hod, 1, 1); } else this.mkOvQds(cx, cy, -x+1, ox+wod, -oy, oy-h+hod, w, h); ox = x; oy = y; } else { tt -= aa*((y<<1)-3); st -= (aa<<1)*(--y); } } this.mkDiv(cx-a, cy-oy, a-ox+1, (oy<<1)+hod); this.mkDiv(cx+ox+wod, cy-oy, a-ox+1, (oy<<1)+hod); } 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)+1, cx = left+a, cy = top+b, x = 0, y = b, aa = (a*a)<<1, bb = (b*b)<<1, st = (aa>>1)*(1-(b<<1)) + bb, tt = (bb>>1) - aa*((b<<1)-1); if (s-4 < 0 && (!(s-2) || width-51 > 0 && height-51 > 0)) { var ox = 0, oy = b, w, h, pxl, pxr, pxt, pxb, pxw; while (y > 0) { if (st < 0) { st += bb*((x<<1)+3); tt += (bb<<1)*(++x); } else if (tt < 0) { st += bb*((x<<1)+3) - (aa<<1)*(y-1); tt += (bb<<1)*(++x) - aa*(((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, ox-pxw+w+wod, -oy, -h+oy+hod, pxw, h); ox = x; oy = y; } else { tt -= aa*((y<<1)-3); st -= (aa<<1)*(--y); } } this.mkDiv(cx-a, cy-oy, s, (oy<<1)+hod); this.mkDiv(cx+a+wod-s+1, cy-oy, s, (oy<<1)+hod); } else { var _a = (width-((s-1)<<1))>>1, _b = (height-((s-1)<<1))>>1, _x = 0, _y = _b, _aa = (_a*_a)<<1, _bb = (_b*_b)<<1, _st = (_aa>>1)*(1-(_b<<1)) + _bb, _tt = (_bb>>1) - _aa*((_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) { st += bb*((x<<1)+3); tt += (bb<<1)*(++x); pxl[pxl.length] = x; pxt[pxt.length] = y; } else if (tt < 0) { st += bb*((x<<1)+3) - (aa<<1)*(y-1); tt += (bb<<1)*(++x) - aa*(((y--)<<1)-3); pxl[pxl.length] = x; pxt[pxt.length] = y; } else { tt -= aa*((y<<1)-3); st -= (aa<<1)*(--y); } if (_y > 0) { if (_st < 0) { _st += _bb*((_x<<1)+3); _tt += (_bb<<1)*(++_x); _pxb[_pxb.length] = _y-1; } else if (_tt < 0) { _st += _bb*((_x<<1)+3) - (_aa<<1)*(_y-1); _tt += (_bb<<1)*(++_x) - _aa*(((_y--)<<1)-3); _pxb[_pxb.length] = _y-1; } else { _tt -= _aa*((_y<<1)-3); _st -= (_aa<<1)*(--_y); _pxb[_pxb.length-1]--; } } } var ox = 0, 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+1, ox+wod, -oy, _oy+hod, x-ox, oy-_oy); ox = x; oy = pxt[i]; _oy = _pxb[i]; } } else { x = pxl[i]; this.mkDiv(cx-x+1, 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, cx = left+a, cy = top+b, x = 0, y = b, aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1, st = (aa2>>1)*(1-(b<<1)) + bb, tt = (bb>>1) - aa2*((b<<1)-1), drw = true; while (y > 0) { if (st < 0) { st += bb*((x<<1)+3); tt += (bb<<1)*(++x); } else if (tt < 0) { st += bb*((x<<1)+3) - aa4*(y-1); tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3); } else { tt -= aa2*((y<<1)-3); st -= aa4*(--y); } if (drw) this.mkOvQds(cx, cy, -x, x+wod, -y, y+hod, 1, 1); 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(id, wnd) { this.setColor = new Function('arg', 'this.color = arg.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 = jg_n4? mkLyr : 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, s) { for (var i=0 ; i >1, b = (h -= 1)>>1, wod = (w&1)+1, hod = (h&1)+1, cx = left+a, cy = top+b, x = 0, y = b, ox = 0, oy = b, aa2 = (a*a)<<1, aa4 = aa2<<1, bb = (b*b)<<1, st = (aa2>>1)*(1-(b<<1)) + bb, tt = (bb>>1) - aa2*((b<<1)-1), pxl, dw, dh; if (w+1) while (y > 0) { if (st < 0) { st += bb*((x<<1)+3); tt += (bb<<1)*(++x); } else if (tt < 0) { st += bb*((x<<1)+3) - aa4*(y-1); pxl = cx-x; dw = (x<<1)+wod; tt += (bb<<1)*(++x) - aa2*(((y--)<<1)-3); dh = oy-y; this.mkDiv(pxl, cy-oy, dw, dh); this.mkDiv(pxl, cy+oy-dh+hod, dw, dh); ox = x; oy = y; } else { tt -= aa2*((y<<1)-3); st -= aa4*(--y); } } this.mkDiv(cx-a, cy-oy, w+1, (oy<<1)+hod); }; 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(integer_compare); for (i = 0; i < ints; i+=2) { w = polyInts[i+1]-polyInts[i]; this.mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1); } } }; this.drawString = function(txt, x, y) { this.htm += '
'+ txt + ' '; }; this.drawImage = function(imgSrc, x, y, w, h) { this.htm += '
'+ ' '+ ' '; }; this.clear = function() { this.htm = ""; if (this.cnv) this.cnv.innerHTML = this.defhtm; }; this.mkOvQds = function(cx, cy, xl, xr, yt, yb, w, h) { this.mkDiv(xr+cx, yt+cy, w, h); this.mkDiv(xr+cx, yb+cy, w, h); this.mkDiv(xl+cx, yb+cy, w, h); this.mkDiv(xl+cx, yt+cy, w, h); }; this.setStroke(1); this.setFont('verdana,geneva,helvetica,sans-serif', String.fromCharCode(0x31, 0x32, 0x70, 0x78), Font.PLAIN); this.color = '#000000'; this.htm = ''; this.wnd = wnd || window; if (!(jg_ie || jg_dom || jg_ihtm)) chkDHTM(); if (typeof id != 'string' || !id) this.paint = pntDoc; else { this.cnv = document.all? (this.wnd.document.all[id] || null) : document.getElementById? (this.wnd.document.getElementById(id) || null) : null; this.defhtm = (this.cnv && this.cnv.innerHTML)? this.cnv.innerHTML : ''; this.paint = jg_dom? pntCnvDom : jg_ie? pntCnvIe : jg_ihtm? pntCnvIhtm : pntCnv; } this.setPrintable(false); } function integer_compare(x,y) { return (x < y) ? -1 : ((x > y)*1); } </script> <script language="javascript"> var no_dhtm = (document.layers || window.opera && !document.defaultView); function ZOOM() { if (document.body && document.body.style && typeof document.body.style.zoom != "undefined") { if (document.body.style.zoom=="400%") document.body.style.zoom = "100%"; else { document.body.style.zoom = "400%"; alert('You/'ve doubleclicked on the document./nDoubleclick again to unzoom.'); } } } document.οndblclick=ZOOM; function DRAW(shape) { if (jg_n4 || window.opera && !document.defaultView) { alert('In Netscape 4 and Opera < version 7, the functionality/n"Draw into a canvas, even after the page has fully loaded" isn/'t available./nThese browsers can only draw directly into the document/nwhile the page is parsed.'); return; } if (window.event) event.cancelBubble = true; var f=document.forms[0]; var color = ''+f.Color.value; for (var z = 0; z >1, b = height>>1, cx = left + a*fact, cy = top + b*fact, x = 0, y = b, ox = 0, oy = b, a2 = (a*a)<<1, b2 = (b*b)<<1, st = (a2>>1)*(1-(b<<1)) + b2, tt = (b2>>1) - a2*((b<<1)-1); if (bad) hnd.drawRect(cx+fact*x, cy-fact*y, fact, fact); do { if (st<0) { st += b2*((x<<1)+3); tt += (b2<<1)*(x+1); x++; } else if (tt<0) { st += b2*((x<<1)+3) - (a2<<1)*(y-1); tt += (b2<<1)*(x+1) - a2*((y<<1)-3); x++; y--; if (!bad) hnd.drawRect(cx+fact*ox, cy-fact*oy, fact*(x-ox), fact*(oy-y)); ox = x; oy = y; } else { st -= (a2<<1)*(y-1); tt -= a2*((y<<1)-3); y--; } if (bad) hnd.drawRect(cx+fact*x, cy-fact*y, fact, fact); } while (y>0); if (!bad) hnd.drawRect(cx+fact*ox, cy-fact*oy, fact*(a-ox+1), fact*(oy+1)); } var jg = new jsGraphics("stairsdemo"); jg.setFont("verdana,geneva,sans-serif", "10px", Font.PLAIN); jg.setColor("#ee8800"); jg.drawString("Image dynamically drawn with the Draw Shapes Library", 0, 2); jg.setFont("verdana,geneva,sans-serif", "11px", Font.PLAIN); jg.setColor("#ff0099"); jg.drawString("unfavourable", 10, 129); jg.drawRect(0, 25, 10, 10); jg.drawRect(10, 25, 10, 10); jg.drawRect(20, 25, 10, 10); jg.drawRect(20, 35, 10, 10); jg.drawRect(30, 35, 10, 10); jg.drawRect(40, 35, 10, 10); jg.drawRect(40, 45, 10, 10); jg.drawRect(50, 45, 10, 10); jg.drawRect(60, 45, 10, 10); jg.drawRect(60, 55, 10, 10); jg.drawRect(60, 65, 10, 10); jg.drawRect(70, 65, 10, 10); jg.drawRect(70, 75, 10, 10); jg.drawRect(70, 85, 10, 10); jg.drawRect(80, 85, 10, 10); jg.drawRect(80, 95, 10, 10); jg.drawRect(80, 105, 10, 10); jg.setColor("#008800"); jg.drawString("better", 130, 129); drwPxOv(jg, 30, 25, 16, 16, 10, true); jg.setColor("#0000cc"); jg.drawString("optimal", 260, 129); drwPxOv(jg, 150, 25, 16, 16, 10); jg.paint(); </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值