在移动端用canvas技术实现一个画板的工程实例

我不是女神ヾ 2023-07-13 12:12 7阅读 0赞

###### *最新更新时间：2020年03月11日22:07:14* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：在研发C端教育类产品的时候，会遇到在作答题目的时候需要验算或者做草稿，因此诞生了一个草稿本或者小黑板的功能模块，本文统称为画板。本文基于canvas技术，深入讨论实现一个画板功能的原理和核心代码。

#### 成品示例图 ####

> 画板的功能包括两部分：控制面板区和绘画区，控制面板区如下图上半部分，集成了关闭画板弹层、清空绘画区、撤销和重做功能；绘画区实现单手指的书写功能。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]

#### 绘画区的原理介绍 ####

> 绘画区由上下两个canvas元素组成，称作`canvas_top_dom`和`canvas_bottom_dom`，两个元素都是绝对定位，`z-index`属性分别为1和0
> 
>  *  `canvas_top_dom`用来监听用户的三个交互行为：onTouchStart、onTouchMove、onTouchEnd，接收用户的单次绘制动作(手指按下屏幕、手指在屏幕上移动、手指离开屏幕)，在单次绘制动作完成时将绘制的线条路径转化为base64格式的图片
>  *  `canvas_bottom_dom`用来展示用户所有历史单次绘制路径的总数据，当`canvas_top_dom`元素单次绘制动作完成时，将这次线条路径的base64格式的图片叠加绘制在`canvas_bottom_dom`上
>  *  用户在屏幕上移动手指绘制的过程中，此时看到绘画区的图案是由`canvas_top_dom`和`canvas_bottom_dom`组成，当用户手指离开屏幕，此时看到绘画区的图案仅仅是`canvas_bottom_dom`渲染出的数据

#### 控制面板区的原理介绍 ####

> 控制面板区集成的功能，从左到右依次是关闭画板弹层、清空绘画区、撤销和重做的功能
> 
>  *  关闭画板弹层，隐藏或销毁整个画板组件DOM元素
>  *  清空绘画区，清空`canvas_top_dom`和`canvas_bottom_dom`上的数据即可
>  *  撤销功能，第一步，需要对用户的每一次单次绘制动作(手指按下屏幕、手指在屏幕上移动、手指离开屏幕)进行记录和保存，当`canvas_top_dom`元素单次绘制动作完成时，将这次线条路径的base64格式的图片叠加绘制在`canvas_bottom_dom`上，然后将`canvas_bottom_dom`上的所有数据转化为一个大的base64字符串，最后将这个大的base64字符串存储在`canvas_bottom_dom`历史状态数组`canvas_bottom_base64_arr`的末尾；第二步，声明一个撤销记录的指针变量`undoIndex`，这个变量用来存储用户的撤销次数，当用户撤销一次，`undoIndex++`，此时更新`canvas_bottom_dom`渲染的数据为`canvas_bottom_base64_arr`中的倒数第二条数据，以此类推
>  *  重做功能，当用户撤销一次，此时更新`canvas_bottom_dom`渲染的数据为`canvas_bottom_base64_arr`中的倒数第二条数据，当用户重做一次，`undoIndex--`，此时更新`canvas_bottom_dom`渲染的数据为`canvas_bottom_base64_arr`中的最后一条数据即可

#### 用到的canvas相关API ####

*  [getContext(“2d”)][getContext_2d]

> HTMLCanvasElement.getContext() 方法返回canvas 的上下文，如果上下文没有定义则返回 null .

*  [drawImage()][drawImage]

> Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。

*  [clearRect()][clearRect]

> The CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

*  [toDataURL()][toDataURL]

> HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

*  [beginPath()][beginPath]

> CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。

*  [moveTo()][moveTo]

> CanvasRenderingContext2D.moveTo() 是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。

*  [lineTo()][lineTo]

> CanvasRenderingContext2D.lineTo() 是 Canvas 2D API 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。

*  [stroke()][stroke]

> CanvasRenderingContext2D.stroke() 是 Canvas 2D API 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。

#### 核心代码 ####

> 本文的画板组件采用`react`框架开发

*  DOM布局

