|
renderEngine
|
string
|
''
|
Sets or gets the renderEngine property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { renderEngine: "HTML5" } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
|
|
|
|
attr
|
Method
|
|
| Parameter |
Type |
Description |
| element |
object |
|
| attributes |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").attr(element, { fill: 'lightblue', stroke: 'darkblue' }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
circle
|
Method
|
|
| Parameter |
Type |
Description |
| cx |
number |
|
| cy |
number |
|
| r |
number |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").circle(250, 150, 50, {}); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
clear
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").clear(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
getAttr
|
Method
|
|
| Parameter |
Type |
Description |
| element |
object |
|
| attributes |
object |
|
Return Value
String
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").getAttr(element, 'fill'); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
getSize
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { var result = document.querySelector( "undefined").getSize(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
line
|
Method
|
|
| Parameter |
Type |
Description |
| x1 |
number |
|
| y1 |
number |
|
| x2 |
number |
|
| y2 |
number |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
measureText
|
Method
|
|
| Parameter |
Type |
Description |
| text |
string |
|
| angle |
number |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").measureText( 'My text', 45, { 'class': 'smallText' }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
on
|
Method
|
|
| Parameter |
Type |
Description |
| element |
object |
|
| event |
string |
|
| func |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").on(element, 'click', () => { }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
off
|
Method
|
|
| Parameter |
Type |
Description |
| element |
object |
|
| event |
string |
|
| func |
object |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").off(element, 'click', () => { }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
path
|
Method
|
|
| Parameter |
Type |
Description |
| path |
string |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").path(M 100,100 L 150,130 C 130,130 180,190 150,150, { stroke: '#777777', fill: 'red' }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
pieslice
|
Method
|
|
| Parameter |
Type |
Description |
| cx |
number |
|
| xy |
number |
|
| innerRadius |
number |
|
| outerRadius |
number |
|
| fromAngle |
number |
|
| endAngle |
number |
|
| centerOffset |
number |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'}); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").refresh(); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
rect
|
Method
|
|
| Parameter |
Type |
Description |
| x |
number |
|
| y |
number |
|
| width |
number |
|
| height |
number |
|
| attributes |
object |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' }); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
saveAsJPEG
|
Method
|
|
| Parameter |
Type |
Description |
| image |
string |
|
| url |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector("undefined").saveAsJPEG('myImage.jpeg', 'http://>/export_server/server.php'); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
saveAsPNG
|
Method
|
|
| Parameter |
Type |
Description |
| image |
string |
|
| url |
string |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector("undefined").saveAsPNG('myImage.png', 'http://>/export_server/server.php'); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
|
text
|
Method
|
|
| Parameter |
Type |
Description |
| text |
string |
|
| x |
number |
|
| y |
number |
|
| width |
number |
|
| height |
number |
|
| angle |
number |
|
| attributes |
array |
|
| clip |
boolean |
|
| halign |
string |
|
| valign |
string |
|
| rotateAround |
string |
|
Return Value
Object
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Draw Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript"> JQXElements.settings[ "drawSettings"] = { } window.onload = function () { var renderer = document.querySelector( 'jqx-draw').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 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( "M30 460 L 70 460 L50 430 Z", { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 }); var circleDown = renderer.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' }); var pathDown = renderer.path( "M100 440 L 140 440 L120 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(); } window.onload = function() { document.querySelector( "undefined").text( 'Drawing Shapes', 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle'); } </script></head><body> <div class="example-description"> This demo illustrates the basic functionality of the Draw custom element. </div> <jqx-draw settings="drawSettings">
|
