JS实现移动端在线签协议功能

在一个风和日丽的下午，刚准备下班，突然接到需求说要做一个在线签协议功能，当时心里想着不就百度一顿拷贝就完事了吗(因为我没用过canvas，所谓初生牛犊不怕虎 )，谁知做起来如此吃力，下面就来记录下历程。

协议模板

 

分析

如上图，需要做的就是做一个签字板可以在上面写字，写完后点击完成可以生成如上图的图片所示，把签好的字放到指定的位置。

做这个第一反应肯定就是使用canvas绘制路径

我的思路是:

一个字一个字写，每写一个字点一下记录，最后拼接，但想到用户体验问题就pass了这个思路。

最后的思路：一行可以写很多个字，可以让用户滑动canvas，一直写下去(因为协议模板最后还要抄写一段话)

canvas绘制路径--实现签名功能

 

<canvas id="canvas" style="top:0">您的手机不支持在线签署</canvas>

const canvaspaint = {};//定义一个全局对象，把canvas的各种状态存进去
canvaspaint.canvas = document.getelementbyid("canvas");
canvaspaint.ctx = document.getelementbyid("canvas").getcontext("2d");
canvaspaint.ctx.linecap = 'round';//让结束线帽呈现圆滑状
canvaspaint.ctx.linejoin = 'round';//交汇时呈现圆滑状
canvaspaint.ctx.strokewidth = 5;//描边宽度
canvaspaint.ctx.linewidth = 5;//线条宽度

初始化好画布后，我们需要监听画布上的滑动事件

canvaspaint.canvas.addeventlistener('touchstart', starteventhandler, {passive: false});
function starteventhandler(event) {
 event.preventdefault();
 canvaspaint.ctx.beginpath();//每次都是一个新路径,不写会和上个字的最后一笔连起来
 canvaspaint.canvas.addeventlistener('touchmove', moveeventhandler, {passive: false});
 canvaspaint.canvas.addeventlistener('touchend', endeventhandler, {passive: false});
}

passive: false 和 event.preventdefault() 这两个是绝配哦， event.preventdefault() 阻止默认行为，防止在画布上写字时触发了浏览器自带的下拉动作之类的。那 passive: false 是谷歌56版本后提出的新属性，设置为 false 就是告诉浏览器我有阻止默认行为的代码，刚开始不要给我滑动，你需要执行我的 event.preventdefault() 这句代码，如果设置为了 true ,浏览器会自动忽略这句代码，从而不能阻止成功，默认是 true ，所以这里就是坑之一了。

我们继续编写移动划线逻辑

function moveeventhandler(event) {
 event.preventdefault();
 var coverpos = canvaspaint.canvas.getboundingclientrect();
 canvaspaint.mousex = event.clientx - coverpos.left;
 canvaspaint.mousey = event.clienty - coverpos.top;
 if (canvaspaint.canpaint) {//后续为拖动画布功能设置的状态
 canvaspaint.ctx.lineto(//使用lineto将移动过的坐标绘制成线
 canvaspaint.mousex,
 canvaspaint.mousey
 );
 canvaspaint.ctx.stroke();//绘制
 }
}
function endeventhandler(event) {
 event.preventdefault();
 //抬起手指时取消move和end事件的监听
 canvaspaint.canvas.removeeventlistener('touchmove', moveeventhandler, false);
 canvaspaint.canvas.removeeventlistener('touchend', endeventhandler, false);
}

canvas--清除屏幕功能

这个功能比较简单就一句话

function clearcanvas() {
 canvaspaint.ctx.clearrect(0, 0, canvaspaint.canvas.width, canvaspaint.canvas.height);
}

提交签名功能

首先需要将画布上的文字转换为img对象，然后使用drawimage绘制到协议上去

preloadimg(['/assets/index/images/agree.jpg', canvaspaint.canvas.todataurl()], result);
//agree.jpg为协议名，canvaspaint.canvas.todataurl()就是签好的字转换为base64的结果
function preloadimg(source, callback, args) {
 var pr = [];
 source.foreach(url => {
 var p = loadimage(url)
 .then(function (img) {
 return img;
 })
 .catch(function (err) {
 console.log(err);
 });
 pr.push(p);
 });

 promise.all(pr)
 .then(function (imgarray) {
 callback(imgarray, args);
 });

}
function loadimage(url) {
 return new promise((resolve, reject) => {
 var img = new image();
 img.onload = function () {
 resolve(img);
 };
 img.onerror = reject;
 img.src = url;
 });
}

由于img赋值src是异步的，我们必须要一个完整的image对象，所以我们使用promise包装，使得我们所有图片都转换完之后再将结果传入回调函数(result)中