<div className={styles.canvasBox}>
    	{/*操控区*/}
    	<div className={styles.controler}>
    		{/*关闭按钮*/}
    		<img
    			src={require('../../assets/blackboard/close.png')}
    			onClick={()=>{this.closeDrawingBoard()}}
    		/>
    		{/*清空按钮*/}
    		<img
    			src={require('../../assets/blackboard/delete.png')}
    			onClick={()=>{this.clear()}}
    		/>
    		{/*撤销高亮 撤销置灰*/}
    		{this.state.displayUndo ?
    			<img
    				className={styles.preHighlight}
    				src={require('../../assets/blackboard/pre.png')}
    				onClick={()=>{this.undo()}}
    			/> :
    			<img
    				className={styles.preGrey}
    				src={require('../../assets/blackboard/next.png')}
    			/>
    		}
    		{/*重做高亮 重做置灰*/}
    		{this.state.displayRedo ?
    			<img
    				className={styles.nextHighlight}
    				src={require('../../assets/blackboard/pre.png')}
    				onClick={()=>{this.redo()}}
    			/> :
    			<img
    				className={styles.nextGrey}
    				src={require('../../assets/blackboard/next.png')}
    			/>
    		}
    	</div>
    	{/*画板区*/}
    	<div className={styles.board}>
    		<canvas
    			id="canvas_top_dom"
    			width={375}
    			height={this.canvasHeight}
    			className={styles.top}
    			onTouchStart={(e)=>{this.brushDown(e)}}
    			onTouchMove={(e)=>{this.brushmove(e)}}
    			onTouchEnd={(e)=>{this.brushUp(e)}}
    		>浏览器不支持canvas</canvas>
    		<canvas id="canvas_bottom_dom" width={375} height={this.canvasHeight} className={styles.bottom} >浏览器不支持canvas</canvas>
    	</div>
    </div>

*  CSS样式

.canvasBox{ 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(1,1,1,0);
      z-index: 2; .controler{ 
        height: 48px;
        background: #FFFFFF;
        display: flex;
        align-items: center;justify-content: space-around; img{ 
          width: 24px;
          height: 24px;
        }
        .preGrey, .nextHighlight{ 
          transform: rotateY(180deg);//图片水平镜像翻转
        }
      }
      .board{ 
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(141,141,141,0.6); canvas{ 
          position: absolute;
          top: 0;
          left: 0;
        }
        .bottom{ 
          z-index: 2;
        }
        .top{ 
          z-index: 3;
        }
      }
    }

*  JavaScript

> 说明：全局多处使用数字48，48为画板顶部操控区高度

