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";
function App() {
const fontData = ['Arial', 'Serif', 'Sans-serif', 'Cursive', 'Fantasy'];
const sizeData = [20, 30, 40, 50];
function 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);
}
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={fontData} value='Arial' popupHeight='200px'/>
</td>
</tr>
<tr>
<td><div>Font Size:</div></td>
<td>
<DropDownListComponent id='size' dataSource={sizeData} value={20} popupHeight='200px'/>
</td>
</tr>
</tbody>
</table>
<ButtonComponent onClick={clickEventHandler} isPrimary={true}>Draw</ButtonComponent>
</div>
</div>);
}
;
export default App;
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.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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";
function App() {
const fontData: string[] = ['Arial', 'Serif', 'Sans-serif', 'Cursive', 'Fantasy'];
const sizeData: number[] = [20, 30, 40, 50];
function 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);
}
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={fontData} value='Arial' popupHeight='200px'/>
</td>
</tr>
<tr>
<td><div>Font Size:</div></td>
<td>
<DropDownListComponent id='size' dataSource={sizeData} value={20} popupHeight='200px'/>
</td>
</tr>
</tbody>
</table>
<ButtonComponent onClick={clickEventHandler} isPrimary={true}>Draw</ButtonComponent>
</div>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));