js画矢量图(wz_jsgraphics.js)_学习

★ 怎样使用这个矢量图形库？

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

1 ． 创建一个 jsGraphics 对象

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

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

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

<script type="text/javascript"> </script> <!---->
如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：
<script type="text/javascript"> </script> <!---->
b ）在页面载入的时候绘制 （在 Netscape 4 和 Opera 5/6 可以执行） 只需要将构造参数设为空：
<script type="text/javascript"> </script> <!----> 你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。

2. 图形绘制函数

为确保所有浏览器能正确执行， 这里选择页面载入时进行绘制，即上文的 b 方式 一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：
<script type="text/javascript"> </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 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 中）