Merge pull request rpmsoftware#12 from rpmsoftware/issue-10-increase-res

davidkhuu · web-flow · commit 39d31c679232 · 2017-04-26T14:10:17.000-06:00
Increase resolution of the signature pad
diff --git a/index.js b/index.js
@@ -20,6 +20,8 @@ class SignaturePad extends Component {
     style: View.propTypes.style,
     penColor: PropTypes.string,
     dataURL: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
     penMinWidth: PropTypes.number,
     penMaxWidth: PropTypes.number,
     useFont: PropTypes.bool,
@@ -49,7 +51,9 @@ class SignaturePad extends Component {
         props.penMinWidth,
         props.penMaxWidth,
         props.useFont,
-        escapedName
+        escapedName,
+        props.height,
+        props.width
       );
     var html = htmlContent(injectedJavaScript, props.fontStyle);
     this.source = { html };
@@ -75,7 +79,9 @@ class SignaturePad extends Component {
           this.props.penMinWidth,
           this.props.penMaxWidth,
           this.props.useFont,
-          escapedName
+          escapedName,
+          this.props.height,
+          this.props.width
         );
       var html = htmlContent(injectedJavaScript, this.props.fontStyle);
       this.source = { html };
diff --git a/injectedHtml/index.js b/injectedHtml/index.js
@@ -16,14 +16,20 @@ var content = (script, fontStyle) =>
       -ms-transform:rotate(-90deg)  translate(-100%, 0px);
       -webkit-transform:rotate(-90deg)  translate(-100%, 0px);*/
     }
+
+    html, body {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+    }
     </style>
 
     <style type="text/css">
       ${fontStyle}
     </style>
 
     <body>
-      <canvas style="margin-left: 0; margin-top: 0;"></canvas>
+      <div><canvas style="margin-left: 0; margin-top: 0; width: 100%; height: 100%;"></canvas></div>
       <script>
         ${script}
       </script>
diff --git a/injectedJavaScript/application.js b/injectedJavaScript/application.js
@@ -1,4 +1,4 @@
-var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name) => `
+var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width) => `
 
   var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
     /*We're rotating by 90% -> Flip X and Y*/
@@ -9,7 +9,7 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     var height = bodyHeight;
 
     var sizeSignaturePad = function () {
-      var devicePixelRatio = 1; /*window.devicePixelRatio || 1;*/
+      var devicePixelRatio = window.devicePixelRatio || 1;
       var canvasWidth = width * devicePixelRatio;
       var canvasHeight = height * devicePixelRatio;
       signaturePadCanvas.width = canvasWidth;
@@ -44,55 +44,41 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     enableSignaturePadFunctionality();
   };
 
-  var bodyWidth = document.body.clientWidth;
-  var bodyHeight = document.body.clientHeight;
+  var bodyWidth = document.body.clientWidth * 2;
+  var bodyHeight = document.body.clientHeight * 2;
   if(!bodyWidth) {
-    bodyWidth = window.innerWidth;
+    bodyWidth = window.innerWidth ? window.innerWidth : ${width};
   }
   if(!bodyHeight) {
-    bodyHeight = window.innerHeight;
+    bodyHeight = window.innerHeight ? window.innerHeight : ${height};
   }
 
   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;
+    canvasElement.width = bodyWidth * devicePixelRatio;
+    canvasElement.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 w = bodyWidth;
+    var h = bodyHeight;
+    canvasElement.width = canvasElement.offsetWidth * 2;
+    canvasElement.height = canvasElement.offsetHeight * 2;
 
+    var fontToHeightRatio = 45 / 159;
+    var fontSize = canvasElement.height * fontToHeightRatio;
+    var textHeight = 18;
     var textWidth = -1;
-
     do {
       context.font = fontSize + "px SignatureFont";
-      textWidth = context.measureText("${name}").width * ratio;
+      textWidth = context.measureText("${name}").width;
       fontSize = 7 * fontSize / 8;
-    } while (textWidth > oldWidth);
+    } while (textWidth + (w * 0.05) > w);
 
     var textPosition = {
-      x: ((oldWidth - textWidth) / 2),
-      y: ((3 * oldHeight / 4) - textHeight)
+      x: ((w - textWidth) / 2),
+      y: ((3 * h / 4) - textHeight)
     };
 
     context.fillStyle = "${penColor}";
@@ -101,7 +87,7 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
     /* Fire a finishedStroke function to update the state */
     executeNativeFunction("finishedStroke", {base64DataUrl: canvasElement.toDataURL()});
   } else {
-    showSignaturePad(canvasElement, bodyWidth, bodyHeight);
+    showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
   }
 `;
 
