Use wz_jsgraphics.js (JavaScript graphics library) to draw vector images, compatible with multiple browsers

 

★Browser compatibility

Linux:
Browsers with Gecko-engine (Mozilla, Netscape 6 +, galeon), Konqueror 3.0.3 (very slow), Netscape 4, opera 5 and 6.

Windows:
Gecko-browsers, ie 4, 5 and 6, Netscape 4, opera 5, 6 and 7.

Note: If the vector graphics library is used for rendering after the web page is fully loaded, it will not be executed in browsers earlier than opera 7, nor will Netscape version 4 be executed. On the contrary, when the HTML page is being parsed, all browsers can use this graphic library to draw.

★How to use this vector graphics library?

 

1. Include this library Insert the following code to the beginning of your HTML file (between
<SCRIPT type = "text/JavaScript" src = "wz_jsgraphics.js"> </SCRIPT>
2. Use a layer (Div or layer) as the canvas (canvases) This step is not required if the page is directly drawn in the HTML page when it is being loaded. If you draw a page after the page is loaded, you should set several layers with absolute coordinates. As your canvas, each layer should have a unique ID: <Div id = "mycanvas" style = "position: relative; Height: 250px; width: 100%;"> </div> ... <Div id = "anothercanvas" style = "position: relative; Height: 100px; width: 300px;"> </div>

3. Download and save the graphics library Download to this address http://www.walterzorn.com/scripts/wz_jsgraphics.zip, put the decompressed wz_jarraphics.js and your HTML file in the same directory, if your wz_jarraphics.js and HTML file are in a different directory, remember to indicate the relative path of wz_jaraphics.js in src = "wz_jsgraphics.js.

★How can I use the plot function in this vector graphics library?

1.CreateJsgraphicsObject

 

A)Draw after the page is fully loaded: (This method will not be executed in browsers with Netscape version 4 and Opera version earlier than 7) Do you still remember the canvas created with the DIV element? As shown in the following example, you need to create a corresponding jsgraphics object for the Div. The code must be inserted after the ending sign of the related Div element </div>, however, it must be in front of </body>, and the ID of the DIV element serves as the construction parameter of New jsgraphics ();, as shown below:
<SCRIPT type = "text/JavaScript"> <! -- VaR JG = new jsgraphics ("mycanvas "); // --> </SCRIPT>
If multiple DIV elements exist, each Div must have its own jsgraphics object:
<SCRIPT type = "text/JavaScript"> <! -- VaR JG = new jsgraphics ("mycanvas "); VaR jg2 = new jsgraphics ("anothercanvas "); // --> </SCRIPT>
B) Draw during page loading (Available in Netscape 4 and opera 5/6) You only need to set the constructor parameter to NULL:
<SCRIPT type = "text/JavaScript"> <! -- VaR jg_doc = new jsgraphics (); // --> </SCRIPT> You can select other variable names such as JG, jg2, or jg_doc, as long as they do not violate JavaScript naming rules.

2.Graphic rendering Function

 

To ensure that all browsers can correctly execute the command, select the page to be drawn when loading, that is, the above method B. Once these graphic objects are generated (in this example, JG, jg2, or jg_doc), you can use them to call the drawing method. The image drawn by the graphic object is displayed on the corresponding Div element (the image object is constructed using the method A above ):
<SCRIPT type = "text/JavaScript"> <! -- Function mydrawfunction () { Jg_doc.setcolor ("#00ff00 ");//Select green Jg_doc.fillellipse (100,200,100,180 );//Coordinate point relative to document(Document) Jg_doc.setcolor ("maroon "); Jg_doc.drawpolyline (new array (50, 10,120), new array (10, 50, 70 )); Jg_doc.paint ();//Note: It is drawn directly on the document instead ofDivAssociation, JG. setcolor ("# ff0000 ");//Select red JG. drawline (10,113,220, 55 );//Coordinate pointDivElement"Mycanvas" JG. setcolor ("# 0000ff ");//Select blue JG. fillrect (110,120, 30, 60 ); JG. Paint (); Jg2.setcolor ("# 0000ff ");//Select blue Jg2.drawellipse (10, 50, and 30,100 ); Jg2.drawrect (400, 10,100, 50 ); Jg2.paint (); } VaR jg_doc = new jsgraphics ();//Draw directly on the document VaR JG = new jsgraphics ("mycanvas "); VaR jg2 = new jsgraphics ("anothercanvas "); Mydrawfunction (); // --> </SCRIPT>
You must first select the paint brush color. Otherwise, the paint brush color defaults to black. The coordinate value is used as a parameter for drawing graphics. If the image object is constructed using the method A above, the coordinate value is relative to the upper left corner of the DIV element. For each canvas (Graphic object), its painting method must be displayed and called to generate an HTML image. Otherwise, nothing will happen on your screen.