Documentation
Getting Started
jqxDraw
jqxDraw is a small jQuery-based plugin which allows you to draw shapes and texts using VML, SVG and HTML5. In order to use the jqxDraw plugin, you need to include the following JavaScript files in your project.<head> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
The next step is to select an element with jQuery and use the jqxDraw constructor to initialize the plugin.
<script type="text/javascript"> $(document).ready(function () { var renderer = $('#container').jqxDraw('getInstance'); });</script>
To set a property (option), you need to pass the property name and value(s) in the jqxDraw's constructor.
To get a property(option), you need to pass the property name to the jqxTouch's constructor.$('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
To bind to an event, you need to do the following:var renderEngine = $('#jqxDraw').jqxDraw('renderEngine'});
$('#container').jqxDraw();var renderer = $('#container').jqxDraw('getInstance');// create a circle// params: cx, cy, radius, paramsvar circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});renderer.on(circleElement, 'click', function (){// get the Y coordinate of the circle's centervar circleY = parseInt(renderer.getAttr(circleElement, 'cy'));// move the circle 10 pixels downrenderer.attr(circleElement, { cy: circleY + 10; });});
Drawing Shapes with jqxDraw
<!DOCTYPE html><html lang="en"><head> <title id='Description'>jqxDraw - Basic shapes drawing example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <style type="text/css"> .smallText { font-size:16px; font-family: Sans-Serif; } .largeText { font-size:36px; font-family: Sans-Serif; } </style> <script type="text/javascript"> $(document).ready(function () { $('#container').jqxDraw(); var renderer = $('#container').jqxDraw('getInstance'); var size = renderer.getSize(); // create a circle // params: cx, cy, radius, params var circleElement = renderer.circle(250, 150, 50, {}); // set the fill color and border color of the circle // params: element, attributes renderer.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' }); // draw a rectangle around the entire area // params: x, y, width, height, attributes var borderElement = renderer.rect(0, 0, size.width, size.height, { stroke: '#777777', fill: 'transparent' }); // draw a path // params: line command, attributes var pathElement = renderer.path("M 100,100 L 150, 130 C 130,130 180,190 150,150", { stroke: '#777777', fill: 'red' }); // draw an area // params: line command, attributes var areaElement = renderer.path("M 300,300 L 350, 330 C 330,330 380,390 350,350 Z", { stroke: '#777777', fill: 'yellow' }); // draw a line // params: x1, y1, x2, y2, attributes renderer.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 }); renderer.line(550, 50, 650, 90, { stroke: 'green', 'stroke-width': 6 }); // draw text // params: text, x, y, width, height, angle, params, clip, halign, valign, rotateAround renderer.text("Drawing shapes", 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle'); renderer.text("This is rotated text", 600, 300, undefined, undefined, 45, { 'class': 'smallText' }, false, 'center', 'center', 'centermiddle'); // add an event handler to the circle element var circleUp = renderer.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathUp = renderer.path("M 30,460 L 70,460, L 50, 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path("M 100,440 L 140,440, L 120, 470 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); renderer.text("Click these buttons:", 20, 390); var moveCircle = function (moveUp) { var circleY = parseInt(renderer.getAttr(circleElement, 'cy')); renderer.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); } renderer.on(circleUp, 'click', function () { moveCircle(true); }); renderer.on(pathUp, 'click', function () { moveCircle(true); }); renderer.on(circleDown, 'click', function () { moveCircle(false); }); renderer.on(pathDown, 'click', function () { moveCircle(false); }); renderer.refresh(); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body class='default'> <div id='container' style="width:700px; height:500px"> </div></body></html>