SVG Graphics Library for JavaScript HTML5 :jsDraw2DX

jsDraw2DX : SVG Graphics Library for JavaScript (HTML5 Ready) [Alpha]

Welcome to the home page of jsDraw2DX javascript graphics library. The library uses SVG to render the graphics on all modern desktop browsers (Chrome, Firefox, IE9, Safari, Opera, IE10 etc.) having SVG support. For old IE browsers (IE6, IE7 and IE8), the library uses VML to render the graphics. Since the rendering of both SVG and VML are almost same, jsDraw2DX provides cross-browser compatibility. Since HTML5 standard is out, and is supported by almost all modern browsers including IE9 and IE10, the standard is now very important in web development. Considering this, jsDraw2DX is HTML5 ready solution because SVG is also a part of HTML5 standard.

The diagram above is drawn using our jsDraw2DX (Alpha) library in JavaScript.View source of above diagram.

Examples:

Dynamic Curve: This example demonstrates that how interactivity can be easily & effectively implemented with the event handling ability of jsDraw2DX. In the source you can notice how jxCircle object can be accessed in the event handler.

3D Bar Chart: This example demonstrates how you can easily use the library to draw 3D effect and animation. The example also shows the effectiveness of the object oriented design.

World Population Density Map

Features:

The library can draw all basic shapes like line, rectangle, polyline, polygon, circle, ellipse, circular and elliptical arc, arc sector (pie), text, image along with the advanced shapes like curve passing through points, Bezier curve (quadratic, cubic and any higher degree) and function graph/plot.
The library is designed in object oriented manner where you create an object for each shape with various properties and later change them as required. This gives various programming advantages of object oriented design.
Since the rendering is done using SVG (and VML for old IE), interactivity with the shapes can be achieved by the support of DOM events.
As mentioned above, the library is HTML5 ready and supported by almost all modern browsers including old versions of IE
The coordinate system, scale an origin of the drawing can be configured.

Getting Started:

Download jsDraw2DX and copy it to the same folder in which your web page is present. If you want to copy it to another folder then you have to specify the src parameter as appropriate relative path. Please do not use the jsDraw2DX.js file from our website directly.

Add following code inside <head> tag or just after <body> start tag.

The html div element on which you are going to draw, should have style as specified for the div element below,
<div id="graphics" style="overflow:hidden;position:relative;width:600px;height:300px;"></div>
You can use multiple div element for drawing. Then you require to create that many objects of jxGraphisc .(You will come to know in detail about jxGraphics object letter on this page)

Now you are ready to start drawing. Add <script> tag anywhere after the canvas <div> tag. The best place to add the <script> tag is just before the end of <body> tag. Write the code in the manner shown below.
<script type="text/JavaScript">

    //Create jsGraphics object
    var gr = new jxGraphics(document.getElementById("graphics"));

    //Create jxColor object
    var col = new jxColor("red");

    //Create jxPen object
    var pen = new jxPen(col,'2px');

    //Draw a Line between 2 points

    //Define end points to draw line
    var pt1 = new jxPoint(20,30);
    var pt2 = new jxPoint(120,230);

    //Create line object
    var line = new jxLine(pt1,pt2,pen);

    //Draw the line on the graphics
    line.draw(gr);

</script>

The source code for the graphics drawn above is as follow,
<script type="text/JavaScript">
    //Create graphics object from the graphics div
    var gr = new jxGraphics(document.getElementById('graphics'));

    //Define pens to draw outline of the shapes
    var penRed = new jxPen(new jxColor('red'), '5px');
    var penGreen = new jxPen(new jxColor('green'), '2px');
    var penWhite = new jxPen(new jxColor('white'), '3px');

    //Define brushes to fill the shapes
    var brushYellow = new jxBrush(new jxColor('yellow'));
    brushYellow.fillType = 'linear-gradient';

    var brushBlue = new jxBrush(new jxColor('blue'));
    brushBlue.fillType = 'linear-gradient';

    var brushRed = new jxBrush(new jxColor('red'));
    brushRed.fillType = 'linear-gradient';

    var brushBlack = new jxBrush(new jxColor('black'));

    //Draw smooth curve passing through the given points
    var curvePoints = [new jxPoint(531, 30), new jxPoint(17, 158), new jxPoint(569, 276), new jxPoint(401, 135)];
    var curve = new jxClosedCurve(curvePoints, penRed, brushYellow);
    curve.draw(gr);

    //Define font to draw the text
    var font = new jxFont('impact');
    font.size = '40px';

    //Draw the color filled text string at specified point and angle
    var text = new jxText(new jxPoint(75, 165), 'Welcome to jsDraw2DX!', font, penGreen, brushBlue, 347);
    text.draw(gr);

    //Draw the filled polygon with specified vertices
    var polypoints = [new jxPoint(550, 200), new jxPoint(550, 80), new jxPoint(610, 10), new jxPoint(800, 10), new jxPoint(860, 80), new jxPoint(860, 200), new jxPoint(800, 270), new jxPoint(610, 270)];
    var poly = new jxPolygon(polypoints, penGreen, brushBlack);
    poly.draw(gr);

    //Draw ellipse with specified center point, height and width
    var el = new jxEllipse(new jxPoint(710, 140), 200, 100, penWhite);
    el.draw(gr);

    //Draw filled elliptical arc sectors with specified center point, height, width, start & arc angle.
    var pie = new jxArcSector(new jxPoint(710, 140), 200, 100, 30, 70, penWhite, brushBlue);
    pie.draw(gr);
    var pie1 = new jxArcSector(new jxPoint(710, 140), 200, 100, 100, 290, penWhite, brushRed);
    pie1.draw(gr);

    //Modify font object properties
    font.size = '20px';
    font.family = 'arial';
    font.style = 'italic';

    //Change pen width of white pen
    penWhite.width = '2px';

    //Draw text strings at specified points with changed font
    var text1 = new jxText(new jxPoint(700, 50), 'Polygon', font, penWhite);
    text1.draw(gr);

    var text2 = new jxText(new jxPoint(600, 80), 'Ellipse', font, penWhite);
    text2.draw(gr);

    var text2 = new jxText(new jxPoint(650, 240), 'Arc Sector', font, penWhite);
    text2.draw(gr);

    //Draw function graph (plot) with specified function equation
    var sinfn = new jxFunctionGraph('50*sin(x/10) + 220', 0, 300,penGreen);
    sinfn.draw(gr);

    //Again modify font object properties
    font.size = '12px';
    font.style = 'normal';
    penGreen.width = '1px';

    //Draw text string at specified point
    var text3 = new jxText(new jxPoint(300, 220), 'y=50*sin(x/10)+220', font, penGreen);
    text3.draw(gr);

    //Draw images at specified point and angle
    var img1 = new jxImage(new jxPoint(35, 0), 'img1.jpg', 100, 70,30);
    img1.draw(gr);

    var img2 = new jxImage(new jxPoint(70, 50), 'img2.jpg', 100, 70, -25);
    img2.draw(gr);

    var img3 = new jxImage(new jxPoint(160, 20), 'img3.jpg', 100, 70);
    img3.draw(gr);
</script>

License:

The jsDraw2DX library is open source and free; licensed under LGPL.

Please support this project by sharing...

Disclaimer & Note:

Find the disclaimer in Terms of use. Following are additional points of the disclaimer.
Mobile support is limited to the SVG supporting mobile browsers only (Not tested).
Testing is not done on all web browsers and operating systems.

comments powered by Disqus