function result(imgarr) {
 drawname(imgarr);
}
function drawname(imgarr) {
 //绘制名字和底部的名字和日期
 canvaspaint.canvas2 = document.getelementbyid('canvas2');
 canvaspaint.context2 = canvaspaint.canvas2.getcontext('2d');
 canvaspaint.ratio = canvaspaint.canvas.height / canvaspaint.canvas.width; //计算画布比例
 canvaspaint.context2.drawimage(imgarr[0], 0, 0, 500, 707);//img0是底图原协议
 canvaspaint.context2.save();
 canvaspaint.context2.translate(50, 190);
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[1], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 canvaspaint.context2.save();
 canvaspaint.context2.translate(67, 723);//下方的字
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[1], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 canvaspaint.context2.save();
 canvaspaint.context2.translate(400, 625);//下方的字
 canvaspaint.context2.font = "11px 微软雅黑";
 canvaspaint.context2.fillstyle = "#000";
 canvaspaint.context2.textalign = "center";
 canvaspaint.context2.textbaseline = "middle";
 var time = new date().tolocalestring().split(' ')[0];
 canvaspaint.context2.filltext(time, 0, 0);
 canvaspaint.context2.restore();
 prevdrawstatement();
}

这里最主要的还是要理解下画布的rotate和translate方法，就可以把文字旋转任意角度和放到任意位置了

长字手写--画布拖动

 

上面签字完成后，我们其实已经用了另一个canvas合成了文字和原协议，现在我们要做无限拖动功能，其实也很简单。

在此之前我们需要清空之前的画布

function prevdrawstatement() {
 clearcanvas();//清除画布
 canvaspaint.finish.innerhtml = "提交抄写";
 canvaspaint.pencilbtn.style.display = 'block';
 canvaspaint.secondstate.style.display = 'block';
 canvaspaint.tips.innerhtml = "(最后一步)请抄写屏幕上方引号内的确认语句";
 canvaspaint.tips.style.color = 'red';
 settimeout(function () {
 canvaspaint.tips.style.color = '#666';
 }, 2000);
 state = statement;//开始写句子
}

右上角有个移动签字板功能，这里实现的是左右移动，相关代码如下

function togglepencil() {
 if (canvaspaint.canpaint) {
 canvaspaint.canpaint = false;
 canvaspaint.pencilbtn.innertext = "使用签字笔";
 //不能签字时应该把开始写字事件去掉，同时加上document事件
 canvaspaint.canvas.removeeventlistener('touchstart', starteventhandler, false);
 document.addeventlistener('touchstart', documentstarteventhandler, {passive: false});
 } else {
 canvaspaint.canpaint = true;
 canvaspaint.pencilbtn.innertext = "移动签字板";
 //能签字时应该把开始写字事件绑定上去，同时去掉document事件
 canvaspaint.canvas.addeventlistener('touchstart', starteventhandler, {passive: false});
 document.removeeventlistener('touchstart', documentstarteventhandler, false);
 }
}
function documentstarteventhandler(event) {
 event.preventdefault();
 canvaspaint.y = event.clienty;
 canvaspaint.top = parsefloat(canvaspaint.canvas.style.top);//画板距离顶部的值
 document.addeventlistener('touchmove', documentmoveeventhandler, {passive: false});
 document.addeventlistener('touchend', documentendeventhandler, {passive: false});
}
function documentmoveeventhandler(event) {
 event.preventdefault();
 canvaspaint.newy = event.clienty - canvaspaint.y;
 if (!canvaspaint.canpaint) {
 canvaspaint.canvas.style.top = canvaspaint.newy + canvaspaint.top + 'px';
 if (parsefloat(canvaspaint.canvas.style.top) > 0) {//限制边界
  canvaspaint.canvas.style.top = 0 + 'px';
 }
 }
}

function documentendeventhandler(event) {
 event.preventdefault();
}

合成长句到协议中并显示最终图片

提交抄写按钮点击后执行下面的函数

function statementdraw(imgarr) {
 canvaspaint.context2.save();
 canvaspaint.context2.translate(52, 690);
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[0], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 console.log(canvaspaint.canvas2.todataurl());
 document.getelementbyid('resultimg').setattribute('src', canvaspaint.canvas2.todataurl());
 document.getelementbyid('resultimg').style.position = 'absolute';
 document.getelementbyid('resultimg').style.left = 0;
 document.getelementbyid('resultimg').style.top = 0;
 document.getelementbyid('resultimg').style.zindex = 50;
}

在一个风和日丽的下午，刚准备下班，突然接到需求说要做一个在线签协议功能，当时心里想着不就百度一顿拷贝就完事了吗(因为我没用过canvas，所谓初生牛犊不怕虎 )，谁知做起来如此吃力，下面就来记录下历程。

