walterzorn 系列-画线、圆、椭圆(卵形)、折线、多边形、矩形

作者:vkvi 来源:ITPOW(原创) 日期:2008-11-30

www.walterzorn.com 网站提供一些功能非常好的 JavaScript 封装,ITPOW以中文的形式介绍该网站的产品。

画线、圆、椭圆(卵形)、折线、多边形、矩形。

高性能 JavaScript 矢量图形库。

由 Walter Zorn 开发

这个 JavaScript 矢量图形库提供 JavaScript 图形能力:在网页上动画绘制圆、椭圆(卵形)、斜线、折线和多边形(比如三角形、长方形)的函数。即使你没有 JavaScript 经验,使用矢量图形库应该也是非常轻松的。这个 JavaScript 绘制图形矢量图库的另一个目标是达到优化性能并且清除像素的梯阶效应模式(像素优化)。

性能

在 HTML 中并没有像斜线、圆、椭圆或其它一些非方形的元素可供使用。在一个工作区中,像素通过创建小的带背景颜色的层(DIV 元素)来创建,并把它们排列成想要的模型。为模型的每一个像素创建单独的 DIV,但是,由于每一个 DIV 不可避免地占用浏览器对象的开销,效率将是非常低的。

JavaScript 画图性能 要减少这样的开销数量并且将性能优化到可能的值,这个绘制形状 JavaScript 矢量图形库使用了快速算法(基于 Bresenham 算法)来完成形状,通过合并每一个可能的 DIV 来减少产生的 DIV 数量。因为,如左图所示,DIV 数量由一个像素减少为一梯阶一个像素。对于填充形状,wz_jsgraphics.js 的好处更大,如本段下图所示用多种颜色填充一个椭圆-想象一下,对比一下,一个由 1*1 像素的 DIV 组成的椭圆……

filloval

但是,不要把性能与 Java 或独立程序比较!

让浏览器创建 DIV 元素当然比像素着色慢,即使是这个 JavaScript 矢量图库也逃脱不了这个基础限制-它只是尽量努力挤出大量的 DIV。强烈建议克制住创建二维方向上均为 600-1000 像素的形状。

选择 SVG 或 <canvas> 标签?

两种技术当前都没有获得 IE 的内在支持,IE 是 VML,另一方面,VML 又不被其它浏览器支持。因此你可能应该选择使用这个矢量图库作为小型或不复杂的图形元素,大概可以在超过 95% 的 Internet 用户计算机上使用。还有,这个矢量图形库允许图形溢过画面的边缘,它们几乎可以在网页的任何地方呈现。

跨浏览器性能?

Linux:

Gecko 引擎的浏览器(Mozilla、Netscape 6+、Galeon)、Konqueror、Opera 5, 6 和 7+。

Windows:

Gecko 浏览器,IE 4, 5 和 6、Opera 5, 6 和 7+。

Mac:

Safari、Gecko 浏览器、Opera、部分 IE。

“即使网页读完也可以绘制到 html 元素”这一功能在 Opera 7 以前的版本是不适用,而“当网页解析完绘制到文档”这一功能是跨浏览器的。

说明:如何使用 JavaScript 图形库

1、下载库

下载 JavaScript Vector Graphics Library。注意:使用你下载的文件,不要直接从我的站点(指 walterzorn 网站)连接 wz_jsgraphics.js 到你的站点。

wz_jsgraphics.zip wz_jsgraphics.js 3.03,按 LGPL 发布。

2、包含库

解压文件到你的 html 文件目录。插入下面的代码到 html 文件的 head 节,在 <head> 和 </head> 之间-如果你想使用不同的目录,更改路径 src="wz_jsgraphics.js":

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

3、HTML:<div> 元素作为画布

本步骤对于“当网页解析完绘制到文档”模式不是必须的。但是,要使用即使页面读取完成也可以绘制到 DIV 元素,除绝对定位的层(DIV 元素)之外,相对定位是作为画布最好的选择。每一个这些层都必须有唯一的 ID。

<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>

如何画形状

1、创建一个 jsGraphics 对象

