jQWidgets Mobile Demos

Show Demo List

<!DOCTYPE html>

<head>

<title id='Description'>jQWidgets Draw - Mobile Example

</title>

$(document).ready(function () {

var theme = prepareSimulator("draw");

$('#drawContainer').jqxDraw();

var renderer = $('#drawContainer').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 a line

// params: x1, y1, x2, y2, attributes

renderer.line(400, 100, 400, 200, { stroke: 'blue', 'stroke-width': 6 });

renderer.line(250, 50, 250, 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", 400, 200, undefined, undefined, 45, { 'class': 'smallText' }, false, 'center', 'center', 'centermiddle');

renderer.refresh();

initSimulator("draw");

});

</script>

</div>

</body>

</html>

jQWidgets Mobile Demos

Web UI Widgets