canvas实现画板工具

最新推荐文章于 2025-11-21 11:09:23 发布

最新推荐文章于 2025-11-21 11:09:23 发布 · 1.4k 阅读

文章标签：

#canvas #web画板 #websocket

html5 专栏收录该内容

1 篇文章

订阅专栏

花费大量时间（两周！！！！）制作了一款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之间的通信不会共享成员变量
	}

}