原生JS實現移動端線上籤協議

_Dreams發表於2019-08-15
JS協議

前言

在一個風和日麗的下午，剛準備下班，突然接到需求說要做一個線上籤協議功能，當時心裡想著這麼簡單，不就canvas嗎，所謂初生牛犢不怕虎?)，下面就來記錄下歷程。

協議模板

原生JS實現移動端線上籤協議

分析

如上圖，需要做的就是做一個簽字板可以在上面寫字，寫完後點選完成可以生成如上圖的圖片所示，把簽好的字放到指定的位置。

做這個第一反應肯定就是使用canvas繪製路徑

我的思路是:

一個字一個字寫，每寫一個字點一下記錄，最後拼接，但想到使用者體驗問題就pass了這個思路。

最後的思路：一行可以寫很多個字，可以讓使用者滑動canvas，一直寫下去(因為協議模板最後還要抄寫一段話)

canvas繪製路徑--實現簽名功能

原生JS實現移動端線上籤協議

<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方法，就可以把文字旋轉任意角度和放到任意位置了

長字手寫--畫布拖動

原生JS實現移動端線上籤協議
上面簽字完成後，我們其實已經用了另一個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;
}
複製程式碼

結語

最終就成了想要的結果，還有很多細節需要修復，程式碼很多地方也可以實現複用，有興趣的小夥伴可以交流交流哦

文章中的程式碼為主要程式碼，其餘基本的就沒放了，希望對有些小夥伴有幫助。

原始碼Demo

為了方便大家學習 最後補上github地址

github.com/luomana/can…

相關文章