最近由于工作需要，接触到了多人共享协作画板这个东西。在这个过程中，学习到了不少前端的知识，现在正好抽时间来对这一段时间学习的知识做一个总结。我都计划是分几篇博客，对共享画板这一块我理解的知识做一个总结，主要是学习中的一些思考，以及对一些问题的解决，希望可以帮助到有需要的人。

单机画板

多人共享协作画板也是从单机画板演化出来的，所以我们这里先介绍如何实现一个简单的单机画板。了解一个单机画板的实现，会有助于理解后面将要做的多人协作画板。这里实现的过程主要是使用到了HTML的canvas标签，这个标签很有趣，功能也很强大，非常值得深入学习。

Canvas的几个api

beginPath()      // 开始绘制一个新路径
moveTo(x, y)    // 移动画笔到指定点
lineTo(x, y)    // 从当前点出发，向指定点绘制线条
stroke()        // 将moveTo和lineTo绘制的路径，实际地绘制出，不调用这个方法，路径不会显示。

鼠标事件

onmousedown()   // 鼠标按下事件
onmousemove()   // 鼠标移动事件
onmouseup()     // 鼠标松开事件
onmouseout()    // 鼠标移出事件

实现思路
用户按下鼠标时，获取当前的坐标，开始创建新的路径（或者说一笔），然后将画笔移动到鼠标落下的点，当用户开始移动时，不断获取移动经过的坐标，不断进行绘制。当用户松开鼠标或者移出画布时，停止绘制。
所以，一个路径的绘制过程可以理解为是：一个moveTo方法，外加一些列的lineTof方法。

实现代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}.rg{float: left;width: 400px;height: 100px;text-align: center;border: 1px black solid;margin-left:-1px ;}#cas{width: 800px;height: 600px;border: #000000 1px solid;}p{margin: 5px 0 5px 0;}</style></head><body><div id="seclect"><div class="rg" id="secc"><p>选择画笔颜色</p><input type="color" id="cl"/></div><div class="rg" id="secw"><p>选择画笔大小:&nbsp;<span id="size">1px</span></p><input type="range" onchange="setLineWidth(this)" value="1" min="1" max="10"/></div></div><div id="cas"><canvas id="cs" width="800" height="600"></canvas></div><script type="text/javascript">                var canvas = document.getElementById("cs");//获取画布var context = canvas.getContext("2d");// 设置线宽function setLineWidth(e) {    // this 指向是就是该元素本身console.log("你点击了画笔：", e);console.log(e.value)context.lineWidth = e.value;document.getElementById("size").innerHTML = e.value + " px";}/* 用户绘制的动作，可以分解为如下操作：1.按下鼠标2.移动鼠标3.松开鼠标它们分别对应于鼠标的onmousedown、onmousemove和onmouseup事件。并且上述操作必然是有想后顺序的，因为人的操作必然是几个操作集合中的一种。所以我们需要来限定以下，过滤用户的无效操作，只对按照上诉顺序的操作进行响应。*/let isDowned = false;  // 是否按下鼠标，默认是false，如果为false，则不响应任何事件。// 开始添加鼠标事件canvas.onmousedown = function(e) {let x = e.clientX - canvas.offsetLeft;let y = e.clientY - canvas.offsetTop;isDowned = true;   // 设置isDowned为true，可以响应鼠标移动事件console.log("当前鼠标点击的坐标为：(", x + ", " + y + ")");context.strokeStyle = document.getElementById("cl").value;   // 设置颜色，大小已经设置完毕了context.beginPath();    // 开始一个新的路径context.moveTo(x, y);   // 移动画笔到鼠标的点击位置 }canvas.onmousemove = function(e) {if (!isDowned) {return ;}let x = e.clientX - canvas.offsetLeft;let y = e.clientY - canvas.offsetTop;console.log("当前鼠标的坐标为：(", x + ", " + y + ")");context.lineTo(x, y);    // 移动画笔绘制线条context.stroke();}canvas.onmouseup = function(e) {isDowned = false;}/*在按下鼠标移动的过程中，如果移出了画布，则无法触发鼠标松开事件，即onmouseup。所以需要在鼠标移出画布时，设置isDowned为false。*/canvas.onmouseout = function(e) {isDowned = false;}</script></body></html>

测试截图

总结

这是一个单机版的画板，它的实际功能其实也听匮乏的，只能切换画笔颜色和大小，但是简单的更容易理解。引入过多的特性，反而是学习的负担。而且，最主要的是我也就会这么多，嘿嘿！如果感兴趣的，可以接着看下一篇！

多人共享协作画板——单机画板相关推荐

一步一步搭建客服系统 (7) 多人共享的电子白板、画板
多人共享.同时操作的电子白板,让不同的参入者以不同的颜色来画画:可以保存当前room的内容,以让后来者可以直接加载所有内容. 在github上找到一个用html5 canvas实现的一个电子白板的例子 ...
如何实现Excel多人共享与协作
1.写在前面的话本人从事信息化工作多年,对Excel等电子表格的多人共享与协作接触较早,帮助客户实施的方案也较多,因此有些体会和认识.正好看到网上这方面的讨论较多,但都不完整,我就进一步做了专题调研 ...
企业多人共享文档工具用哪一个团队协作软件？
企业销售部都面临一个共同的问题:客户.很多企业客户资源是共享的,但究竟成员能与哪个客户签单要看各自的业务能力.为了共享客户资源,很多企业采用的方法是将客户的信息整理在文档中并打印出来,人手一份. 每签 ...
网页版Rstudio︱RStudio Server多人在线协作开发
网页版Rstudio︱RStudio Server多人在线协作开发想了解一下RStudio Server,太给力的应用,可以说成是代码分布式运行,可以节省时间,放大空间. RStudio是一个非常优 ...
多人共享的待办事项app有哪些
在如今快节奏的生活中,一个高效的待办事项app是我们必不可少的工具.然而,对于一个团队来说,多人共享的功能则是一个非常重要的需求.因此,一个待办APP可以多人共用,并且能适时同步数据和发出提醒,会对一 ...
升级｜ ONES Wiki 多人实时协作，万物皆可编辑
近日,ONES 完成了对知名文档工具为知笔记的全资收购,为知笔记将多人协同.区块编辑等核心编辑器能力赋予 ONES Wiki,带来新一代的文档协作与知识管理体验. 全新升级的 ONES Wiki 帮助 ...
HR必备的办公软件,适合多人共享的办公软件
公司的HR通常需要做的事情是比较杂乱的,所有的事情都是围绕着公司员工来开展的,有些还需要和员工一起共享,比如发布一些放假通知.通知会议召开的时间.提交月度工作总结等. 当然在发布一些重要的通知时,使用 ...
知识管理系统中的在线编辑，让共享协作更简便
编者按:共享协作越来越被企业重视,那么如何实现企业内部共享协作呢?在线编辑是关键,本文分析了共享协作的作用,并进一步介绍了知识管理中的在线编辑功能. 关键词: 在线编辑,在线预览,资料分享,全文检索, ...
在线白板，基于socket.io的多人在线协作工具
为什么80%的码农都做不了架构师?>>> 首发:个人博客,更新&纠错&回复是昨天这篇博文留的尾巴,socket.io库的使用练习,成品地址在这里. 代码已经上 ...

多人共享协作画板——单机画板

单机画板

测试截图

总结

多人共享协作画板——单机画板相关推荐

最新文章

热门文章