chore: add maxWidth option

README.md

@@ -31,6 +31,7 @@ new Signature.default({
   minWidth: 2, // minimize linWidth
   minSpeed: 1.5, // minimize brush move speed
   scaleRatio: window.devicePixelRatio, // canvas scale ratio
+  maxWidth: null, // canvas element style max width
   maxWidthDiffRate: 20, // Smooth transition threshold
   resizeDebounceTime: 200, // window resize debounce elapse time
   maxHistoryLength: 0, // max history length, no limit if set to 0

es/index.js

@@ -274,6 +274,7 @@ var Common = /*#__PURE__*/function () {
       var _this$options = this.options,
           width = _this$options.width,
           height = _this$options.height,
+          maxWidth = _this$options.maxWidth,
           root = _this$options.root,
           scaleRatio = _this$options.scaleRatio;
       var eWidth, eHeight;
@@ -299,6 +300,12 @@ var Common = /*#__PURE__*/function () {
         this.drawElement.height = eHeight;
       }
 
+      if (maxWidth) {
+        var origWidth = eWidth;
+        eWidth = Math.min(eWidth, maxWidth);
+        eHeight = Math.min(eHeight, eWidth / origWidth * eHeight);
+      }
+
       this.drawElement.style.cssText = "width: ".concat(eWidth, "px; height: ").concat(eHeight, "px; touch-action: none;");
 
       if (this.tempImageData) {
@@ -1201,6 +1208,7 @@ Stage.defaultOptions = {
   minWidth: 2,
   minSpeed: 1.5,
   scaleRatio: window.devicePixelRatio || 1,
+  maxWidth: null,
   maxWidthDiffRate: 20,
   resizeDebounceTime: 200,
   maxHistoryLength: 0,

index.d.ts

@@ -20,6 +20,7 @@ export interface IOptions {
   minWidth?: number
   minSpeed?: number
   scaleRatio?: number
+  maxWidth?: number
   maxWidthDiffRate?: number
   resizeDebounceTime?: number
   maxHistoryLength?: number

lib/index.js

@@ -298,6 +298,7 @@ var Common = /*#__PURE__*/function () {
       var _this$options = this.options,
           width = _this$options.width,
           height = _this$options.height,
+          maxWidth = _this$options.maxWidth,
           root = _this$options.root,
           scaleRatio = _this$options.scaleRatio;
       var eWidth, eHeight;
@@ -323,6 +324,12 @@ var Common = /*#__PURE__*/function () {
         this.drawElement.height = eHeight;
       }
 
+      if (maxWidth) {
+        var origWidth = eWidth;
+        eWidth = Math.min(eWidth, maxWidth);
+        eHeight = Math.min(eHeight, eWidth / origWidth * eHeight);
+      }
+
       this.drawElement.style.cssText = "width: ".concat(eWidth, "px; height: ").concat(eHeight, "px; touch-action: none;");
 
       if (this.tempImageData) {
@@ -1225,6 +1232,7 @@ Stage.defaultOptions = {
   minWidth: 2,
   minSpeed: 1.5,
   scaleRatio: window.devicePixelRatio || 1,
+  maxWidth: null,
   maxWidthDiffRate: 20,
   resizeDebounceTime: 200,
   maxHistoryLength: 0,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "h5-signature",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "h5 signature",
   "main": "lib/index.js",
   "module": "es/index.js",

src/base.js

@@ -8,7 +8,7 @@ class Common {
   }
 
   resize() {
-    const { width, height, root, scaleRatio } = this.options;
+    const { width, height, maxWidth, root, scaleRatio } = this.options;
     let eWidth, eHeight;
     if (width === "auto") {
       eWidth = root.clientWidth;
@@ -28,6 +28,11 @@ class Common {
       this.drawElement.width = eWidth;
       this.drawElement.height = eHeight;
     }
+    if (maxWidth) {
+      const origWidth = eWidth;
+      eWidth = Math.min(eWidth, maxWidth);
+      eHeight = Math.min(eHeight, (eWidth / origWidth) * eHeight);
+    }
     this.drawElement.style.cssText = `width: ${eWidth}px; height: ${eHeight}px; touch-action: none;`;
     if (this.tempImageData) {
       this.drawCtx.putImageData(this.tempImageData, 0, 0);

src/stage.js

@@ -300,6 +300,7 @@ Stage.defaultOptions = {
   minWidth: 2,
   minSpeed: 1.5,
   scaleRatio: window.devicePixelRatio || 1,
+  maxWidth: null,
   maxWidthDiffRate: 20,
   resizeDebounceTime: 200,
   maxHistoryLength: 0,