Properties

NameTypeDefault
renderEngine String ''

Sets or gets the renderEngine property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500} renderEngine={'HTML5'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Events

Methods

NameReturn Type
attr None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.attr(element, { fill: 'lightblue', stroke: 'darkblue' });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
circle Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.circle(250, 150, 50, {});
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
clear None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.clear();
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
getAttr String 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.getAttr(element, 'fill');
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
getSize Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.getSize();
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
line Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.line(600, 100, 600, 200, { stroke: 'blue', 'stroke-width': 6 });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
measureText Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.measureText('My text', 45, { 'class': 'smallText' });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
on None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.on(element, 'click', () => { });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
off None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.off(element, 'click', () => { });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
path Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.path(M 100,100 L 150,130 C 130,130 180,190 150,150, { stroke: '#777777', fill: 'red' });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
pieslice Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.pieslice(250, 150, 50, 100, 15, 95, 0, {fill: 'yellow'});
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
refresh None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.refresh();
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rect Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.rect(0, 0, 200, 100, { stroke: '#777777', fill: 'transparent' });
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
saveAsJPEG None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
saveAsPNG None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myDraw.saveAsPNG('myImage.png', 'http:///export_server/server.php');
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
text Object 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxDraw from 'jqwidgets-react/react_jqxdraw.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myDraw.text('Drawing Shapes', 50, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
    }

    render() {             
        return (
            <JqxDraw ref='myDraw'
                width={850} height={500}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));