协议模板

分析

如上图，需要做的就是做一个签字板可以在上面写字，写完后点击完成可以生成如上图的图片所示，把签好的字放到指定的位置。

做这个第一反应肯定就是使用canvas绘制路径

我的思路是:

一个字一个字写，每写一个字点一下记录，最后拼接，但想到用户体验问题就pass了这个思路。

最后的思路：一行可以写很多个字，可以让用户滑动canvas，一直写下去(因为协议模板最后还要抄写一段话)

canvas绘制路径--实现签名功能

<canvas id="canvas" style="top:0">您的手机不支持在线签署</canvas>

const canvaspaint = {};//定义一个全局对象，把canvas的各种状态存进去
canvaspaint.canvas = document.getelementbyid("canvas");
canvaspaint.ctx = document.getelementbyid("canvas").getcontext("2d");
canvaspaint.ctx.linecap = 'round';//让结束线帽呈现圆滑状
canvaspaint.ctx.linejoin = 'round';//交汇时呈现圆滑状
canvaspaint.ctx.strokewidth = 5;//描边宽度
canvaspaint.ctx.linewidth = 5;//线条宽度

初始化好画布后，我们需要监听画布上的滑动事件

canvaspaint.canvas.addeventlistener('touchstart', starteventhandler, {passive: false});
function starteventhandler(event) {
 event.preventdefault();
 canvaspaint.ctx.beginpath();//每次都是一个新路径,不写会和上个字的最后一笔连起来
 canvaspaint.canvas.addeventlistener('touchmove', moveeventhandler, {passive: false});
 canvaspaint.canvas.addeventlistener('touchend', endeventhandler, {passive: false});
}

passive: false 和 event.preventdefault() 这两个是绝配哦， event.preventdefault() 阻止默认行为，防止在画布上写字时触发了浏览器自带的下拉动作之类的。那 passive: false 是谷歌56版本后提出的新属性，设置为 false 就是告诉浏览器我有阻止默认行为的代码，刚开始不要给我滑动，你需要执行我的 event.preventdefault() 这句代码，如果设置为了 true ,浏览器会自动忽略这句代码，从而不能阻止成功，默认是 true ，所以这里就是坑之一了。

我们继续编写移动划线逻辑

function moveeventhandler(event) {
 event.preventdefault();
 var coverpos = canvaspaint.canvas.getboundingclientrect();
 canvaspaint.mousex = event.clientx - coverpos.left;
 canvaspaint.mousey = event.clienty - coverpos.top;
 if (canvaspaint.canpaint) {//后续为拖动画布功能设置的状态
 canvaspaint.ctx.lineto(//使用lineto将移动过的坐标绘制成线
  canvaspaint.mousex,
  canvaspaint.mousey
 );
 canvaspaint.ctx.stroke();//绘制
 }
}
function endeventhandler(event) {
 event.preventdefault();
 //抬起手指时取消move和end事件的监听
 canvaspaint.canvas.removeeventlistener('touchmove', moveeventhandler, false);
 canvaspaint.canvas.removeeventlistener('touchend', endeventhandler, false);
}

canvas--清除屏幕功能

这个功能比较简单就一句话

function clearcanvas() {
 canvaspaint.ctx.clearrect(0, 0, canvaspaint.canvas.width, canvaspaint.canvas.height);
}

提交签名功能

首先需要将画布上的文字转换为img对象，然后使用drawimage绘制到协议上去

preloadimg(['/assets/index/images/agree.jpg', canvaspaint.canvas.todataurl()], result);
//agree.jpg为协议名，canvaspaint.canvas.todataurl()就是签好的字转换为base64的结果
function preloadimg(source, callback, args) {
 var pr = [];
 source.foreach(url => {
 var p = loadimage(url)
  .then(function (img) {
  return img;
  })
  .catch(function (err) {
  console.log(err);
  });
 pr.push(p);
 });

 promise.all(pr)
 .then(function (imgarray) {
  callback(imgarray, args);
 });

}
function loadimage(url) {
 return new promise((resolve, reject) => {
 var img = new image();
 img.onload = function () {
  resolve(img);
 };
 img.onerror = reject;
 img.src = url;
 });
}

由于img赋值src是异步的，我们必须要一个完整的image对象，所以我们使用promise包装，使得我们所有图片都转换完之后再将结果传入回调函数(result)中

