JS實(shí)現(xiàn)移動(dòng)端在線簽協(xié)議功能
在一個(gè)風(fēng)和日麗的下午,剛準(zhǔn)備下班,突然接到需求說要做一個(gè)在線簽協(xié)議功能,當(dāng)時(shí)心里想著不就百度一頓拷貝就完事了嗎(因?yàn)槲覜]用過canvas,所謂初生牛犢不怕虎 ),誰知做起來如此吃力,下面就來記錄下歷程。
協(xié)議模板
分析
如上圖,需要做的就是做一個(gè)簽字板可以在上面寫字,寫完后點(diǎn)擊完成可以生成如上圖的圖片所示,把簽好的字放到指定的位置。
做這個(gè)第一反應(yīng)肯定就是使用canvas繪制路徑
我的思路是:
一個(gè)字一個(gè)字寫,每寫一個(gè)字點(diǎn)一下記錄,最后拼接,但想到用戶體驗(yàn)問題就pass了這個(gè)思路。
最后的思路:一行可以寫很多個(gè)字,可以讓用戶滑動(dòng)canvas,一直寫下去(因?yàn)閰f(xié)議模板最后還要抄寫一段話)
canvas繪制路徑--實(shí)現(xiàn)簽名功能
<canvas id="canvas" style="top:0">您的手機(jī)不支持在線簽署</canvas> const canvasPaint = {};//定義一個(gè)全局對象,把canvas的各種狀態(tài)存進(jìn)去 canvasPaint.canvas = document.getElementById("canvas"); canvasPaint.ctx = document.getElementById("canvas").getContext("2d"); canvasPaint.ctx.lineCap = 'round';//讓結(jié)束線帽呈現(xiàn)圓滑狀 canvasPaint.ctx.lineJoin = 'round';//交匯時(shí)呈現(xiàn)圓滑狀 canvasPaint.ctx.strokeWidth = 5;//描邊寬度 canvasPaint.ctx.lineWidth = 5;//線條寬度
初始化好畫布后,我們需要監(jiān)聽畫布上的滑動(dòng)事件
canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false}); function startEventHandler(event) { event.preventDefault(); canvasPaint.ctx.beginPath();//每次都是一個(gè)新路徑,不寫會(huì)和上個(gè)字的最后一筆連起來 canvasPaint.canvas.addEventListener('touchmove', moveEventHandler, {passive: false}); canvasPaint.canvas.addEventListener('touchend', endEventHandler, {passive: false}); }
passive: false 和 event.preventDefault()
這兩個(gè)是絕配哦, event.preventDefault()
阻止默認(rèn)行為,防止在畫布上寫字時(shí)觸發(fā)了瀏覽器自帶的下拉動(dòng)作之類的。那 passive: false 是谷歌56版本后提出的新屬性,設(shè)置為 false 就是告訴瀏覽器我有阻止默認(rèn)行為的代碼,剛開始不要給我滑動(dòng),你需要執(zhí)行我的 event.preventDefault()
這句代碼,如果設(shè)置為了 true ,瀏覽器會(huì)自動(dòng)忽略這句代碼,從而不能阻止成功,默認(rèn)是 true ,所以這里就是坑之一了。
我們繼續(xù)編寫移動(dòng)劃線邏輯
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) {//后續(xù)為拖動(dòng)畫布功能設(shè)置的狀態(tài) canvasPaint.ctx.lineTo(//使用lineTo將移動(dòng)過的坐標(biāo)繪制成線 canvasPaint.mouseX, canvasPaint.mouseY ); canvasPaint.ctx.stroke();//繪制 } } function endEventHandler(event) { event.preventDefault(); //抬起手指時(shí)取消move和end事件的監(jiān)聽 canvasPaint.canvas.removeEventListener('touchmove', moveEventHandler, false); canvasPaint.canvas.removeEventListener('touchend', endEventHandler, false); }
canvas--清除屏幕功能
這個(gè)功能比較簡單就一句話
function clearCanvas() { canvasPaint.ctx.clearRect(0, 0, canvasPaint.canvas.width, canvasPaint.canvas.height); }
提交簽名功能
首先需要將畫布上的文字轉(zhuǎn)換為img對象,然后使用drawImage
繪制到協(xié)議上去
preLoadImg(['/assets/index/images/agree.jpg', canvasPaint.canvas.toDataURL()], result); //agree.jpg為協(xié)議名,canvasPaint.canvas.toDataURL()就是簽好的字轉(zhuǎn)換為base64的結(jié)果 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是異步的,我們必須要一個(gè)完整的image對象,所以我們使用promise包裝,使得我們所有圖片都轉(zhuǎn)換完之后再將結(jié)果傳入回調(diào)函數(shù)(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; //計(jì)算畫布比例 canvasPaint.context2.drawImage(imgArr[0], 0, 0, 500, 707);//img0是底圖原協(xié)議 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);//畫反轉(zhuǎn)后的名字 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);//畫反轉(zhuǎn)后的名字 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方法,就可以把文字旋轉(zhuǎn)任意角度和放到任意位置了
長字手寫--畫布拖動(dòng)
上面簽字完成后,我們其實(shí)已經(jīng)用了另一個(gè)canvas合成了文字和原協(xié)議,現(xiàn)在我們要做無限拖動(dòng)功能,其實(shí)也很簡單。
在此之前我們需要清空之前的畫布
function prevDrawStatement() { clearCanvas();//清除畫布 canvasPaint.finish.innerHTML = "提交抄寫"; canvasPaint.pencilBtn.style.display = 'block'; canvasPaint.secondState.style.display = 'block'; canvasPaint.tips.innerHTML = "(最后一步)請抄寫屏幕上方引號(hào)內(nèi)的確認(rèn)語句"; canvasPaint.tips.style.color = 'red'; setTimeout(function () { canvasPaint.tips.style.color = '#666'; }, 2000); state = STATEMENT;//開始寫句子 }
右上角有個(gè)移動(dòng)簽字板功能,這里實(shí)現(xiàn)的是左右移動(dòng),相關(guān)代碼如下
function togglePencil() { if (canvasPaint.canPaint) { canvasPaint.canPaint = false; canvasPaint.pencilBtn.innerText = "使用簽字筆"; //不能簽字時(shí)應(yīng)該把開始寫字事件去掉,同時(shí)加上document事件 canvasPaint.canvas.removeEventListener('touchstart', startEventHandler, false); document.addEventListener('touchstart', documentStartEventHandler, {passive: false}); } else { canvasPaint.canPaint = true; canvasPaint.pencilBtn.innerText = "移動(dòng)簽字板"; //能簽字時(shí)應(yīng)該把開始寫字事件綁定上去,同時(shí)去掉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(); }
合成長句到協(xié)議中并顯示最終圖片
提交抄寫按鈕點(diǎn)擊后執(zhí)行下面的函數(shù)
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);//畫反轉(zhuǎn)后的名字 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; }
在一個(gè)風(fēng)和日麗的下午,剛準(zhǔn)備下班,突然接到需求說要做一個(gè)在線簽協(xié)議功能,當(dāng)時(shí)心里想著不就百度一頓拷貝就完事了嗎(因?yàn)槲覜]用過canvas,所謂初生牛犢不怕虎 ),誰知做起來如此吃力,下面就來記錄下歷程。
協(xié)議模板
分析
如上圖,需要做的就是做一個(gè)簽字板可以在上面寫字,寫完后點(diǎn)擊完成可以生成如上圖的圖片所示,把簽好的字放到指定的位置。
做這個(gè)第一反應(yīng)肯定就是使用canvas繪制路徑
我的思路是:
一個(gè)字一個(gè)字寫,每寫一個(gè)字點(diǎn)一下記錄,最后拼接,但想到用戶體驗(yàn)問題就pass了這個(gè)思路。
最后的思路:一行可以寫很多個(gè)字,可以讓用戶滑動(dòng)canvas,一直寫下去(因?yàn)閰f(xié)議模板最后還要抄寫一段話)
canvas繪制路徑--實(shí)現(xiàn)簽名功能
<canvas id="canvas" style="top:0">您的手機(jī)不支持在線簽署</canvas> const canvasPaint = {};//定義一個(gè)全局對象,把canvas的各種狀態(tài)存進(jìn)去 canvasPaint.canvas = document.getElementById("canvas"); canvasPaint.ctx = document.getElementById("canvas").getContext("2d"); canvasPaint.ctx.lineCap = 'round';//讓結(jié)束線帽呈現(xiàn)圓滑狀 canvasPaint.ctx.lineJoin = 'round';//交匯時(shí)呈現(xiàn)圓滑狀 canvasPaint.ctx.strokeWidth = 5;//描邊寬度 canvasPaint.ctx.lineWidth = 5;//線條寬度
初始化好畫布后,我們需要監(jiān)聽畫布上的滑動(dòng)事件
canvasPaint.canvas.addEventListener('touchstart', startEventHandler, {passive: false}); function startEventHandler(event) { event.preventDefault(); canvasPaint.ctx.beginPath();//每次都是一個(gè)新路徑,不寫會(huì)和上個(gè)字的最后一筆連起來 canvasPaint.canvas.addEventListener('touchmove', moveEventHandler, {passive: false}); canvasPaint.canvas.addEventListener('touchend', endEventHandler, {passive: false}); }
passive: false 和 event.preventDefault()
這兩個(gè)是絕配哦, event.preventDefault()
阻止默認(rèn)行為,防止在畫布上寫字時(shí)觸發(fā)了瀏覽器自帶的下拉動(dòng)作之類的。那 passive: false 是谷歌56版本后提出的新屬性,設(shè)置為 false 就是告訴瀏覽器我有阻止默認(rèn)行為的代碼,剛開始不要給我滑動(dòng),你需要執(zhí)行我的 event.preventDefault() 這句代碼,如果設(shè)置為了 true ,瀏覽器會(huì)自動(dòng)忽略這句代碼,從而不能阻止成功,默認(rèn)是 true ,所以這里就是坑之一了。
我們繼續(xù)編寫移動(dòng)劃線邏輯
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) {//后續(xù)為拖動(dòng)畫布功能設(shè)置的狀態(tài) canvasPaint.ctx.lineTo(//使用lineTo將移動(dòng)過的坐標(biāo)繪制成線 canvasPaint.mouseX, canvasPaint.mouseY ); canvasPaint.ctx.stroke();//繪制 } } function endEventHandler(event) { event.preventDefault(); //抬起手指時(shí)取消move和end事件的監(jiān)聽 canvasPaint.canvas.removeEventListener('touchmove', moveEventHandler, false); canvasPaint.canvas.removeEventListener('touchend', endEventHandler, false); }
canvas--清除屏幕功能
這個(gè)功能比較簡單就一句話
function clearCanvas() { canvasPaint.ctx.clearRect(0, 0, canvasPaint.canvas.width, canvasPaint.canvas.height); }
提交簽名功能
首先需要將畫布上的文字轉(zhuǎn)換為img對象,然后使用drawImage繪制到協(xié)議上去
preLoadImg(['/assets/index/images/agree.jpg', canvasPaint.canvas.toDataURL()], result); //agree.jpg為協(xié)議名,canvasPaint.canvas.toDataURL()就是簽好的字轉(zhuǎn)換為base64的結(jié)果 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是異步的,我們必須要一個(gè)完整的image對象,所以我們使用promise包裝,使得我們所有圖片都轉(zhuǎn)換完之后再將結(jié)果傳入回調(diào)函數(shù)(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; //計(jì)算畫布比例 canvasPaint.context2.drawImage(imgArr[0], 0, 0, 500, 707);//img0是底圖原協(xié)議 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);//畫反轉(zhuǎn)后的名字 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);//畫反轉(zhuǎn)后的名字 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方法,就可以把文字旋轉(zhuǎn)任意角度和放到任意位置了
長字手寫--畫布拖動(dòng)
上面簽字完成后,我們其實(shí)已經(jīng)用了另一個(gè)canvas合成了文字和原協(xié)議,現(xiàn)在我們要做無限拖動(dòng)功能,其實(shí)也很簡單。
在此之前我們需要清空之前的畫布
function prevDrawStatement() { clearCanvas();//清除畫布 canvasPaint.finish.innerHTML = "提交抄寫"; canvasPaint.pencilBtn.style.display = 'block'; canvasPaint.secondState.style.display = 'block'; canvasPaint.tips.innerHTML = "(最后一步)請抄寫屏幕上方引號(hào)內(nèi)的確認(rèn)語句"; canvasPaint.tips.style.color = 'red'; setTimeout(function () { canvasPaint.tips.style.color = '#666'; }, 2000); state = STATEMENT;//開始寫句子 }
右上角有個(gè)移動(dòng)簽字板功能,這里實(shí)現(xiàn)的是左右移動(dòng),相關(guān)代碼如下
function togglePencil() { if (canvasPaint.canPaint) { canvasPaint.canPaint = false; canvasPaint.pencilBtn.innerText = "使用簽字筆"; //不能簽字時(shí)應(yīng)該把開始寫字事件去掉,同時(shí)加上document事件 canvasPaint.canvas.removeEventListener('touchstart', startEventHandler, false); document.addEventListener('touchstart', documentStartEventHandler, {passive: false}); } else { canvasPaint.canPaint = true; canvasPaint.pencilBtn.innerText = "移動(dòng)簽字板"; //能簽字時(shí)應(yīng)該把開始寫字事件綁定上去,同時(shí)去掉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(); }
合成長句到協(xié)議中并顯示最終圖片
提交抄寫按鈕點(diǎn)擊后執(zhí)行下面的函數(shù)
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);//畫反轉(zhuǎn)后的名字 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; }
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)移動(dòng)端在線簽協(xié)議功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
在JavaScript 中按字母排序之如何在 JS 中按名稱排序
有時(shí)你可能有一個(gè)單詞數(shù)組,你想按字母順序(從 a-z)對每個(gè)單詞進(jìn)行排序,或者你可能有一個(gè)包含用戶信息(包括名字)的對象數(shù)組,例如,你想按照用戶的名字來排序,接下來通過本文給大家介紹在JavaScript 中按字母排序之如何在 JS 中按名稱排序,需要的朋友可以參考下2023-09-09分享12個(gè)非常實(shí)用的JavaScript小技巧
這篇文章主要介紹了分享12個(gè)非常實(shí)用的JavaScript小技巧,這些小技巧可能在你的實(shí)際工作中或許能幫助你解決一些問題,需要的朋友可以參考下2016-05-05javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子
javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子,需要的朋友可以參考一下2013-03-03通過Javascript讀取本地Excel文件內(nèi)容的代碼示例
這篇文章主要介紹了通過Javascript讀取本地Excel文件內(nèi)容的代碼示例,但需要一定的條件才可以使用js操作本地文件,需要的朋友參考下吧2014-04-04JavaScript基本類型值-Undefined、Null、Boolean
本文主要介紹了JavaScript基本類型值-Undefined、Null、Boolean的相關(guān)知識(shí),具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02JavaScript常用的3種彈出框(提示框?alert/確認(rèn)框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的,也就是說,三種彈框中的任一彈框彈出,代碼都不在執(zhí)行,直到點(diǎn)擊確認(rèn)或取消,關(guān)閉彈窗后,代碼繼續(xù)執(zhí)行,本文通過實(shí)例代碼給大家分享JS常用的3種彈出框,感興趣的朋友一起看看吧2022-07-07判斷javascript的數(shù)據(jù)類型(示例代碼)
這篇文章主要是對判斷javascript的數(shù)據(jù)類型(示例代碼)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12