簽字板很難嗎？純 JS 實現(xiàn)一個！
作者：程序員Sunday
我說：“這種功能很簡單呀，目前市面上有很多開源的庫，比如：signature_pad 就可以直接引入實現(xiàn)”。但是，該同學(xué)說自己公司的項目比較特殊，盡量不要使用 第三方的庫，所以想要自己實現(xiàn)，那怎么辦呢？
Hello，大家好，我是 Sunday。
前段時間有位同學(xué)問我：“公司項目中需要增加一個簽字板的功能”，問我如何進(jìn)行實現(xiàn)。
我說：“這種功能很簡單呀，目前市面上有很多開源的庫，比如：signature_pad 就可以直接引入實現(xiàn)”。
但是，該同學(xué)說自己公司的項目比較特殊，盡量不要使用 第三方的庫，所以想要自己實現(xiàn)，那怎么辦呢？
沒辦法！只能幫他實現(xiàn)一個了.
簽字板實現(xiàn)邏輯
簽字板的功能實現(xiàn)其實并不復(fù)雜，核心是 基于 canvas 的 2d 繪制能力，監(jiān)聽用戶 鼠標(biāo) 或者 手指 的移動行為，完成對應(yīng)的 線繪制。
所以，想要實現(xiàn)簽字板那么必須要有一個 canvas，先看 html 的實現(xiàn)部分：
html
<body>
<!-- 畫板 -->
<canvas id="signature-pad" width="400" height="200"></canvas>
<!-- 控制器 -->
<div class="controls">
<select id="stroke-style">
<option value="pen">鋼筆</option>
<option value="brush">毛筆</option>
</select>
<button id="clear">清空</button>
</div>
<script src="script.js"></script>
</body>我們可以基于以上代碼完成 HTML 布局，核心是兩個內(nèi)容：
- canvas 畫布：它是完成簽字板的關(guān)鍵
- controls 控制器：通過它可以完成 畫筆切換 以及 清空畫布 的功能
css
css 相對比較簡單，大家可以根據(jù)自己的需求進(jìn)行調(diào)整就可以了，以下是 css 大家可以作為參考：
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
width: 100vw;
background-color: #f0f0f0;
overflow: hidden;
}
canvas {
border: 1px solid #000;
background-color: #fff;
}
.controls {
margin-top: 10px;
display: flex;
gap: 10px;
}
button,
select {
padding: 5px 10px;
cursor: pointer;
}js
js 部分是整個簽字板的核心，我們需要在這里考慮較多的內(nèi)容，比如：
- 為了繪制更加平滑，我們需要使用 ctx.quadraticCurveTo 方法完成平滑過渡
- 為了解決移動端手指滑動滾動條的問題，我們需要在 move 事件中通過 e.preventDefault() 取消默認(rèn)行為
- 為了完成畫筆切換，我們需要監(jiān)聽 select 的 change 事件，從而修改 ctx.lineWidth 畫筆
最終得到的 js 代碼如下所示（代碼中提供的詳細(xì)的注釋）：
document.addEventListener('DOMContentLoaded', function () {
// 獲取 canvas 元素和其 2D 上下文
var canvas = document.getElementById('signature-pad')
var ctx = canvas.getContext('2d')
var drawing = false // 標(biāo)志是否正在繪制
var lastX = 0,
lastY = 0 // 保存上一個點的坐標(biāo)
var strokeStyle = 'pen' // 初始筆畫樣式
// 開始繪制的函數(shù)
function startDrawing(e) {
e.preventDefault() // 阻止默認(rèn)行為，避免頁面滾動
drawing = true // 設(shè)置為正在繪制
ctx.beginPath() // 開始新路徑
// 記錄初始點的位置
const { offsetX, offsetY } = getEventPosition(e)
lastX = offsetX
lastY = offsetY
ctx.moveTo(offsetX, offsetY) // 移動畫筆到初始位置
}
// 繪制過程中的函數(shù)
function draw(e) {
e.preventDefault() // 阻止默認(rèn)行為，避免頁面滾動
if (!drawing) return // 如果不是在繪制，直接返回
// 獲取當(dāng)前觸點位置
const { offsetX, offsetY } = getEventPosition(e)
// 使用貝塞爾曲線進(jìn)行平滑過渡繪制
ctx.quadraticCurveTo(
lastX,
lastY,
(lastX + offsetX) / 2,
(lastY + offsetY) / 2
)
ctx.stroke() // 實際繪制路徑
// 更新上一個點的位置
lastX = offsetX
lastY = offsetY
}
// 停止繪制的函數(shù)
function stopDrawing(e) {
e.preventDefault() // 阻止默認(rèn)行為
drawing = false // 結(jié)束繪制狀態(tài)
}
// 獲取事件中觸點的相對位置
function getEventPosition(e) {
// 鼠標(biāo)事件或者觸摸事件中的坐標(biāo)
const offsetX = e.offsetX || e.touches[0].clientX - canvas.offsetLeft
const offsetY = e.offsetY || e.touches[0].clientY - canvas.offsetTop
return { offsetX, offsetY }
}
// 鼠標(biāo)事件綁定
canvas.addEventListener('mousedown', startDrawing) // 鼠標(biāo)按下開始繪制
canvas.addEventListener('mousemove', draw) // 鼠標(biāo)移動時繪制
canvas.addEventListener('mouseup', stopDrawing) // 鼠標(biāo)抬起停止繪制
canvas.addEventListener('mouseout', stopDrawing) // 鼠標(biāo)移出畫布停止繪制
// 觸摸事件綁定
canvas.addEventListener('touchstart', startDrawing) // 觸摸開始繪制
canvas.addEventListener('touchmove', draw) // 觸摸移動時繪制
canvas.addEventListener('touchend', stopDrawing) // 觸摸結(jié)束時停止繪制
canvas.addEventListener('touchcancel', stopDrawing) // 觸摸取消時停止繪制
// 清除畫布的功能
document.getElementById('clear').addEventListener('click', function () {
ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空整個畫布
})
// 修改筆畫樣式的功能
document
.getElementById('stroke-style')
.addEventListener('change', function (e) {
strokeStyle = e.target.value // 獲取選中的筆畫樣式
updateStrokeStyle() // 更新樣式
})
// 根據(jù) strokeStyle 更新筆畫樣式
function updateStrokeStyle() {
if (strokeStyle === 'pen') {
ctx.lineWidth = 2 // 細(xì)線條
ctx.lineCap = 'round' // 線條末端圓角
} else if (strokeStyle === 'brush') {
ctx.lineWidth = 5 // 粗線條
ctx.lineCap = 'round' // 線條末端圓角
}
}
// 初始化默認(rèn)的筆畫樣式
updateStrokeStyle()
})以上就是 純JS實現(xiàn)簽字板的完整代碼，大家可以直接組合代碼進(jìn)行使用，最終展示的結(jié)果如下：
圖片
責(zé)任編輯：武曉燕
來源：
程序員Sunday
