Search results

Draw a Signature in React Signature component

24 May 2022 / 2 minutes to read

Draw

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”.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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>
Copied to clipboard
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'));