From 19ed0e013d507dce87f2ca568cff62b63fed4e62 Mon Sep 17 00:00:00 2001 From: zhouliujun <1096432931@qq.com> Date: Tue, 4 Aug 2020 19:04:52 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/App.vue | 83 +++++++++++++++-- package.json | 2 +- packages/SignCanvas/src/main.vue | 152 +++++++++++++++++-------------- 3 files changed, 160 insertions(+), 77 deletions(-) diff --git a/examples/App.vue b/examples/App.vue index 715f6b4..9f46e3f 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -2,10 +2,67 @@

Vue Sign Canvas

- +
+
    +
  • + 书写速度: + + + +
    • +
  • + 显示网格: + + + +
    • +
  • + 下笔宽度: + + + +
    • +
  • + 线条的边缘类型: + + + +
    • +
  • + 线条交汇时边角的类型: + + + +
    • +
  • + 画笔颜色: + + + +
    • +
  • + 背景色: + + + +
    • +
+
清空 保存 @@ -19,10 +76,22 @@ export default { return { value: null, options:{ + lastWriteSpeed: 1, //书写速度 [Number] 可选 + lastWriteWidth: 2, //下笔的宽度 [Number] 可选 + lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽 + lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。 canvasWidth: 350, //canvas宽高 [Number] 可选 canvasHeight: 370, //高度 [Number] 可选 + isShowBorder: true, //是否显示边框 [可选] + bgColor: '#fcc', //背景色 [String] 可选 + borderWidth: 1, // 网格线宽度 [Number] 可选 + borderColor: "#ff787f", //网格颜色 [String] 可选 + writeWidth: 5, //基础轨迹宽度 [Number] 可选 + maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选 + minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选 + writeColor: '#101010', // 轨迹颜色 [String] 可选 isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框 - isShowBorder: false, //是否显示边框 [可选] + imgType:'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的 } } }, @@ -62,15 +131,9 @@ export default { padding: 20px; text-align: center; } -// .sign-box{ -// position: absolute; -// top: 300px; -// left: 30px; -// } .sign-canvas{ display: block; margin: 20px auto; - border: 1px dashed #f00; } .view-image{ display: block; diff --git a/package.json b/package.json index ea3786c..b4aec42 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sign-canvas", - "version": "1.0.7", + "version": "1.0.8", "author": "yxs", "description": "一个基于canvas和vue的手写签名板,支持移动端和PC 可以直接下载图片和转成base64编码", "main":"lib/sign-canvas.umd.min.js", diff --git a/packages/SignCanvas/src/main.vue b/packages/SignCanvas/src/main.vue index c00ae8f..552e84d 100644 --- a/packages/SignCanvas/src/main.vue +++ b/packages/SignCanvas/src/main.vue @@ -1,5 +1,14 @@ @@ -53,16 +62,28 @@ export default { mounted () { this.init(); }, + + watch:{ + options:{ + handler(){ + this.init(); + }, + deep: true + } + }, + methods: { init () { this.canvas = document.getElementById(this.domId); this.context = this.canvas.getContext("2d"); + this.canvas.style.backgorund = this.config.bgColor; const options = this.options; if (options) { for (const key in options) { this.config[key] = options[key]; } } + console.log(this.config); this.canvasInit(); this.canvasClear(); }, @@ -185,84 +206,73 @@ export default { this.canvas.width = this.config.canvasWidth; this.canvas.height = this.config.canvasHeight; this.config.emptyCanvas = this.canvas.toDataURL("image/png"); - this.bindEvent(); }, /** - * 绑定事件 + * 鼠标按下 => 下笔 */ - bindEvent () { - //鼠标按下 => 下笔 - this.canvas.addEventListener('mousedown', (e) => { - e && e.preventDefault() && e.stopPropagation(); - this.writeBegin({ x: e.offsetX || e.clientX, y: e.offsetY || e.clientY }); - }); + handleMousedown(e){ + this.writeBegin({ x: e.offsetX || e.clientX, y: e.offsetY || e.clientY }); + }, - //书写过程 => 下笔书写 - this.canvas.addEventListener('mousemove', (e) => { - e && e.preventDefault() && e.stopPropagation(); - this.config.isWrite && this.writing({ x: e.offsetX, y: e.offsetY }); - }); + /** + * 书写过程 => 下笔书写 + */ + handleMousemove(e){ + this.config.isWrite && this.writing({ x: e.offsetX, y: e.offsetY }); + }, - //鼠标松开 => 提笔 - this.canvas.addEventListener('mouseup', (e) => { - e && e.preventDefault() && e.stopPropagation(); - this.writeEnd({ x: e.offsetX, y: e.offsetY }); - }); + /** + * 鼠标松开 => 提笔 + */ + handleMouseup(e){ + this.writeEnd({ x: e.offsetX, y: e.offsetY }); + }, - //离开书写区域 => 提笔离开 - this.canvas.addEventListener('mouseleave', (e) => { - e && e.preventDefault() && e.stopPropagation(); - this.writeEnd({ x: e.offsetX, y: e.offsetY }); - }); + /** + * 离开书写区域 => 提笔离开 + */ + handleMouseleave(e){ + this.writeEnd({ x: e.offsetX, y: e.offsetY }); + }, - /* ==========================移动端兼容=Start================================ */ + /* ==========================移动端兼容=Start================================ */ - //手指按下 => 下笔 - this.canvas.addEventListener('touchstart', (e) => { - e && e.preventDefault() && e.stopPropagation(); - const touch = e.targetTouches[0]; - // const getBCR = touch.target.getBoundingClientRect(); - const offsetLeft = this.offset(touch.target,'left'); - const offsetTop = this.offset(touch.target,'top'); - // const offsetLeft = touch.target.offsetLeft; - // const offsetTop = touch.target.offsetTop; - let x = touch.pageX ? touch.pageX - offsetLeft : touch.clientX; - let y = touch.pageY ? touch.pageY - offsetTop : touch.clientY; - this.writeBegin({ x, y}); - }); + /** + * 手指按下 => 下笔 + */ + handleTouchstart(e){ + const touch = e.targetTouches[0]; + let x = touch.pageX ? touch.pageX - this.getRect().left : touch.clientX; + let y = touch.pageY ? touch.pageY - this.getRect().top : touch.clientY; + this.writeBegin({ x, y}); + }, - //手指移动 => 下笔书写 - this.canvas.addEventListener('touchmove', (e) => { - e && e.preventDefault() && e.stopPropagation(); - const touch = e.targetTouches[0]; - const offsetLeft = this.offset(touch.target,'left'); - const offsetTop = this.offset(touch.target,'top'); - // const offsetLeft = touch.target.offsetLeft; - // const offsetTop = touch.target.offsetTop; - let x = touch.pageX ? touch.pageX - offsetLeft : touch.clientX; - let y = touch.pageY ? touch.pageY - offsetTop : touch.clientY; - console.log(touch) - this.config.isWrite && this.writing({ x, y }); - }); + /** + * 手指移动 => 下笔书写 + */ + handleTouchmove(e){ + const touch = e.targetTouches[0]; + const offsetTop = this.offset(touch.target,'top'); + let x = touch.pageX ? touch.pageX - this.getRect().left : touch.clientX; + let y = touch.pageY ? touch.pageY - this.getRect().top : touch.clientY; + this.config.isWrite && this.writing({ x, y }); + }, - //手指移动结束 => 提笔离开 - this.canvas.addEventListener('touchend', (e) => { - e && e.preventDefault() && e.stopPropagation(); - const tcs = e.targetTouches; - const ccs = e.changedTouches; - const touch = tcs && tcs.length && tcs[0] || ccs && ccs.length && ccs[0]; - const offsetLeft = this.offset(touch.target,'left'); - const offsetTop = this.offset(touch.target,'top'); - // const offsetLeft = touch.target.offsetLeft; - // const offsetTop = touch.target.offsetTop; - let x = touch.pageX ? touch.pageX - offsetLeft : touch.clientX; - let y = touch.pageY ? touch.pageY - offsetTop : touch.clientY; - this.writeEnd({ x, y }); - }); - /* ==========================移动端兼容=End================================ */ + /** + * 手指移动结束 => 提笔离开 + */ + handleTouchend(e){ + const tcs = e.targetTouches; + const ccs = e.changedTouches; + const touch = tcs && tcs.length && tcs[0] || ccs && ccs.length && ccs[0]; + let x = touch.pageX ? touch.pageX - this.getRect().left : touch.clientX; + let y = touch.pageY ? touch.pageY - this.getRect().top : touch.clientY; + this.writeEnd({ x, y }); }, + /* ==========================移动端兼容=End================================== */ + /** * 下载二维码到本地 */ @@ -284,8 +294,18 @@ export default { saveLink.dispatchEvent(event); }, + /** + * 获取画布的元素的大小及其相对于视口的位置 + * @return {} + */ + getRect() { + return this.$refs[this.domId].getBoundingClientRect(); + }, + + /** * 获取dom对象的偏移量 可以获取解决position定位的问题 + * @returns number */ offset(obj, direction) { //将top,left首字母大写,并拼接成offsetTop,offsetLeft From 4ea7543827d7567208ef4d59d22401d56f9925e4 Mon Sep 17 00:00:00 2001 From: zhouliujun <1096432931@qq.com> Date: Wed, 5 Aug 2020 10:15:56 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E8=B0=83=E6=95=B4demo=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?bug=E5=92=8C=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/App.vue | 19 ++++++++++++++++++- packages/SignCanvas/src/main.vue | 24 +++++++++++++----------- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/examples/App.vue b/examples/App.vue index 9f46e3f..02c274b 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -15,7 +15,7 @@
  • - 显示网格: + 显示边框/网格: