fix #2,support set width and height of the parent container

WangShayne · WangShayne · commit 5d02690cd389 · 2017-11-17T10:00:19.000+08:00
diff --git a/dist/vue-signature.js b/dist/vue-signature.js
diff --git a/dist/vue-signature.js.map b/dist/vue-signature.js.map
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
     <title>vue-signature</title>
   </head>
   <body>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-signature",
   "description": "Electronic signature",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Shayne Wang <1614565666@qq.com>",
   "private": false,
   "license": "MIT",
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<vueSignature ref="signature" :sigOption="option"></vueSignature> 
+		<vueSignature ref="signature" :sigOption="option" :w="'800px'" :h="'400px'"></vueSignature> 
 		<vueSignature ref="signature" :sigOption="option"></vueSignature> 
 		<button @click="save">保存</button>
 		<button @click="clear">清除</button>
diff --git a/src/lib/vue-signature.vue b/src/lib/vue-signature.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div :style="{width:w,height:h}">
 		<canvas :id="uid" class="canvas" :data-uid="uid"></canvas>
 	</div>
 	
@@ -13,6 +13,14 @@
 			sigOption: {
 				type:Object,
 				default:()=>{penColor : 'rgb(0, 0, 0)'},
+			},
+			w:{
+				type:String,
+				default:"100%"
+			},
+			h:{
+				type:String,
+				default:"100%"
 			}
 		},
 		data(){
@@ -31,28 +39,11 @@
 				var _this = this;
 				var canvas = document.getElementById(_this.uid)
 				_this.sig = new SignaturePad(canvas,_this.sigOption);
-				function isPC() {
-					var userAgentInfo = navigator.userAgent;
-					var Agents = ["Android", "iPhone",
-								"SymbianOS", "Windows Phone",
-								"iPad", "iPod"];
-					var flag = true;
-					for (var v = 0; v < Agents.length; v++) {
-						if (userAgentInfo.indexOf(Agents[v]) > 0) {
-							flag = false;
-							break;
-						}
-					}
-					return flag;
-				}
 				function resizeCanvas() {
-					if(isPC){
-						canvas.width  = window.innerWidth;
-						canvas.height = window.innerHeight;
-					}else{
-						canvas.width = canvas.offsetWidth;
-						canvas.height = canvas.offsetHeight;
-					}
+					var ratio =  Math.max(window.devicePixelRatio || 1, 1);
+					canvas.width = canvas.offsetWidth * ratio;
+					canvas.height = canvas.offsetHeight * ratio;
+					canvas.getContext("2d").scale(ratio, ratio);
 				}
 				window.addEventListener("resize", resizeCanvas);
 				resizeCanvas();
@@ -77,5 +68,8 @@
 </script>
 
 <style>
-
+	canvas {
+		width: 100%;
+		height: 100%;
+	}
 </style>
diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
-    // filename: 'build.js'
+    // filename: 'build.js',
     filename:"vue-signature.js",
     library: 'vue-signature', 
     libraryTarget: 'umd', 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-signature",`
`3`	`3`	`"description": "Electronic signature",`
`4`		`- "version": "1.2.0",`
	`4`	`+ "version": "1.3.0",`
`5`	`5`	`"author": "Shayne Wang <[email protected]>",`
`6`	`6`	`"private": false,`
`7`	`7`	`"license": "MIT",`