function result(imgarr) {
 drawname(imgarr);
}
function drawname(imgarr) {
 //绘制名字和底部的名字和日期
 canvaspaint.canvas2 = document.getelementbyid('canvas2');
 canvaspaint.context2 = canvaspaint.canvas2.getcontext('2d');
 canvaspaint.ratio = canvaspaint.canvas.height / canvaspaint.canvas.width; //计算画布比例
 canvaspaint.context2.drawimage(imgarr[0], 0, 0, 500, 707);//img0是底图原协议
 canvaspaint.context2.save();
 canvaspaint.context2.translate(50, 190);
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[1], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 canvaspaint.context2.save();
 canvaspaint.context2.translate(67, 723);//下方的字
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[1], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 canvaspaint.context2.save();
 canvaspaint.context2.translate(400, 625);//下方的字
 canvaspaint.context2.font = "11px 微软雅黑";
 canvaspaint.context2.fillstyle = "#000";
 canvaspaint.context2.textalign = "center";
 canvaspaint.context2.textbaseline = "middle";
 var time = new date().tolocalestring().split(' ')[0];
 canvaspaint.context2.filltext(time, 0, 0);
 canvaspaint.context2.restore();
 prevdrawstatement();
}

这里最主要的还是要理解下画布的rotate和translate方法，就可以把文字旋转任意角度和放到任意位置了

长字手写--画布拖动

上面签字完成后，我们其实已经用了另一个canvas合成了文字和原协议，现在我们要做无限拖动功能，其实也很简单。

在此之前我们需要清空之前的画布

function prevdrawstatement() {
 clearcanvas();//清除画布
 canvaspaint.finish.innerhtml = "提交抄写";
 canvaspaint.pencilbtn.style.display = 'block';
 canvaspaint.secondstate.style.display = 'block';
 canvaspaint.tips.innerhtml = "(最后一步)请抄写屏幕上方引号内的确认语句";
 canvaspaint.tips.style.color = 'red';
 settimeout(function () {
 canvaspaint.tips.style.color = '#666';
 }, 2000);
 state = statement;//开始写句子
}

右上角有个移动签字板功能，这里实现的是左右移动，相关代码如下

function togglepencil() {
 if (canvaspaint.canpaint) {
 canvaspaint.canpaint = false;
 canvaspaint.pencilbtn.innertext = "使用签字笔";
 //不能签字时应该把开始写字事件去掉，同时加上document事件
 canvaspaint.canvas.removeeventlistener('touchstart', starteventhandler, false);
 document.addeventlistener('touchstart', documentstarteventhandler, {passive: false});
 } else {
 canvaspaint.canpaint = true;
 canvaspaint.pencilbtn.innertext = "移动签字板";
 //能签字时应该把开始写字事件绑定上去，同时去掉document事件
 canvaspaint.canvas.addeventlistener('touchstart', starteventhandler, {passive: false});
 document.removeeventlistener('touchstart', documentstarteventhandler, false);
 }
}
function documentstarteventhandler(event) {
 event.preventdefault();
 canvaspaint.y = event.clienty;
 canvaspaint.top = parsefloat(canvaspaint.canvas.style.top);//画板距离顶部的值
 document.addeventlistener('touchmove', documentmoveeventhandler, {passive: false});
 document.addeventlistener('touchend', documentendeventhandler, {passive: false});
}
function documentmoveeventhandler(event) {
 event.preventdefault();
 canvaspaint.newy = event.clienty - canvaspaint.y;
 if (!canvaspaint.canpaint) {
 canvaspaint.canvas.style.top = canvaspaint.newy + canvaspaint.top + 'px';
 if (parsefloat(canvaspaint.canvas.style.top) > 0) {//限制边界
  canvaspaint.canvas.style.top = 0 + 'px';
 }
 }
}

function documentendeventhandler(event) {
 event.preventdefault();
}

合成长句到协议中并显示最终图片

提交抄写按钮点击后执行下面的函数

function statementdraw(imgarr) {
 canvaspaint.context2.save();
 canvaspaint.context2.translate(52, 690);
 canvaspaint.context2.rotate(270 * math.pi / 180);
 canvaspaint.context2.drawimage(imgarr[0], 80, 50, 33, 33 * canvaspaint.ratio);//画反转后的名字
 canvaspaint.context2.restore();
 console.log(canvaspaint.canvas2.todataurl());
 document.getelementbyid('resultimg').setattribute('src', canvaspaint.canvas2.todataurl());
 document.getelementbyid('resultimg').style.position = 'absolute';
 document.getelementbyid('resultimg').style.left = 0;
 document.getelementbyid('resultimg').style.top = 0;
 document.getelementbyid('resultimg').style.zindex = 50;
}

总结

以上所述是小编给大家介绍的js实现移动端在线签协议功能,希望对大家有所帮助