a) 即使网页读完也可以绘制到 html 元素(本模式不适用于 Opera 5 和 6)

参照下面的例子看看如何为用于画布的 DIV 元素创建 jsGraphics。这些代码应该插在相关 DIV 元素之后,但应该在 body 闭标签之前。构造函数 new jsGraphics() 需要用引号括起来的画布的 DIV 的 ID,或者直接就是 DIV 的引用。

<script type="text/javascript">
<!--
var jg = new jsGraphics("myCanvas");
//-->
</script>
 
或者
 
<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
//-->
</script>

如果有多个分开的 DIV 元素,每一个元素都需要有自己的 jsGraphics 实例:

<script type="text/javascript">
<!--
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
//-->
</script>

b) 当网页解析完绘制到文档

在 Opera 5/6 中也能工作。代替 DIV 元素的 ID 的是不需要向构造函数传递任何东西,或者传递值 null:

<script type="text/javascript">
<!--
var jg_doc = new jsGraphics();
//-->
</script>

你可以选择其它的变量代替 jg、jg2 或 jg_doc,确保它遵从 JavaScript 变量命名的规则。

2、画形状的函数

一量创建 graphics 对象(示例中的 jg、jg2 或 jg_doc),就可以调用画形状的方法了。特定对象产生的形状将绘制到相关的 html 元素,模式 b 中是绘制到文档。

<script type="text/javascript">
<!--
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document
 
  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();
  
  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
 
var jg_doc = new jsGraphics(); // draw directly into document
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
 
myDrawFunction();
 
//-->
</script>

如示例所示,开头 pen 的颜色应该被设置,否则将使用默认颜色。如果是模式 b,文档左上角作为绘制的坐标,否则是相关 DIV 的左上角作为坐标原点。每一个画布(graphics 对象)必须单独显式调用 paint() 呈现其内在产生的 html 元素,否则你的屏幕上将不会有任何东西。

方法说明

说明:若要传送数字,则必须传送整数,像 input 的 value 这些是字符串,若要转换成数字,请使用 parseInt() 或 Math.round()

setColor("#HexColor") 设置 pen 的颜色。

setStroke(Number) 设置 pen 的粗细。

drawLine(X1, Y1, X2, Y2) 从 (X1, Y1) 到 (X2, Y2) 画线。

drawPolyline(Xpoints, Ypoints) 画折线。参数为数组,如:var Xpoints = new Array(x1,x2,x3,x4,x5);。

drawRect(X, Y, width, height) 画矩形。

drawPolygon(Xpoints, Ypoints) 画多边形。参数为数组,如:var Xpoints = new Array(x1,x2,x3,x4,x5);。如果多边形没有闭合,会自动闭合。

fillPolygon(Xpoints, Ypoints) 填充多边形。

drawEllipse(X, Y, width, height) 画椭圆。参数组成的矩形作为椭圆的外切矩形。

fillEllipse(X, Y, width, height) 填充椭圆。参数组成的矩形作为椭圆的外切矩形。

fillArc(X, Y, width, height, start-angle, end-angle) 填充弧。参数组成的矩形作为椭圆的外切矩形,start-angle, end-angle 表示弧在椭圆上的开始和结束角度。

setFont("font-family", "size+unit", Style) 设置字体名称、大小、样式。Style 可用的变量:Font.PLAIN、Font.BOLD、Font.ITALIC、Font.ITALIC_BOLD。

drawString("Text", X, Y) 在指定的 X、Y 位置写文字。字符串中的 HTML 会生效。

drawStringRect("Text", X, Y, Width, Alignment) 比 drawString 功能强大些。

drawImage("src", X, Y, width, height) 画图片。width、height 可以省略,可以在 height 之后添加图片的事件,如:jg.drawImage('anImg.jpg',8,5,95,70,'onmouseover="YourFunc()"');。

paint() 让绘制的东西在画布上显示出来。

clear() 清除画布上的东西。

setPrintable(true) 浏览器默认打印是不打印背景的,所以默认情况下打印不出所绘的图形来,要让默认情况下也可以打印出背景,就使用此设置。不过这会让图形呈现大约慢 10% 到 25%。


相关文章