Customization in Vue Signature component

26 Jun 202416 minutes to read

The Signature component draws stroke/path using moveTo() and lineTo() methods to connect one or more points while drawing in canvas. The stroke width can be modified by using its color and width. And the background can be modified by using its background color and background image.

Stroke Width

The variable stroke width is based on the values of maxStrokeWidth, minStrokeWidth and velocity for smoother and realistic signature. The default value of minimum stroke width is set as 0.5, maximum stroke width is set as 2.5 and velocity is set as 0.7.

In the following example, minimum stroke width is set as 0.5, maximum stroke width is set as 3 and velocity is set as 0.7.

<template>
    <div class='wrap'>
        <h4>Sign here</h4>
        <ejs-signature id="signature" :maxStrokeWidth="3" :mixStrokeWidth="0.5" :velocity="0.7"></ejs-signature>
    </div>
</template>

<script setup>

import { SignatureComponent as EjsSignature } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

#signature {
    border: 1px solid lightgray;
    height: 100%;
    width: 100%;
}

.wrap {
    height: 300px;
    width: 550px;
}
</style>
<template>
    <div class='wrap'>
        <h4>Sign here</h4>
        <ejs-signature id="signature" :maxStrokeWidth="3" :mixStrokeWidth="0.5" :velocity="0.7"></ejs-signature>
    </div>
</template>

<script>

import { SignatureComponent } from '@syncfusion/ej2-vue-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-signature": SignatureComponent
    },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';

#signature {
    border: 1px solid lightgray;
    height: 100%;
    width: 100%;
}

.wrap {
    height: 300px;
    width: 550px;
}
</style>

Stroke Color

Color of the stroke can be specified by using strokeColor property and it accepts hexadecimal code, RGB, and text. The default value of this property is “#000000”.

<template>
<div class='wrap'>
    <div id="input">
        <input type="text" id="text" placeholder="Enter the Stroke Color Value" >
        <ejs-button cssClass="e-primary" v-on:click="onSet">Set Stroke Color</ejs-button>
    </div>
    <div id="signature-control">
        <ejs-signature id="signature"></ejs-signature>  
    </div>
</div>
</template>

<script setup>

import { SignatureComponent as EjsSignature } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const onSet = () => {
  var signature = getComponent(document.getElementById('signature'), 'signature');
  var color = document.getElementById('text').value;
  signature.strokeColor = color;
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
    height: 300px;
    width: 550px;
}
</style>
<template>
  <div class='wrap'>
    <div id="input">
      <input type="text" id="text" placeholder="Enter the Stroke Color Value">
      <ejs-button cssClass="e-primary" v-on:click="onSet">Set Stroke Color</ejs-button>
    </div>
    <div id="signature-control">
      <ejs-signature id="signature"></ejs-signature>
    </div>
  </div>
</template>

<script>

import { SignatureComponent } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-signature": SignatureComponent
  },
  data: function () {
    return {
    };
  },
  methods: {
    onSet: function () {
      var signature = getComponent(document.getElementById('signature'), 'signature');
      var color = document.getElementById('text').value;
      signature.strokeColor = color;
    }
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
  height: 300px;
  width: 550px;
}
</style>

Background Color

Background color of a signature can be specified by using backgroundColor property and it accepts hexadecimal code, RGB, and text. The default value of this property is “#ffffff”.

<template>
  <div class='wrap'>
    <div id="input">
      <input type="text" id="text" placeholder="Enter the Background Color Value">
      <ejs-button cssClass="e-primary" v-on:click="onSet">Set Background Color</ejs-button>
    </div>
    <div id="signature-control">
      <ejs-signature id="signature"></ejs-signature>
    </div>
  </div>
</template>

<script setup>

import { SignatureComponent as EjsSignature } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const onSet = () => {
  var signature = getComponent(document.getElementById('signature'), 'signature');
  var bgColor = document.getElementById('text').value;
  signature.backgroundColor = bgColor;
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
  height: 300px;
  width: 550px;
}
</style>
<template>
  <div class='wrap'>
    <div id="input">
      <input type="text" id="text" placeholder="Enter the Background Color Value">
      <ejs-button cssClass="e-primary" v-on:click="onSet">Set Background Color</ejs-button>
    </div>
    <div id="signature-control">
      <ejs-signature id="signature"></ejs-signature>
    </div>
  </div>
</template>

<script>

import { SignatureComponent } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-signature": SignatureComponent
  },
  data: function () {
    return {
    };
  },
  methods: {
    onSet: function () {
      var signature = getComponent(document.getElementById('signature'), 'signature');
      var bgColor = document.getElementById('text').value;
      signature.backgroundColor = bgColor;
    }
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
  height: 300px;
  width: 550px;
}
</style>

Background Image

Background image of a signature can be specified by using backgroundImage property. The background image can be set by either hosting the image in our local IIS or online image.

<template>
  <div class='wrap'>
    <div id="input">
      <input type="text" id="text" placeholder="Enter the URL of the background Image">
      <ejs-button cssClass="e-primary" v-on:click="onSet">Set Background Image</ejs-button>
    </div>
    <div id="signature-control">
      <ejs-signature id="signature"></ejs-signature>
    </div>
  </div>
</template>

<script setup>

import { SignatureComponent as EjsSignature } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const onSet = () => {
  var signature = getComponent(document.getElementById('signature'), 'signature');
  var bgImage = document.getElementById('text').value;
  signature.backgroundImage = bgImage;
}

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
  height: 300px;
  width: 550px;
}
</style>
<template>
  <div class='wrap'>
    <div id="input">
      <input type="text" id="text" placeholder="Enter the URL of the background Image">
      <ejs-button cssClass="e-primary" v-on:click="onSet">Set Background Image</ejs-button>
    </div>
    <div id="signature-control">
      <ejs-signature id="signature"></ejs-signature>
    </div>
  </div>
</template>

<script>

import { SignatureComponent } from "@syncfusion/ej2-vue-inputs";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { getComponent } from '@syncfusion/ej2-base';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-signature": SignatureComponent
  },
  data: function () {
    return {
    };
  },
  methods: {
    onSet: function () {
      var signature = getComponent(document.getElementById('signature'), 'signature');
      var bgImage = document.getElementById('text').value;
      signature.backgroundImage = bgImage;
    }
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#signature {
  border: 1px solid lightgray;
  height: 100%;
  width: 100%;
}

#signature-control {
  height: 250px;
}

#input {
  margin-bottom: 30px;
}

#text {
  height: 30px;
  width: 300px;
}

.wrap {
  height: 300px;
  width: 550px;
}
</style>

See Also