" + result.data + "
") } + // 接收绘画消息 if (result.type === "room-draw") { let brush = JSON.parse(result.data); - console.log("收到坐标: ", brush.x, brush.y); if (brush.isPoint) { brushPoint = {x: brush.x, y: brush.y} drawPoint(brush.x, brush.y, brush.width, brush.color); @@ -347,7 +382,10 @@ }, brush.width, brush.color); brushPoint = {x: brush.x, y: brush.y}; } - + } + // 接收清空画板消息 + if (result.type === "room-draw-clear") { + clearDraw(); } }; diff --git a/src/main/resources/static/js/draw.js b/src/main/resources/static/js/draw.js index 5fedca8..56ad79a 100644 --- a/src/main/resources/static/js/draw.js +++ b/src/main/resources/static/js/draw.js @@ -3,9 +3,12 @@ let canvas = document.getElementById("board"); let context = canvas.getContext("2d"); context.imageSmoothingEnabled = true; let brushColor = "#000000"; -let brushWidth = 2; +let brushWidth = 8; let brushPoint = {x: 0, y: 0}; let isDrawing = false; + +let eraserWidth = 8; +let useEraser = false; // PC端 ******************************* // 鼠标按下事件处理程序 canvas.addEventListener("mousedown", function (event) { @@ -13,7 +16,12 @@ canvas.addEventListener("mousedown", function (event) { brushPoint = getBrushPoint(event); // 广播绘画数据 sendDrawData(brushPoint.x, brushPoint.y, true); - drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff"); + } else { + drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + } }); // 鼠标移动事件处理程序 @@ -22,7 +30,12 @@ canvas.addEventListener("mousemove", function (event) { let newPoint = getBrushPoint(event); // 广播绘画数据 sendDrawData(newPoint.x, newPoint.y, false); - drawLine(brushPoint, newPoint, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawLine(brushPoint, newPoint, eraserWidth, "#ffffff"); + } else { + drawLine(brushPoint, newPoint, brushWidth, brushColor); + } brushPoint = newPoint; } }); @@ -39,7 +52,12 @@ canvas.addEventListener("touchstart", function (event) { brushPoint = getTouchPoint(event); // 广播绘画数据 sendDrawData(brushPoint.x, brushPoint.y, true); - drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff"); + } else { + drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + } }); // 触摸移动事件处理程序 @@ -49,7 +67,12 @@ canvas.addEventListener("touchmove", function (event) { let newPoint = getTouchPoint(event.touches[0]); // 使用第一个触摸点 // 广播绘画数据 sendDrawData(newPoint.x, newPoint.y, false); - drawLine(brushPoint, newPoint, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawLine(brushPoint, newPoint, eraserWidth, "#ffffff"); + } else { + drawLine(brushPoint, newPoint, brushWidth, brushColor); + } brushPoint = newPoint; } }); @@ -67,6 +90,7 @@ function getBrushPoint(event) { y: (event.clientY - rect.top) * 2 }; } + // 计算画笔在画布上的触摸坐标 function getTouchPoint(touch) { let rect = canvas.getBoundingClientRect(); @@ -75,6 +99,7 @@ function getTouchPoint(touch) { y: (touch.clientY - rect.top) * (canvas.height / rect.height) }; } + // 绘制单个点 function drawPoint(x, y, width, color) { context.beginPath(); @@ -102,8 +127,8 @@ function sendDrawData(x, y, isPoint) { const drawData = { x, y, - color: brushColor, - width: brushWidth, + color: useEraser ? "#ffffff" : brushColor, + width: useEraser ? eraserWidth : brushWidth, isPoint }; @@ -118,10 +143,105 @@ function changeBrushColor(color) { brushColor = color; } + /** * 切换画笔宽度 * @param width 整数 */ function changeBrushWidth(width) { brushWidth = width; -} \ No newline at end of file +} + +/** + * 切换橡皮宽度 + * @param width 整数 + */ +function changeEraserWidth(width) { + eraserWidth = width; +} + +/** + * 发送清空画板命令 + */ +function sendClearDraw() { + sendMessage("room-draw-clear", true); + clearDraw(); +} + +/** + * 清空画板 + */ +function clearDraw() { + context.clearRect(0, 0, 600, 600); + context.beginPath(); + canvas.width = canvas.width; + showMsg("画板已清空"); +} + +/** + * 打开或关闭颜色选择框 + */ +function toggleColorBox() { + $("#width-select-box").hide(); + $("#eraser-select-box").hide(); + $("#color-select-box").show(); +} + +/** + * 打开或关闭画笔粗细选择框 + */ +function toggleWidthBox() { + $("#color-select-box").hide(); + $("#eraser-select-box").hide(); + $("#width-select-box").show(); +} + +/** + * 打开或关闭橡皮粗细选择框 + */ +function toggleEraserBox() { + $("#width-select-box").hide(); + $("#color-select-box").hide(); + $("#eraser-select-box").show(); +} + +// 默认隐藏所有工具框 +$(".select-box").hide(); +/** + * 颜色按钮事件 + */ +$(".color-btn").click(function () { + changeBrushColor($(this).attr("data-color")); + $(".color-btn").css("border-color", "transparent"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 画笔宽度按钮事件 + */ +$(".width-btn").click(function () { + changeBrushWidth($(this).attr("data-width")); + $(".width-btn").css("border-color", "#444444"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 画笔宽度按钮事件 + */ +$(".eraser-btn").click(function () { + changeEraserWidth($(this).attr("data-width")); + $(".eraser-btn").css("border-color", "#444444"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 橡皮状态切换 + */ +$("#eraser-select-btn").click(function () { + useEraser = !useEraser; + if(useEraser){ + $(this).css("background-color", "#ffffff"); + }else { + $(this).css("background-color", "transparent"); + } +})