From 39d1889b2b0901156032231c0117e3c9312e9930 Mon Sep 17 00:00:00 2001
From: zhouliujun <1096432931@qq.com>
Date: Fri, 23 Oct 2020 11:06:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E9=AB=98=E5=80=8D=E5=B1=8F=E4=B8=8B?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=98=E5=88=B6=E4=BC=9A=E6=A8=A1=E7=B3=8A=E7=9A=84?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E6=96=B9=E6=A1=88=EF=BC=8C=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87options.isDpr=E5=B1=9E=E6=80=A7=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E5=BC=80=E5=90=AF=E6=88=96=E8=80=85=E5=85=B3=E9=97=AD?=
 =?UTF-8?q?=EF=BC=8C=E6=84=9F=E8=B0=A2=E7=BD=91=E5=8F=8B=E2=80=9CWong-Harr?=
 =?UTF-8?q?y=E2=80=9D=E7=9A=84=E5=BB=BA=E8=AE=AE=E4=B8=8E=E5=8F=8D?=
 =?UTF-8?q?=E9=A6=88=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     | 48 +++++++++++++++-----
 examples/App.vue              | 16 +++++++
 packages/SignCanvas/index.vue | 84 +++++++++++++++++++----------------
 3 files changed, 99 insertions(+), 49 deletions(-)

diff --git a/README.md b/README.md
index 29915d2..8e2b6dd 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 #### ┭┮﹏┭┮ 因为 vue-sign-canvas 的包名被占用了,只好去掉一个前缀了.... 假如此轮子对你有帮助,请顺手star一下吧.o(*￣︶￣*)o
 
