javascript + DHTMl 画图

======================================================
注：本文源代码点此下载
======================================================

csdn - 文档中心 - javascript

阅读:11689   评论: 8    参与评论

标题

  用javascript和dhtml构建的矢量图形库     选择自 yjgx007 的 blog

关键字

  javascript dhtml 矢量图

出处

  http://www.walterzorn.com/index.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)

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 模型来画矢量图形的时候,要尽可能避免一些冗余的接连处,看下面的图:

image dynamically drawn with the draw shapes library

unfavourable

better

optimal

image dynamically drawn with the draw shapes library

unfavourable

better

optimal

从左至右,最左边的是最不好的画法,仔细看一下会发现阶梯状的每一行的连接处都会有一个 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 文件的开头部分(在之间):

2 .使用层( div 或 layer )作为画布( canvases )

如果是当页面正被载入时,直接在 html 页面中绘制,那么这个步骤不是必须的。

如果在页面加载完成后绘制,应该设置几个具有绝对坐标的层,作为你的画布,每一个层应该有一个唯一的 id:

...

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 元素的 id 作为 new jsgraphics(); 的构造参数,像下面这样:

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

b )在页面载入的时候绘制

(在 netscape 4 和 opera 5/6 可以执行)

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

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

2. 图形绘制函数

为确保所有浏览器能正确执行, 这里选择页面载入时进行绘制,即上文的 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

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);

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/