★ 怎样使用这个矢量图形库?
★ 怎样使用这个矢量图形库中的绘制函数?
1 . 创建一个 jsGraphics 对象
a) 在页面完全载入后绘制: (这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行) 还记得前面用 div 元素创建的画布吗?看下面的示例, 需要为 div 创建相应的 jsGraphics 对象,这些代码必须插入到相关的 div 元素结束标志后面, 但必须在 的前面, div 元素的 id 作为 new jsGraphics(); 的构造参数,像下面这样: |
| |||
如果有多个 div 元素,每一个 div 都需要有它自已的 jsGraphics 对象: | |||
| |||
b )在页面载入的时候绘制 只需要将构造参数设为空: | |||
你可以选择 jg,jg2 或 jg_doc 其它的变量名,只要不违反 Javascript 的命名规则就可以。 | |||
2. 图形绘制函数
为确保所有浏览器能正确执行, 这里选择页面载入时进行绘制,即上文的 b 方式 一旦产生这些图形对象(在这个示例中 jg, jg2 或 jg_doc ),就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示(采用上文 a 方式构造图形对象): | ||
|
开始画时应首先选择画笔颜色,否则,画笔的颜色取默认值-黑色。坐标值作为绘制图形方法的参数,如果采用上文的 a 方式构造图形对象,那么坐标值是相对于 div 元素的左上角的。每一个画布(图形对象),它的 paint 方法必须被显示的调用以产生 html 格式的图形,否则,在你的屏幕上什么都不会发生。
函数名(方法) | 示例代码(用 jg 图形对象) |
setColor( "#HexColor" ); | jg.setColor("#ff0000"); |
setStroke( Number ); | jg.setStroke(3); |
drawLine( X1, Y1, X2, Y2 ); | jg.drawLine(20,50,453,40); |
drawPolyline( Xpoints, Ypoints ); var Xpoints = new Array(x1,x2,x3,x4,x5); | var Xpoints = new Array(10,85,93,60); |
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 ); var Xpoints = new Array(x1,x2,x3,x4,x5); 如果始点和终点末被指定,多边线将会自动闭合。 | var Xpoints = new Array(10,85,93,60); |
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); |
fillEllipse( X, Y, width, height ); | jg.fillEllipse(20,50,71,141); |
drawString( "Text", X, Y ); 写文本至由 x 和 y 坐标指定的位置。不同于 Java ,坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义,举个例子: "Some Text
它们可以结合使用 | jg.setFont("arial","15px",Font.BOLD); |
drawImage( "src", X, Y, width, height ); | jg.drawImage("friendlyDog.jpg", 20,50,100,150); |
paint(); 像下面这样的调用应该避免 : 像下面这样的调用性能会很高 : | jg.paint(); |
clear(); 与图形对象关联的 div 画布中的图形被清除(在 div 中不是由这个图形对象创建的内容是不会被改变的) | jg.clear(); |
setPrintable( true ); 默认情况下,打印这些图形是不太可行的,因为浏览器的默认打印设置中会关闭打印背景,调用 setPrintable() ,并设置参数为 true ,将重置图形为可打印的(至少在 Mozilla/Netscape 6+ and IE 中) |