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.
The next step is to select an element with jQuery and use the jqxDraw constructor to initialize the plugin.
To set a property (option), you need to pass the property name and value(s) in the jqxDraw's constructor.

$('#jqxDraw').jqxDraw({renderEngine: 'HTML5'});
 

To get a property(option), you need to pass the property name to the jqxTouch's constructor.

var renderEngine = $('#jqxDraw').jqxDraw('renderEngine'});
 

To bind to an event, you need to do the following:

$('#container').jqxDraw();
var renderer = $('#container').jqxDraw('getInstance');
 
// create a circle
// params: cx, cy, radius, params
var circleElement = renderer.circle(250, 150, 50, {fill: 'lightblue'}});
renderer.on(circleElement, 'click', function () 
{ 
 // get the Y coordinate of the circle's center
 var circleY = parseInt(renderer.getAttr(circleElement, 'cy'));
 
 // move the circle 10 pixels down
 renderer.attr(circleElement, { cy: circleY + 10; });
});

Drawing Shapes with jqxDraw

The result of the above code is:

[フレーム]