花费大量时间(两周!!!!)制作了一款web端画图工具,可自由涂鸦、裁剪并移动裁剪区域位置、输入文字,包括橡皮擦、箭头工具、动作撤销/重做、保存,并通过websocket实现了画板内容同步,代码已分享,希望大家指正,同进步。
前端代码见附件huaban_v3.rar,后端websocket关键代码如下:
package com.lfwer.pinche.web; import java.util.Collections; import java.util.HashSet; import java.util.Set; import javax.websocket.CloseReason; import javax.websocket.EndpointConfig; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import org.springframework.stereotype.Component; @ServerEndpoint("/board") @Component public class BoardSocket { private static Set<Session> peers = Collections.synchronizedSet(new HashSet<Session>()); private static StringBuffer str = new StringBuffer(); /** * 客户端有连接的时候就会调用这个方法 */ @OnOpen public void open(Session session, EndpointConfig config) { peers.add(session); } /** * 客户端连接断开就会调用此方法 */ @OnClose public void close(Session session, CloseReason reason) { peers.remove(session); } /** * 接收到客户端的信息 * * @param msg * @param last */ @OnMessage public void message(Session session, boolean last, String msg) { if (!last) { str.append(msg); } else { str.append(msg); try { for (Session peer : peers) { if (!peer.equals(session)) { peer.getBasicRemote().sendText(str.toString()); } } } catch (Exception e) { e.printStackTrace(); } str = new StringBuffer(); } } /** * 错误监听(当没有关闭socket连接就关闭浏览器会异常) */ @OnError public void error(Session session, Throwable error) { String id = session.getId(); System.out.println("出错的session的id是" + id); } public BoardSocket() { System.out.println("Socket对象创建"); // 通过对象的创建可以知道不同socket之间的通信不会共享成员变量 } }
相关推荐
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
canvas画板工具,支持曲线、直线、画圆、方形、清空、撤回、橡皮擦、画笔颜色、画笔粗细、下载、分享等操作,支持横竖屏
html5基于canvas实现的带工具台绘画板特效源码.zip
html5 canvas实现的绘图工具自由绘制图形画板源码.zip
html5 canvas 模拟Windows 画图程序,初看上去,你会不会觉得这就是windows 的画图程序呢?界面和功能布局几乎是一样的,而且用起来也和Windows画图没啥区别,真心模拟的很像。运用Canvas技术来实现的画图程序。
这是一款基于html5 canvas实现的绘图工具自由绘制图形画板源码,具备画板基本的线、矩形、铅笔、圆、五角星等绘图工具,及颜色与边框的填充,橡皮擦等功能。绘图完毕还具有保存图片的功能。是一款非常实用的经典...
NULL 博文链接:https://zyqwst.iteye.com/blog/2312220
fabricjs插件 可以编辑图片缩放等功能
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,测试了下还不错,感兴趣的朋友可以参考下
通过Koa + Socket.io +画布实现在线点阵画板 展示 使用 环境依赖mongodb , nodejs yarn或npm install yarn dev或npm run dev 目录结构 |- /figure 一些图案的点阵坐标 |- /model 数据库模型 |- Content.js 点阵...
2.1.5 擦除canvas画板 / 27 2.2 绘制复杂图形 / 28 2.2.1 画曲线 / 28 2.2.2 利用clip在指定区域绘 图 / 30 2.2.3 绘制自定义图形 / 31 2.3 绘制文本 / 32 2.3.1 绘制文字 / 32 2.3.2 文字设置 / 33 2.3.3...
算法实现 运用画板,首先要对工具栏按键和鼠标进行监听,然后对监听进行响应。运行相应程 序进行画图 1. 监听程序展示: choice.addItemListener(this); choice1.addItemListener(this); btn1.addActionListener...
算法实现 运用画板,首先要对工具栏按键和鼠标进展监听,然后对监听进展响应.运行相应程序进 展画图 1. 监听程序展示: choice.addItemListener; choice1.addItemListener; btn1.addActionListener; btn2....
相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求:实现一个可以书写的画板小工具。 嗯,相信这对canvas使用较熟的童鞋来说仅仅只是几十行代码就可以搞掂的事情,以下demo就是一个...
这是基于vue2.x和canvas的绘图板工具。 通过此工具,您可以在图片上标记所需的信息并获取相应的数据。 此外,您还可以将其用作普通绘图板,在其中可以自由在其上绘制图形。 当前支持的类型为折线,矩形,多边形,点...
画板工具(引入了 `paint-canvas`,适配了 `i18n`) 可视化数据的展示(引入了 `Echarts`,并进行了简单封装) 人脸识别(引入了 `face-api.js`) 杂七杂八的页面(引入了 `Chakra UI`等组件) ## 自行封装的...
HTML5手机端画板涂鸦代码是一款基于HTML5 Canvas制作的全屏的手机画板,主要功能有选择颜色,画笔粗细,橡皮檫工具和删除撤销。