当前页面: 开发资料首页 → Javascript 专题 → 用Javascript和DHTML构建的矢量图形库
用Javascript和DHTML构建的矢量图形库
摘要: 用Javascript和DHTML构建的矢量图形库
<script language=javascript>
/* This notice must be untouched at all times.
wz_jsgraphics.js v. 2.3
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: 15. 3. 2004
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 and ellipses
- to draw text.
NOTE: Operations, functions and branching have rather been optimized
to efficiency and speed than to shortness of source code.
This program is free software;
you can redistribute it and/or modify it under the terms of the
GNU General Public License as published by the Free Software Foundation;
either version 2 of the License, or (at your option) any later version.
This program 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 General Public License
at http://www.gnu.org/copyleft/gpl.html for more details.
*/
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 += '<\/div>';
}
function mkDivIe(x, y, w, h)
{
this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
}
function mkDivPrt(x, y, w, h)
{
this.htm += '
序：在 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)
<table cellSpacing=1 cellPadding=0 width="100%" border=0> <tr> <td bgColor=white> <form action=""> <table cellSpacing=0> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=drawLine() name=button></td> <td>x1 <input maxLength=4 size=5 value=50 name=dl_x1> </td> <td>y1 <input maxLength=4 size=5 value=-330 name=dl_y1> </td> <td>x2 <input maxLength=4 size=5 value=500 name=dl_x2> </td> <td>y2 <input maxLength=4 size=5 value=800 name=dl_y2> </td></tr> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=drawRect() name=button2></td> <td>x <input maxLength=4 size=5 value=130 name=dr_x> </td> <td>y <input maxLength=4 size=5 value=20 name=dr_y> </td> <td>w <input maxLength=4 size=5 value=490 name=dr_w> </td> <td>h <input maxLength=4 size=5 value=80 name=dr_h> </td></tr> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=fillRect() name=button2></td> <td>x <input maxLength=4 size=5 value=-70 name=fr_x> </td> <td>y <input maxLength=4 size=5 value=130 name=fr_y> </td> <td>w <input maxLength=4 size=5 value=160 name=fr_w> </td> <td>h <input maxLength=4 size=5 value=100 name=fr_h> </td></tr> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=fillPolygon() name=button2></td> <td colSpan=4>x <input size=25 value=80,126,-30,-60 name=fp_x> y <input size=25 value=0,130,40,100 name=fp_y> </td></tr> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=drawEllipse() name=button2></td> <td>x <input maxLength=4 size=5 value=350 name=do_x> </td> <td>y <input maxLength=4 size=5 value=-30 name=do_y> </td> <td>w <input maxLength=3 size=5 value=140 name=do_w> </td> <td>h <input maxLength=4 size=5 value=250 name=do_h> </td></tr> <tr align=right> <td><input style="WIDTH: 100%" onclick=DRAW(this.value) type=button value=fillEllipse() name=button2></td> <td>x <input maxLength=4 size=5 value=20 name=fo_x> </td> <td>y <input maxLength=4 size=5 value=150 name=fo_y> </td> <td>w <input maxLength=4 size=5 value=440 name=fo_w> </td> <td>h <input maxLength=4 size=5 value=800 name=fo_h> </td></tr> <tr> <td colSpan=5> <table cellSpacing=0 cellPadding=0 width="100%"> <tr> <td>setColor("# <input maxLength=6 size=7 value=00aaaa name=Color> ") </td> <td align=middle>setStroke( <input maxLength=2 size=3 value=4 name=Stroke> ) </td> <td align=right>setStroke(Stroke.DOTTED <input type=checkbox name=Dotted> ) </td></tr></table><input style="FONT-WEIGHT: bold; WIDTH: 290px" onclick=;if(jg2)jg2.clear(); type=button value="clear() this test area" name=button2> </td></tr> <tr> <td colSpan=5 height=250>
★ 性能（ Performance ）
在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中，我们可以利用、并设置具有背景颜色的 Div （或 Layer ）元素，并且把这些 Div 元素缩小到与像素相似的大小，每一个 Div 元素代表了一个像素，然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候，要尽可能避免一些冗余的接连处，看下面的图：
<script type=text/javascript> function drwPxOv(hnd, left, top, width, height, fact, bad) { var a = width>>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)); } /////////////// Pixel stairs demo /////////////// var jg = new jsGraphics(); jg.htm += '<table align="left" width="354" cellpadding="0"><tr><td height="150" valign="top">从左至右，最左边的是最不好的画法，仔细看一下会发现阶梯状的每一行的连接处都会有一个 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 页面正在被解析时， 使用这个图形库进行绘制是全部浏览器均能做到的。
★ 怎样使用这个矢量图形库？
<table borderColor=#ffffff cellPadding=0 bgColor=#e6e6e6> <tr> <td>1 ．包含这个库
插入下面的代码到你的 html 文件的开头部分（在 <head> 和 </head> 之间）：
</td> <td></td></tr> <tr> <td> <table cellSpacing=0 cellPadding=0> <tr> <td> <table cellSpacing=1 cellPadding=0> <tr> <td><script type="text/javascript" src="wz_jsgraphics.js"></script>
</td></tr></table></td></tr></table></td> <td></td></tr> <tr> <td>2 ．使用层（ div 或 layer ）作为画布（ canvases ）
如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。
如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:
...
</td> <td></td></tr> <tr> <td>
3 ．下载并保存这个图形库
到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。
</td> <td></td></tr></table>
★ 怎样使用这个矢量图形库中的绘制函数？
1 ． 创建一个 jsGraphics 对象
<table cellPadding=0> <tr> <td>a) 在页面完全载入后绘制：
（这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）
还记得前面用 div 元素创建的画布吗？看下面的示例， 需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志 后面， 但必须在 </body> 的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：
</td></tr> <tr> <td> <table cellSpacing=0 cellPadding=0> <tr> <td> <table cellSpacing=1 cellPadding=0> <tr> <td bgColor=#e6e6e6><script type="text/javascript">
<tr>
<td>
如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：
</td></tr> <tr> <td> <table cellSpacing=0 cellPadding=0> <tr> <td> <table cellSpacing=1 cellPadding=0> <tr> <td bgColor=#e6e6e6><script type="text/javascript">
<td></td></tr>
<tr>
<td>
b ）在页面载入的时候绘制
（在 Netscape 4 和 Opera 5/6 可以执行）
只需要将构造参数设为空：
</td> <td></td></tr> <tr> <td> <table cellSpacing=0 cellPadding=0> <tr> <td> <table cellSpacing=1 cellPadding=0> <tr> <td bgColor=#e6e6e6><script type="text/javascript">
你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。
</td> <td></td></tr> <tr> <td></td> <td></td></tr></table>
2. 图形绘制函数
<table cellPadding=0> <tr> <td>为确保所有浏览器能正确执行， 这里选择页面载入时进行绘制，即上文的 b 方式
一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：
</td> <td></td></tr> <tr> <td> <table cellSpacing=0 cellPadding=0> <tr> <td> <table cellSpacing=1 cellPadding=0> <tr> <td bgColor=#e6e6e6><script type="text/javascript">
<td></td></tr>
<tr>
<td>
开始画时应首先选择画笔颜色，否则，画笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。
</td> <td></td></tr></table><table class=mytab cellSpacing=0 cellPadding=0> <tr class=mytd> <td class=mytd align=middle bgColor=#e6e6e6>函数名（方法） </td> <td class=mytd align=middle bgColor=#e6e6e6>示例代码（用 jg 图形对象） </td></tr> <tr class=mytd> <td class=mytd vAlign=top>
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);
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>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 );
一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。
</td> <td class=mytd vAlign=top>jg.drawRect(20,50,70,140);
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>fillRect( X, Y, width, height );
填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。
</td> <td class=mytd vAlign=top>jg.fillRect(20,50,453,40);
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>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);
如果始点和终点末被指定，多边线将会自动闭合。
</td> <td class=mytd vAlign=top>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()
</td> <td class=mytd vAlign=top>jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>drawEllipse( X, Y, width, height );
画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标
</td> <td class=mytd vAlign=top>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
more Text" 会被转义为两行
setFont( "font-family", "size+unit", Style );
在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有：
Font.PLAIN 默认样式，非粗体和斜体
Font.BOLD 粗体
Font.ITALIC 斜体
它们可以结合使用
</td> <td class=mytd vAlign=top>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);
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>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();
</td></tr> <tr class=mytd> <td class=mytd vAlign=top>clear();
与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）
</td> <td class=mytd vAlign=top>jg.clear();
setPrintable( true );
默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）
</td> <td class=mytd vAlign=top>jg.setPrintable(false);
<script type=text/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.ondblclick=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[1]; var color = ''+f.Color.value; for (var z = 0; z
↑返回目录
前一篇: 关于javascript树形结构的编写问题
后一篇: javascript: 改变和控制显示的图片大小（保持比例，同时可限制高宽）
版权所有 Copyright © 2006-2007, Java 编程资料牛鼻站, All rights reserved