The draw method is used to drawn a text as signature with different font families like Arial, Serif, with different font sizes. It accepts text, font family, font size as its parameters. The default font family is “Arial”, and the default font size is “30”.
import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { getComponent } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.fontData = ['Arial', 'Serif', 'Sans-serif', 'Cursive', 'Fantasy'];
this.sizeData = [20, 30, 40, 50];
this.clickEventHandler = this.clickEventHandler.bind(this);
}
clickEventHandler() {
let signature = getComponent(document.getElementById('signature'), 'signature');
let text = document.getElementById('text').value;
let font = document.getElementById("font").value;
let size = document.getElementById("size").value;
signature.draw(text, font, size);
}
render() {
return (<div id='container'>
<div className='signature-control'>
<SignatureComponent id='signature'/>
</div>
<div id='input'>
<table>
<tbody>
<tr>
<td><div>Enter the Text:</div></td>
<td><input type="text" id="text" placeholder="Enter the Text"></input></td>
</tr>
<tr>
<td><div>Font Family:</div></td>
<td>
<DropDownListComponent id='font' dataSource={this.fontData} value='Arial' popupHeight='200px'/>
</td>
</tr>
<tr>
<td><div>Font Size:</div></td>
<td>
<DropDownListComponent id='size' dataSource={this.sizeData} value={20} popupHeight='200px'/>
</td>
</tr>
</tbody>
</table>
<ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Draw</ButtonComponent>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React Signature</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React Signature Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { getComponent, closest } from '@syncfusion/ej2-base';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.clickEventHandler = this.clickEventHandler.bind(this);
}
private fontData: string[] = ['Arial', 'Serif', 'Sans-serif', 'Cursive', 'Fantasy'];
private sizeData: number[] = [20, 30, 40, 50];
public clickEventHandler(): void {
let signature: SignatureComponent = getComponent(document.getElementById('signature'), 'signature');
let text: string = document.getElementById('text').value;
let font: string = document.getElementById("font").value;
let size: number = document.getElementById("size").value;
signature.draw(text, font, size);
}
public render() {
return (
<div id='container'>
<div className='signature-control'>
<SignatureComponent id='signature'/>
</div>
<div id='input'>
<table>
<tbody>
<tr>
<td><div>Enter the Text:</div></td>
<td><input type="text" id="text" placeholder="Enter the Text"></input></td>
</tr>
<tr>
<td><div>Font Family:</div></td>
<td>
<DropDownListComponent id='font' dataSource={this.fontData} value='Arial' popupHeight='200px'/>
</td>
</tr>
<tr>
<td><div>Font Size:</div></td>
<td>
<DropDownListComponent id='size' dataSource={this.sizeData} value={20} popupHeight='200px'/>
</td>
</tr>
</tbody>
</table>
<ButtonComponent onClick={this.clickEventHandler} isPrimary={true}>Draw</ButtonComponent>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));