// react组件构造函数
    constructor(props) { 
        super(props);
        //UI数据
        this.state = { 
          displayUndo: false,//撤销按钮状态
          displayRedo: false,//重做按钮状态
        };
        //非UI数据
        this.canvas_top_dom = null;//上层canvas DOM元素
        this.ctx_top = null//上层canvas 2D 渲染上下文
        this.canvas_bottom_dom = null;//下层canvas DOM元素
        this.ctx_bottom = null;//下层canvas 2D 渲染上下文
        this.startAxisX = 0;//画笔X轴起始坐标
        this.startAxisY = 0;//画笔Y轴起始坐标
        this.hasInitHeight = false;//初始化canvas DOM元素高度 状态
        this.canvasWidth = 375;//canvas DOM元素高度 默认宽度
        this.canvasHeight = 1000;//canvas DOM元素高度 默认高度
        this.canvas_bottom_base64_arr = [];//下层canvas每个状态的数据 每个状态为一个base64
        this.undoIndex = 0;//撤销次数
        this.hasMove = false;//手指是否移动，如果没有移动，拦截brushUp函数。主要用来区分触摸事件和滑动事件
    }
    
    /** * 初始化canvas * @param * @return */
    initCanvas(){ 
    	this.canvas_top_dom = document.getElementById('canvas_top_dom');
    	this.canvas_bottom_dom = document.getElementById('canvas_bottom_dom');
    	this.ctx_top = this.canvas_top_dom.getContext("2d");
    	this.ctx_bottom = this.canvas_bottom_dom.getContext("2d");
    	//根据屏幕高度设置canvas可用高度
        if(!this.hasInitHeight){ 
    		this.hasInitHeight = true;
    		this.canvas_top_dom.height = window.innerHeight - 48;
    		this.canvas_bottom_dom.height = window.innerHeight - 48;
    		this.canvasHeight = window.innerHeight - 48;
        }
    }
    
    /** * 手指刚按下画板 初始化画笔坐标 * @param * @return */
    brushDown(e){ 
    	this.startAxisX = e.touches[0].pageX;
    	this.startAxisY = e.touches[0].pageY - 48;
    }
    
    /** * 手指从画板抬起 * @param * @return */
    brushUp(){ 
    	let _this = this;
    	if(!this.hasMove)
    		return
    	this. hasMove = false;
    	//以图片形式在下层canvas绘制数据
    	let image = new Image();
    	//将上层canvas内容转化为base64格式的图片数据
    	image.src = this.canvas_top_dom.toDataURL();//如果有问题 image.src 需要再 image.onload 下面
    	image.onload = function(){ 
    		//如果用户画了一笔 重做按钮高亮并且撤销次数大于0，丢弃撤销记录
    		if(_this.state.displayRedo && _this.undoIndex > 0){ 
    			_this.canvas_bottom_base64_arr = _this.canvas_bottom_base64_arr.slice(0, _this.canvas_bottom_base64_arr.length - _this.undoIndex);
    			_this.undoIndex = 0;
    		}
    		//如果用户画了一笔 撤销按钮高亮 重做按钮置灰
    		_this.setState({ 
    			displayUndo: true,
    			displayRedo: false
    		})
    		//下层canvas渲染数据
    		_this.ctx_bottom.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , _this.canvasWidth , _this.canvasHeight);
    		//上层canvas清空数据
    		_this.ctx_top.clearRect(0,0,_this.canvasWidth,_this.canvasHeight);
    		//下层canvas历史数据数组 新增数据
    		_this.canvas_bottom_base64_arr.push(_this.canvas_bottom_dom.toDataURL());
    	}
    }
    
    /** * 手指在画板上移动 * @param * @return */
    brushmove(e){ 
    	this. hasMove = true;
    	//画笔移动时X轴 实时坐标
    	let stopAxisX = e.changedTouches[0].pageX;
    	//画笔移动时Y轴 实时坐标
    	let stopAxisY = e.changedTouches[0].pageY - 48;
    	this.ctx_top.beginPath();
    	this.ctx_top.moveTo(this.startAxisX,this.startAxisY);
    	this.ctx_top.lineTo(stopAxisX,stopAxisY);
    	this.ctx_top.strokeStyle = '#000000';
    	this.ctx_top.lineWidth = 1;
    	this.ctx_top.lineCap = "round";
    	this.ctx_top.stroke();
    	this.startAxisX = stopAxisX;
    	this.startAxisY = stopAxisY;
    }
    
    /** * 撤销 * @param * @return */
    undo(){ 
    	if(!this.state.displayUndo){ 
    		return
    	}
    	let _this = this;
    	this.undoIndex++;
    	//下层canvas清空数据
    	this.ctx_bottom.clearRect(0,0,this.canvasWidth,this.canvasHeight);
    	//需要渲染的数据索引
    	let renderIndex = this.canvas_bottom_base64_arr.length -1 - this.undoIndex;
    	//撤销之前只有一条数据
    	if(renderIndex <= -1){ 
    		//撤销按钮置灰 重做按钮高亮
    		this.setState({ 
    			displayUndo: false,
    			displayRedo: true
    		})
    		return
    	}
    	//以图片形式在下层canvas绘制数据
    	let image = new Image();
    	image.src = this.canvas_bottom_base64_arr[renderIndex];
    	image.onload = function(){ 
    		_this.ctx_bottom.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , _this.canvasWidth , _this.canvasHeight);
    	}
    	//重做按钮高亮
    	this.setState({ 
    		displayRedo: true
    	})
    }
    
    /** * 重做 * @param * @return */
    redo(){ 
    	if(!this.state.displayRedo){ 
    		return
    	}
    	let _this = this;
    	this.undoIndex--;
    	//下层canvas清空数据
    	this.ctx_bottom.clearRect(0,0,this.canvasWidth,this.canvasHeight);
    	//以图片形式在下层canvas绘制数据
    	let image = new Image();
    	//需要渲染的数据索引
    	let renderIndex = this.canvas_bottom_base64_arr.length -1 - this.undoIndex;
    	image.src = this.canvas_bottom_base64_arr[renderIndex];
    	//重做次数用完
    	if(renderIndex >= this.canvas_bottom_base64_arr.length -1){ 
    		//重做按钮置灰
    		this.setState({ 
    			displayRedo: false
    		})
    	}
    	//撤销按钮按钮置灰
    	if(renderIndex >= 0){ 
    		this.setState({ 
    			displayUndo: true
    		})
    	}
    	image.onload = function(){ 
    		_this.ctx_bottom.drawImage(image , 0 ,0 , image.width , image.height , 0 ,0 , _this.canvasWidth , _this.canvasHeight);
    	}
    }
    
    /** * 清空画板 * @param * @return */
    clear(){ 
    	//画板历史数据为空 不做清空记录
    	if(this.canvas_bottom_base64_arr.length == 0)
    		return
    	this.setState({ 
    		displayUndo: false,
    		displayRedo: false
    	})
    	this.startAxisX = 0;//画笔X轴起始坐标
    	this.startAxisY = 0;//画笔Y轴起始坐标
    	this.canvas_bottom_base64_arr = [];//下层canvas每个状态的数据 每个状态为一个base64
    	this.undoIndex = 0;//撤销次数
    	this.hasMove = false;//手指是否移动，如果没有移动，拦截brushUp函数。主要用来区分触摸事件和滑动事件
    	//上层canvas清空数据
    	this.ctx_top.clearRect(0,0,this.canvasWidth,this.canvasHeight);
    	//下层canvas清空数据
    	this.ctx_bottom.clearRect(0,0,this.canvasWidth,this.canvasHeight);
    }
    
    /** * 关闭画板 * @param * @return */
    closeDrawingBoard(){ 
    	//丢弃撤销记录
    	if(this.state.displayRedo && this.undoIndex > 0){ 
    		this.canvas_bottom_base64_arr = this.canvas_bottom_base64_arr.slice(0, this.canvas_bottom_base64_arr.length - this.undoIndex);
    		this.undoIndex = 0;
    	}
    	//保存当前画板数据 this.canvas_bottom_base64_arr
    	//关闭画板
    }