+#### 更多文章和技术推文，请关注微信公众号"笔优站长",有问题也可以及时反馈哦！
+
 ## 开始使用! 下载安装npm包
 ```bash
 npm i sign-canvas --save
@@ -49,12 +51,33 @@ components:{ SignCanvas }
                         </select>
                     </span>
                 </li>
+                <li class="li-c">
+                    <span class="item-label">兼容高倍屏高清绘制:</span>
+                    <span class="item-content">
+                        <select name="isSign" v-model="options.isDpr">
+                            <option :value="true">启用</option>
+                            <option :value="false">关闭</option>
+                        </select>
+                    </span>
+                </li>
+                <li class="li-c">
+                    <span class="item-label">边框宽度:</span>
+                    <span class="item-content">
+                        <input v-model="options.borderWidth" type="number">
+                    </span>
+                </li>
                 <li class="li-c">
                     <span class="item-label">下笔宽度:</span>
                     <span class="item-content">
                         <input v-model="options.writeWidth" type="number">
                     </span>
                 </li>
+                <li class="li-c">
+                    <span class="item-label">图片类型:</span>
+                    <span class="item-content">
+                        <input v-model="options.imgType" type="text">
+                    </span>
+                </li>
                 <li class="li-c">
                     <span class="item-label">线条的边缘类型:</span>
                     <span class="item-content">
@@ -97,26 +120,29 @@ components:{ SignCanvas }
     </div>
 </template>
 <script>
+import SignCanvas from '../packages';
 export default {
+    components:{SignCanvas},
     data(){
         return {
             value: null,
             options:{
+                isDpr: false,       //是否使用dpr兼容高倍屏 [Boolean] 可选
                 lastWriteSpeed: 1,  //书写速度 [Number] 可选
                 lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
                 lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
-                lineJoin: 'round',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
-                canvasWidth: 600, //canvas宽高 [Number] 可选
-                canvasHeight: 600,  //高度  [Number] 可选
+                lineJoin: 'bevel',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
+                canvasWidth: 350, //canvas宽高 [Number] 可选
+                canvasHeight: 370,  //高度  [Number] 可选
                 isShowBorder: true, //是否显示边框 [可选]
-                bgColor: '#fcc', //背景色 [String] 可选 注:这背景色仅仅只是canvas背景,保存的图片仍然是透明的
+                bgColor: '#fcc', //背景色 [String] 可选
                 borderWidth: 1, // 网格线宽度  [Number] 可选
                 borderColor: "#ff787f", //网格颜色  [String] 可选
                 writeWidth: 5, //基础轨迹宽度  [Number] 可选
                 maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                 minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
                 writeColor: '#101010', // 轨迹颜色  [String] 可选
-                isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+                isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                 imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
             }
         }
@@ -223,13 +249,14 @@ props:{
 1. 配置项 options 属性
 ```javascript
 {
+    isDpr: false,       //是否使用dpr兼容高倍屏 [Boolean] 可选
     lastWriteSpeed: 1,  //书写速度 [Number] 可选
     lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
     lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
-    lineJoin: 'round',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
-    canvasWidth: 600, //canvas宽高 [Number] 可选
-    canvasHeight: 600,  //高度  [Number] 可选
-    isShowBorder: true, //是否显示边框 [可选]   当签名模式处于false的时候此选项才生效
+    lineJoin: 'bevel',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
+    canvasWidth: 350, //canvas宽高 [Number] 可选
+    canvasHeight: 370,  //高度  [Number] 可选
+    isShowBorder: true, //是否显示边框 [可选]
     bgColor: '#fcc', //背景色 [String] 可选
     borderWidth: 1, // 网格线宽度  [Number] 可选
     borderColor: "#ff787f", //网格颜色  [String] 可选
@@ -237,7 +264,7 @@ props:{
     maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
     minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
     writeColor: '#101010', // 轨迹颜色  [String] 可选
-    isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
     imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
 }
 ```
@@ -313,6 +340,7 @@ npm run lint
 
 ## 更新日志
 
+> v1.1.3 功能更新：增加高倍屏下，绘制会模糊的适配方案，可以通过options.isDpr属性进行开启或者关闭，感谢网友“Wong-Harry”的建议与反馈。
 
 > v1.1.2 优化部分逻辑代码.
 
diff --git a/examples/App.vue b/examples/App.vue
index 60db41e..5ccf2be 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -23,6 +23,21 @@
                         </select>
                     </span>
                 </li>
+                <li class="li-c">
+                    <span class="item-label">兼容高分屏高清绘制:</span>
+                    <span class="item-content">
+                        <select name="isSign" v-model="options.isDpr">
+                            <option :value="true">启用</option>
+                            <option :value="false">关闭</option>
+                        </select>
+                    </span>
+                </li>
+                <li class="li-c">
+                    <span class="item-label">边框宽度:</span>
+                    <span class="item-content">
+                        <input v-model="options.borderWidth" type="number">
+                    </span>
+                </li>
                 <li class="li-c">
                     <span class="item-label">下笔宽度:</span>
                     <span class="item-content">
@@ -84,6 +99,7 @@ export default {
         return {
             value: null,
             options:{
+                isDpr: false,       //是否使用dpr兼容高分屏 [Boolean] 可选
                 lastWriteSpeed: 1,  //书写速度 [Number] 可选
                 lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
                 lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
diff --git a/packages/SignCanvas/index.vue b/packages/SignCanvas/index.vue
index b40a085..b7cd37d 100644
--- a/packages/SignCanvas/index.vue
+++ b/packages/SignCanvas/index.vue
@@ -39,7 +39,9 @@ export default {
             domId: `sign-canvas-${Math.random().toString(36).substr(2)}`,  //生成唯一dom标识
             canvas:null,    //canvas dom对象
             context:null,   //canvas 画布对象
+            dpr: 1,
             config: {
+                isDpr: false,       //是否使用dpr兼容高分屏 [Boolean] 可选
                 lastWriteSpeed: 1,  //书写速度 [Number] 可选
                 lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
                 lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
@@ -80,6 +82,7 @@ export default {
                     this.config[key] = options[key];
                 }
             }
+            this.dpr = typeof window !== 'undefined' && this.config.isDpr ? window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1 : 1;
             this.canvas = document.getElementById(this.domId);
             this.context = this.canvas.getContext("2d");
             this.canvas.style.background = this.config.bgColor;
@@ -105,25 +108,45 @@ export default {
             returnNum = returnNum.toFixed(2);
             //写字模式和签名模式
             if (this.config.isSign) {
-                this.context.lineWidth = this.config.writeWidth;
+                this.context.lineWidth = this.config.writeWidth * this.dpr;
             } else {
-                this.context.lineWidth = this.config.lastWriteWidth = this.config.lastWriteWidth / 4 * 3 + returnNum / 4;
+                const lineWidth = this.config.lastWriteWidth = this.config.lastWriteWidth / 4 * 3 + returnNum / 4
+                this.context.lineWidth = lineWidth * this.dpr;
             }
         },
 
+        /**
+         * 写开始
+         */
+        writeBegin (point) {
+            this.config.isWrite = true;
+            this.config.lastWriteTime = new Date().getTime();
+            this.config.lastPoint = point;
+            this.writeContextStyle();
+        },
+
         /**
          * 绘制轨迹
          */
         writing (point) {
             this.context.beginPath();
-            this.context.moveTo(this.config.lastPoint.x, this.config.lastPoint.y);
-            this.context.lineTo(point.x, point.y);
+            this.context.moveTo(this.config.lastPoint.x * this.dpr, this.config.lastPoint.y * this.dpr);
+            this.context.lineTo(point.x * this.dpr, point.y * this.dpr);
             this.setLineWidth();
             this.context.stroke();
             this.config.lastPoint = point;
             this.context.closePath();
         },
 
+         /**
+         * 写结束
+         */
+        writeEnd (point) {
+            this.config.isWrite = false;
+            this.config.lastPoint = point;
+            this.saveAsImg();
+        },
+
         /**
          * 轨迹样式
          */
@@ -134,24 +157,6 @@ export default {
             this.context.lineJoin = this.config.lineJoin;
         },
 
-        /**
-         * 写开始
-         */
-        writeBegin (point) {
-            this.config.isWrite = true;
-            this.config.lastWriteTime = new Date().getTime();
-            this.config.lastPoint = point;
-            this.writeContextStyle();
-        },
-
-        /**
-         * 写结束
-         */
-        writeEnd (point) {
-            this.config.isWrite = false;
-            this.config.lastPoint = point;
-            this.saveAsImg();
-        },
 
         /**
          * 清空画板
@@ -159,31 +164,30 @@ export default {
         canvasClear () {
             this.context.save();
             this.context.strokeStyle = this.config.writeColor;
-            this.context.clearRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
             this.context.beginPath();
-            let size = this.config.borderWidth / 2;
+            this.context.lineWidth = this.config.borderWidth * this.dpr;
+            this.context.strokeStyle = this.config.borderColor;
+            let size = this.config.borderWidth / 2 * this.dpr;
             if(this.config.isShowBorder){
                 //画外面的框
                 this.context.moveTo(size, size);
-                this.context.lineTo(this.config.canvasWidth - size, size);
-                this.context.lineTo(this.config.canvasWidth - size, this.config.canvasHeight - size);
-                this.context.lineTo(size, this.config.canvasHeight - size);
+                this.context.lineTo(this.canvas.width - size, size);
+                this.context.lineTo(this.canvas.width - size, this.canvas.height - size);
+                this.context.lineTo(size, this.canvas.height - size);
                 this.context.closePath();
-                this.context.lineWidth = this.config.borderWidth;
-                this.context.strokeStyle = this.config.borderColor;
                 this.context.stroke();
             }
             if (this.config.isShowBorder && !this.config.isSign) {
                 //画里面的框
                 this.context.moveTo(0, 0);
-                this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight);
-                this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight / 2);
-                this.context.lineTo(this.config.canvasWidth, this.config.canvasHeight / 2);
-                this.context.lineTo(0, this.config.canvasHeight / 2);
-                this.context.lineTo(0, this.config.canvasHeight);
-                this.context.lineTo(this.config.canvasWidth, 0);
-                this.context.lineTo(this.config.canvasWidth / 2, 0);
-                this.context.lineTo(this.config.canvasWidth / 2, this.config.canvasHeight);
+                this.context.lineTo(this.canvas.width, this.canvas.height);
+                this.context.lineTo(this.canvas.width, this.canvas.height / 2);
+                this.context.lineTo(0, this.canvas.height / 2);
+                this.context.lineTo(0, this.canvas.height);
+                this.context.lineTo(this.canvas.width, 0);
+                this.context.lineTo(this.canvas.width / 2, 0);
+                this.context.lineTo(this.canvas.width / 2, this.canvas.height);
                 this.context.stroke();
             }
             this.$emit('confirm', null);
@@ -204,8 +208,10 @@ export default {
          * 初始化画板
          */
         canvasInit () {
-            this.canvas.width = this.config.canvasWidth;
-            this.canvas.height = this.config.canvasHeight;
+            this.canvas.width = this.config.canvasWidth * this.dpr;
+            this.canvas.height = this.config.canvasHeight * this.dpr;
+            this.canvas.style.width = `${this.config.canvasWidth}px`;
+            this.canvas.style.height = `${this.config.canvasHeight}px`;
             this.config.emptyCanvas = this.canvas.toDataURL(`image/${this.config.imgType}`);
         },
 

From 53c2e1bd529d90bd788300aaf16e781062dee79d Mon Sep 17 00:00:00 2001
From: zhouliujun <1096432931@qq.com>
Date: Fri, 23 Oct 2020 11:07:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d0e6674..ddaf293 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
     "name": "sign-canvas",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "author": "yxs",
-    "description": "一个基于canvas和vue的手写签名板,支持移动端和PC 可以直接下载图片和转成base64编码",
+    "description": "一个基于canvas和vue的手写签名板,支持移动端和PC可以直接下载图片和转成base64编码，支持高倍屏高清绘制",
     "main":"lib/sign-canvas.umd.min.js",
     "private": false,
     "license": "MIT",