用Javascript和DHTML构建的矢量图形库
2005-11-14 16:36
302 查看
http://dev.csdn.net/article/26/26606.shtm
序:在 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)
★ 性能( Performance )
在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中,我们可以利用、并设置具有背景颜色的 Div (或 Layer )元素,并且把这些 Div 元素缩小到与像素相似的大小,每一个 Div 元素代表了一个像素,然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候,要尽可能避免一些冗余的接连处,看下面的图:
<!--
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 id="stairsdemo" style="position:relative;width:350px;height:150px;">';
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.htm += '<//div><//td><//tr><//table>';
jg.paint();
//-->
从左至右,最左边的是最不好的画法,仔细看一下会发现阶梯状的每一行的连接处都会有一个 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 . 创建一个 jsGraphics 对象
2. 图形绘制函数
<!--
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<color.length; z++)
if (isNaN(parseInt(color.charAt(z), 16)))
color = color.substring(0, z) + '6' + color.substring(z+1);
var t0 = (new Date()).getTime();
jg2.setColor("#"+color);
jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value));
if (shape=="drawLine()")
jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value));
else if (shape=="drawRect()")
jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value));
else if(shape=="fillRect()")
jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value));
else if(shape=="drawEllipse()")
jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value));
else if(shape=="fillEllipse()")
jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value));
else if(shape=="fillPolygon()")
{
var pgx = f.fp_x.value.split(',');
var pgy = f.fp_y.value.split(',');
var comm = '/n /nNote:/nValues must be separated with commas from each other.';
if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm);
else
{
for (var z = 0; z<pgx.length; z++)
{
if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z])))
{
alert('Invalid x or y value.'+comm);
return;
}
}
jg2.fillPolygon(pgx, pgy);
}
}
jg2.paint();
var t1 = (new Date()).getTime() - t0;
jg3.clear();
jg3.setColor('#'+color);
jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD);
jg3.drawString(t1 + ' milliseconds', 0, 10);
jg3.paint();
}
var jg2=new jsGraphics("test");
var jg3 = new jsGraphics("dt");
//-->
序:在 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)
|
在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中,我们可以利用、并设置具有背景颜色的 Div (或 Layer )元素,并且把这些 Div 元素缩小到与像素相似的大小,每一个 Div 元素代表了一个像素,然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候,要尽可能避免一些冗余的接连处,看下面的图:
<!--
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 id="stairsdemo" style="position:relative;width:350px;height:150px;">';
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.htm += '<//div><//td><//tr><//table>';
jg.paint();
//-->
Image dynamically drawn with the Draw Shapes Library unfavourable better optimal |
按 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> 之间): | |||
| |||
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(); 的构造参数,像下面这样: | |||
| |||
如果有多个 div 元素,每一个 div 都需要有它自已的 jsGraphics 对象: | |||
| |||
b )在页面载入的时候绘制 (在 Netscape 4 和 Opera 5/6 可以执行) 只需要将构造参数设为空: | |||
| |||
为确保所有浏览器能正确执行, 这里选择页面载入时进行绘制,即上文的 b 方式 一旦产生这些图形对象(在这个示例中 jg, jg2 或 jg_doc ),就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示(采用上文 a 方式构造图形对象): | |||
| |||
开始画时应首先选择画笔颜色,否则,画笔的颜色取默认值-黑色。坐标值作为绘制图形方法的参数,如果采用上文的 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); |
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<color.length; z++)
if (isNaN(parseInt(color.charAt(z), 16)))
color = color.substring(0, z) + '6' + color.substring(z+1);
var t0 = (new Date()).getTime();
jg2.setColor("#"+color);
jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value));
if (shape=="drawLine()")
jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value));
else if (shape=="drawRect()")
jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value));
else if(shape=="fillRect()")
jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value));
else if(shape=="drawEllipse()")
jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value));
else if(shape=="fillEllipse()")
jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value));
else if(shape=="fillPolygon()")
{
var pgx = f.fp_x.value.split(',');
var pgy = f.fp_y.value.split(',');
var comm = '/n /nNote:/nValues must be separated with commas from each other.';
if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm);
else
{
for (var z = 0; z<pgx.length; z++)
{
if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z])))
{
alert('Invalid x or y value.'+comm);
return;
}
}
jg2.fillPolygon(pgx, pgy);
}
}
jg2.paint();
var t1 = (new Date()).getTime() - t0;
jg3.clear();
jg3.setColor('#'+color);
jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD);
jg3.drawString(t1 + ' milliseconds', 0, 10);
jg3.paint();
}
var jg2=new jsGraphics("test");
var jg3 = new jsGraphics("dt");
//-->
相关文章推荐
- 用Javascript和DHTML构建的矢量图形库
- Javascript、DHTML构建矢量图形库(折线、多边形、圆)
- 用Javascript和DHTML构建的矢量图形库
- 用Javascript和DHTML构建的矢量图形库
- javascript 矢量图形库
- Javascript的无new构建
- Javascript的无new构建实例详解
- 设计模式中的组合模式在JavaScript程序构建中的使用
- 基于Grunt构建一个JavaScript库
- 构建基于Javascript的移动web CMS——Hello,World
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
- javascript实现扁平数组构建树形结构(多级菜单应用)-优化
- DHTML【10】--Javascript
- 构建基于Javascript的移动web CMS——整合Django
- 构建基于Javascript的移动CMS——生成博客(二).路由
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
- 强大的矢量图形库:Raphael JS 中文帮助文档及教程
- JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
- 高级Javascript/DHTML技巧
- Javascript & DHTML 实例编程(教程)(三)初级实例篇1―上传文件控件实例