#### iOS端的兼容性问题 ####

> 在画板上手指上下移动时，iPhone上会出现橡皮筋效果，此时需要做如下特殊处理

/** * 手指刚按下画板 初始化画笔坐标 * @param * @return */
    brushDown(e){ 
    let _this = this;
    //拦截iOS页面滑动的橡皮筋效果
    document.body.addEventListener('touchmove', _this.preventScroll, { passive: false});//passive 参数不能省略，用来兼容ios和android
    }
    
    /** * 手指从画板抬起 * @param * @return */
    brushUp(){ 
    	let _this = this;
    	//关闭iOS页面滑动的橡皮筋效果
    	document.body.removeEventListener('touchmove', _this.preventScroll);
    }
    
    /** * 阻止页面滚动 * @param * @return */
    preventScroll(e){ 
    	e.preventDefault();
    }

#### 参考资料 ####

*  [`<canvas> - HTML（超文本标记语言） | MDN`][canvas_ - HTML_ _ MDN]
 *  [`Canvas - Web API 接口参考 | MDN`][Canvas - Web API _ _ MDN]
 *  [`CanvasRenderingContext2D - Web API 接口参考 | MDN`][CanvasRenderingContext2D - Web API _ _ MDN]
 *  [绘画板 - 轩枫阁][-]
 *  [xuanfeng/draw: HTML5绘画板-轩枫阁][xuanfeng_draw_ HTML5_-]
 *  [博客文章][Link 1]
 *  [博客文章][Link 2]
 *  [博客文章][Link 3]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][- 1] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311215629764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA==,size_16,color_FFFFFF,t_70
[getContext_2d]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext
[drawImage]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
[clearRect]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/clearRect
[toDataURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
[beginPath]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/beginPath
[moveTo]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/moveTo
[lineTo]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineTo
[stroke]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/stroke
[canvas_ - HTML_ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
[Canvas - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
[CanvasRenderingContext2D - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
[-]: http://www.xuanfengge.com/funny/html5/draw/
[xuanfeng_draw_ HTML5_-]: https://github.com/xuanfeng/draw
[Link 1]: https://blog.csdn.net/weixin_34138056/article/details/91425204
[Link 2]: https://www.jianshu.com/p/7477c2416d41
[Link 3]: https://blog.csdn.net/weixin_33890499/article/details/88817414
[- 1]: https://blog.csdn.net/wanshaobo888/article/details/86249460