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
- 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.
- 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.
//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
- The source code for the graphics drawn above is as follow,
//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);
//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);
//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);
//Draw ellipse with specified center point, height and width
var el = new jxEllipse(new jxPoint(710, 140), 200, 100, penWhite);
//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);
var pie1 = new jxArcSector(new jxPoint(710, 140), 200, 100, 100, 290, penWhite, brushRed);
//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);
var text2 = new jxText(new jxPoint(600, 80), 'Ellipse', font, penWhite);
var text2 = new jxText(new jxPoint(650, 240), 'Arc Sector', font, penWhite);
//Draw function graph (plot) with specified function equation
var sinfn = new jxFunctionGraph('50*sin(x/10) + 220', 0, 300,penGreen);
//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);
//Draw images at specified point and angle
var img1 = new jxImage(new jxPoint(35, 0), 'img1.jpg', 100, 70,30);
var img2 = new jxImage(new jxPoint(70, 50), 'img2.jpg', 100, 70, -25);
var img3 = new jxImage(new jxPoint(160, 20), 'img3.jpg', 100, 70);
The jsDraw2DX library is open source and free; licensed under LGPL.
Please support this project by sharing...
Disclaimer & Note:
- Mobile support is limited to the SVG supporting mobile browsers only (Not tested).
- Testing is not done on all web browsers and operating systems.