Merge pull request rpmsoftware#9 from rpmsoftware/issue-5-generate-signature-from-name

Generate signature from name

Author: davidkhuu

README.md

@@ -17,6 +17,42 @@ React Native wrapper around @[szimek's](https://github.com/szimek) HTML5 Canvas
 npm install --save react-native-signature-pad
 ```
 
+## Using a Custom Signature Font
+
+There is an option to generate a signature based off the user's name. You can use your own custom font. Currently, we recommend converting your font file into a data URL (we used [dataurl.net](http://dataurl.net/#dataurlmaker)). Store that in a .js file with the contents similar to something like below:
+
+```js
+var content = `
+  @font-face {
+    font-family: 'SignatureFont';
+    src: url(/* data url of your font */) format(/* orig font file type i.e. 'ttf' */);
+  }
+`;
+
+export default content;
+```
+
+## Generating a Signature from a String
+
+If you would like to generate a signature as opposed to manually writing your own, you can enable the `useFont` prop to `true` and use the prop `name` where the generated signature will be based from.
+
+```js
+...
+
+var signatureFont = require('./signature-font');
+
+...
+
+var aName = 'John Doe';
+
+<SignaturePad
+  ...
+  useFont={true}
+  name={aName}
+  fontStyle={signatureFont}
+/>
+```
+
 ## Example
 
 ```js
@@ -36,11 +72,14 @@ export default class Demo extends Component {
   render = () => {
     return (
       <View style={{flex: 1}}>
-          <SignaturePad onError={this._signaturePadError}
-                        onChange={this._signaturePadChange}
-                        penMinWidth={penMinWidth}
-                        penMaxWidth={penMaxWidth}
-                        style={{flex: 1, backgroundColor: 'white'}}/>
+        <SignaturePad
+          onError={this._signaturePadError}
+          onChange={this._signaturePadChange}
+          penMinWidth={penMinWidth}
+          penMaxWidth={penMaxWidth}
+          style={{flex: 1, backgroundColor: 'white'}}
+          useFont={false}
+        />
       </View>
     )
   };

index.js

@@ -22,17 +22,22 @@ class SignaturePad extends Component {
     dataURL: PropTypes.string,
     penMinWidth: PropTypes.number,
     penMaxWidth: PropTypes.number,
+    useFont: PropTypes.bool,
+    name: PropTypes.string,
+    fontStyle: PropTypes.string,
   };
 
   static defaultProps = {
     onChange: () => {},
     onError: () => {},
     style: {},
+    useFont: false
   };
 
   constructor(props) {
     super(props);
-    this.state = {base64DataUrl: props.dataURL || null};
+    var escapedName = props.name.replace(/"/, `\\"`);
+    this.state = {base64DataUrl: props.dataURL || null, name: escapedName };
     const { backgroundColor } = StyleSheet.flatten(props.style);
     var injectedJavaScript = injectedExecuteNativeFunction
       + injectedErrorHandler
@@ -43,15 +48,40 @@ class SignaturePad extends Component {
         props.dataURL,
         props.penMinWidth,
         props.penMaxWidth,
+        props.useFont,
+        escapedName
       );
-    var html = htmlContent(injectedJavaScript);
+    var html = htmlContent(injectedJavaScript, props.fontStyle);
     this.source = { html };
     // We don't use WebView's injectedJavaScript because on Android,
     //  the WebView re-injects the JavaScript upon every url change.
     // Given that we use url changes to communicate signature changes to the
     //  React Native app, the JS is re-injected every time a stroke is drawn.
   }
 
+  componentWillReceiveProps = (nextProps) => {
+    if (this.props.useFont && this.state.name !== nextProps.name) {
+      var escapedName = nextProps.name.replace(/"/, `\\"`);
+      this.setState({ name: escapedName });
+
+      const { backgroundColor } = StyleSheet.flatten(this.props.style);
+      var injectedJavaScript = injectedExecuteNativeFunction
+        + injectedErrorHandler
+        + injectedSignaturePad
+        + injectedApplication(
+          this.props.penColor,
+          backgroundColor,
+          this.props.dataURL,
+          this.props.penMinWidth,
+          this.props.penMaxWidth,
+          this.props.useFont,
+          escapedName
+        );
+      var html = htmlContent(injectedJavaScript, this.props.fontStyle);
+      this.source = { html };
+    }
+  };
+
   _onNavigationChange = (args) => {
     this._parseMessageFromWebViewNavigationChange(unescape(args.url));
   };

injectedHtml/index.js

@@ -1,4 +1,4 @@
-var content = script =>
+var content = (script, fontStyle) =>
   `<html>
     <style>
     *
@@ -16,8 +16,12 @@ var content = script =>
       -ms-transform:rotate(-90deg)  translate(-100%, 0px);
       -webkit-transform:rotate(-90deg)  translate(-100%, 0px);*/
     }
+    </style>
 
+    <style type="text/css">
+      ${fontStyle}
     </style>
+
     <body>
       <canvas style="margin-left: 0; margin-top: 0;"></canvas>
       <script>

injectedJavaScript/application.js

@@ -1,4 +1,4 @@
-var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth) => `
+var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name) => `
 
   var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
     /*We're rotating by 90% -> Flip X and Y*/
@@ -14,17 +14,17 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth) =>
       var canvasHeight = height * devicePixelRatio;
       signaturePadCanvas.width = canvasWidth;
       signaturePadCanvas.height = canvasHeight;
-      signaturePadCanvas.getContext('2d').scale(devicePixelRatio, devicePixelRatio);
+      signaturePadCanvas.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
     };
 
     var finishedStroke = function(base64DataUrl) {
-       executeNativeFunction('finishedStroke', {base64DataUrl: base64DataUrl});
+       executeNativeFunction("finishedStroke", {base64DataUrl: base64DataUrl});
     };
 
     var enableSignaturePadFunctionality = function () {
       var signaturePad = new SignaturePad(signaturePadCanvas, {
-        penColor: '${penColor || 'black'}',
-        backgroundColor: '${backgroundColor || 'white'}',
+        penColor: "${penColor || "black"}",
+        backgroundColor: "${backgroundColor || "white"}",
         onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
       });
       /* signaturePad.translateMouseCoordinates = function (point) {
@@ -35,16 +35,15 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth) =>
       }; */
       signaturePad.minWidth = ${penMinWidth || 1};
       signaturePad.maxWidth = ${penMaxWidth || 4};
-      if ('${dataURL}') {
-        signaturePad.fromDataURL('${dataURL}');
+      if ("${dataURL}") {
+        signaturePad.fromDataURL("${dataURL}");
       }
     };
 
     sizeSignaturePad();
     enableSignaturePadFunctionality();
   };
 
-
   var bodyWidth = document.body.clientWidth;
   var bodyHeight = document.body.clientHeight;
   if(!bodyWidth) {
@@ -54,8 +53,56 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth) =>
     bodyHeight = window.innerHeight;
   }
 
-  var canvasElement = document.querySelector('canvas');
-  showSignaturePad(canvasElement, bodyWidth, bodyHeight);
+  var canvasElement = document.querySelector("canvas");
+
+  if (${useFont}) {
+    var context = canvasElement.getContext("2d");
+    var devicePixelRatio = 1; /* window.devicePixelRatio || 1; */
+    context.canvas.width = bodyWidth * devicePixelRatio;
+    context.canvas.height = bodyHeight * devicePixelRatio;
+
+    var ratio = Math.max(window.devicePixelRatio || 1, 1);
+    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
+			context.mozBackingStorePixelRatio ||
+			context.msBackingStorePixelRatio ||
+			context.oBackingStorePixelRatio ||
+			context.backingStorePixelRatio || 1;
+    var realRatio = ratio / backingStoreRatio;
+    if (ratio !== backingStoreRatio) {
+      ratio = ratio / backingStoreRatio;
+    }
+
+    var oldWidth = context.canvas.width;
+    var oldHeight = context.canvas.height;
+
+    var fontSize = 45;
+    var textHeight = 12;
+    if (realRatio === 2) {
+      fontSize = 90;
+      textHeight = 18;
+    }
+
+    var textWidth = -1;
+
+    do {
+      context.font = fontSize + "px SignatureFont";
+      textWidth = context.measureText("${name}").width * ratio;
+      fontSize = 7 * fontSize / 8;
+    } while (textWidth > oldWidth);
+
+    var textPosition = {
+      x: ((oldWidth - textWidth) / 2),
+      y: ((3 * oldHeight / 4) - textHeight)
+    };
+
+    context.fillStyle = "${penColor}";
+    context.fillText("${name}", textPosition.x, textPosition.y);
+
+    /* Fire a finishedStroke function to update the state */
+    executeNativeFunction("finishedStroke", {base64DataUrl: canvasElement.toDataURL()});
+  } else {
+    showSignaturePad(canvasElement, bodyWidth, bodyHeight);
+  }
 `;
 
 export default content;