9CBS - Document Center - JavaScript Read: 11689 Comments: 8 Participate in reviews
Title with JavaScript and DHTML vector graphics library to choose from YJGX007 BLOG keyword javascript dhtml vector map http://www.walterzorn.com/index.htm
script>
script>
Preface: On www.sitepoint.com, I saw a blog of Simon, guiding me a great web development site http://www.walterzorn.com/, and got a only DHTML and JAVScript Technical development of a high-performance vector graphics library WZ_JSGRAPHICS.JS (thanks to Walter Zorn developed this graphic library), use it to draw beautiful vector graphics on your web page. The introduction page of this graphics library http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm, is reflected in the common geometric graphics such as folding, polygon, circle, etc., I originally thought it was some pictures, when I saw this line of tab. SHESE ARE NOT Image Files. Shapes & Text Have Been after, and after reading the instructions about it, I realized that the display vector can be drawn on the webpage in addition to the VML and SVG. Graphics, only DHTML and JavaScript can also do it all! Is it very surprised? (Double click this document, look at the vector graphics after zooming), ok! Nustey talk less, let me introduce this graphic library in detail. ★ Overview This graphics library uses DHTML and JavaScript technology, which can draw lines, circles, ellipses, fold lines, polygons, rectangles. It is also very easy to use this graphic library for people who don't know JavaScript, in addition, the graphics drawn using this graphics library is completely optimized to pixel level! ★ Try to draw several graphics by a given parameter (TRY IT OUT)
★ Performance does not provide a graphic representation element similar to wire, circle, ellipse or other non-rectangular graphics in HTML. In the workspace, we can use, and set up a Div (or Layer) element with a background color, and reduce these DIV elements to the size of the pixel, each DIV element represents a pixel, then use the DIV element on the web page Drawing. When we use these DIV models to draw vector graphics, we should avoid some redundant access, look at the following picture:
script>
Image Dynamically Drawn with The Draw Shapes Library. IMAGE DRAPES LIBRARY
Unfavourable
Better
Optimal
From left to right, the leftmost is the least painted, take a closer look, there will be a DIV connection at each line of stepped shape, this div is not used, it should be deleted; It is already very good, but it should be optimized, with the first behavior: a line of three DIV performance levels is redundant, it should be combined, and the DIV in the same vertical direction should also be merged (eg, the end of the step). Press Walter Zorn to get better performance when drawing vector graphics, and avoid some of the above redundants, he uses the best, fastest algorithm, only use the least, and the necessary DIV elements to draw Graphic. It should be noted that do not compare this graphics library with graphical applications developed with Java languages or other languages, you must know, subject to basic HTML and browser constraints, create a DIV element with JavaScript scripting language is very slow, The optimization of graphics drawing is already the best result. When using this graphic library, the drawn pixels are best not to exceed 600 - 1000 pixels. Should I choose SVG? There are currently a browser with SVG capabilities or browsers using SVG plugins remain a few, so if you want to draw some simple vector graphics, use this vector graphics library or a good choice. ★ Browser compatibility Linux system: browsers with gecko-engine (Mozilla, Netscape 6 , Galeon), Konquer 3.0.3 (very slow), Netscape 4, Opera 5 and 6. Windows system: Gecko-Browsers, IE 4 , 5 and 6, Netscape 4, Opera 5, 6 and 7. Description: If you load all over the page, use this vector graphics library to draw, in the Opera version 7, the Netscape version 4 is also Will not execute. Conversely, when the HTML page is being parsed, use this graphics library to draw all browsers. ★ How to use this vector graphic library? 1 . Contains this library to insert the following code to the beginning of your HTML file (between
and head>):