JS案例：支持PC端和Mobile端的Canvas电子签名功能_printmobile(1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

**完成之后，我们先实现Pc版的电子签名功能，新建一个PcPrint继承自Base，参照之前写的[鼠标拖拽案例](https://bbs.csdn.net/topics/618668825)，实现在canvas上拖拽功能，并将事件结果的坐标发布出去。  
 其中clearDefaultEvent函数和getClient函数在Base类中实现**

// PC端，鼠标事件
import Base from ‘./base.js’
let that = null
export default class PcPrint extends Base {
constructor(ele, dom) {
super(ele, dom)
that = this //注册全局this
this.init()
return this;
}
init() {
that.canvasEle.addEventListener(‘mousedown’, that.onMouseDown)
}
onMouseDown(e = event) {
that.clearDefaultEvent(e)
that.dom.addEventListener(‘mouseup’, that.onMouseUp) //给dom添加mouseup避免产生鼠标点下时，移出画布造成其他的问题
that.canvasEle.addEventListener(‘mousemove’, that.onMouseMove)
that.event.emitEvent(‘pointStart’, that.getClient(e)) //触发开始签字事件
}
onMouseUp(e = event) {
that.clearDefaultEvent(e)
that.event.emitEvent(‘pointEnd’) //触发结束签字事件
that.canvasEle.removeEventListener(‘mousemove’, that.onMouseMove) //移除移动事件
}
onMouseMove(e = event) {
that.clearDefaultEvent(e)
that.event.emitEvent(‘pointMove’, that.getClient(e)) //触发签字事件
}

}

**Base类添加以下代码：**

/**
 * 取消默认事件和事件冒泡
 * @param e 事件对象
 */
clearDefaultEvent(e) {
    e.preventDefault()
    e.stopPropagation()
}
/**
 * 获取事件元素离body可视区域的坐标
 * @param target 事件目标
 */
getClient(target) {
    return {
        x: target.clientX,
        y: target.clientY
    }
}

**接着，我们对事件抛出的三个发布进行订阅，新建Print类，对获取的坐标通过canvas进行绘制**

import Base from “./Base.js”
import PcPrint from ‘./pc.js’;
// import MobilePrint from ‘./mobile.js’;
let that = null
export default class Print extends Base {
constructor(canvasEle, options, dom) {
super(canvasEle, dom)
that = this
this.options = options //配置画笔颜色，粗细，是否开启移动端或PC端，
this.init() //初始化属性,配置,注册发布订阅等
this.initCanvas() //初始化画布
return this
}
init() {
//Pc和Mobile启用开关
this.Pc = this.options.Pc ? (new PcPrint(this.canvasEle)) : null
// this.Mobile = this.options.Mobile ? (new MobilePrint(this.canvasEle)) : null
this.point = null //存储上一次坐标
this.event.onEvent(‘pointMove’, that.pointMove) //订阅签字事件
this.event.onEvent(‘pointStart’, that.pointStart) //订阅签字开始事件
this.event.onEvent(‘pointEnd’, that.pointEnd) //订阅签字结束事件
}
initCanvas() {
this.clientRect = this.canvasEle.getBoundingClientRect() // 获取标签相对可视区域的偏移量
this.canvasEle.width = this.canvasEle.parentNode.offsetWidth //设置为父元素的宽
this.canvasEle.height = this.canvasEle.parentNode.offsetHeight //设置为父元素的高
this.context = this.canvasEle.getContext(‘2d’)
this.context.strokeStyle = this.options.color; // 线条颜色
this.context.lineWidth = this.options.weight; // 线条宽度
}
pointStart(point) {
that.point = that.shiftingPosition(point, that.clientRect) //初始化起始位置
}
pointEnd() {
that.point = null //清空起始位置
}
pointMove(point) {
that.canvasDraw(that.shiftingPosition(point, that.clientRect)) //签字效果
}
canvasDraw(point) { //画布操作
this.context.beginPath() //新建(重置)路径
this.context.moveTo(this.point.x, this.point.y) //画布绘画起始点移动到前一个坐标
this.context.lineTo(point.x, point.y) //画布从前一个坐标到当前坐标
this.context.stroke() //从moveTo到lineTo进行绘制
this.context.closePath() //创建从当前坐标回到前一个坐标的路径
that.point = point //将此次坐标赋值给下一次移动时的前一个坐标
}
}

**考虑到canvas的偏移问题，在Base中添加shiftingPosition函数，解决画布绘制时坐标偏移问题**

/**
* 抵消画布偏移
* @param point 当前坐标
* @param shift 偏移量
*/
shiftingPosition(point, shift) {
return {
x: point.x - shift.left,
y: point.y - shift.top
}
}

**最后，在index中实例化电子签名**