wangairnan/draw-and-guess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增：绘画功能，已处理PC端和移动端兼容性问题

Browse Source
This commit is contained in:
wangairnan
2024-04-14 16:27:26 +08:00
parent e86e1794ca
commit b0c00624da
3 changed files with 178 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/game.css
+1
View File
@@ -33,6 +33,7 @@
background-color: #ffffff;
box-shadow: #000000 0 0 1px;
border-radius: 10px;
touch-action: none;
}
.color-btn {
src/main/resources/static/index.html
+49 -9
View File
@@ -47,17 +47,31 @@
<div>题目：<span id="topic-name">坐井观天</span></div>
<div>提示：<span id="topic-tip">成语，四个字</span></div>
</div>
<canvas id="board" width="300" height="300"></canvas>
<canvas id="board" width="600" height="600"></canvas>
</div>
<div>
<button id="black-btn" class="color-btn" style="background-color: #000000;"></button>
<button id="red-btn" class="color-btn" style="background-color: #ff0000;"></button>
<button id="green-btn" class="color-btn" style="background-color: #00ff00;"></button>
<button id="blue-btn" class="color-btn" style="background-color: #0000ff;"></button>
<button id="yellow-btn" class="color-btn" style="background-color: #ffff00;"></button>
<button class="color-btn" onclick="changeBrushColor('#000000')"
style="background-color: #000000;"></button>
<button class="color-btn" onclick="changeBrushColor('#ff0000')"
style="background-color: #ff0000;"></button>
<button class="color-btn" onclick="changeBrushColor('#00ff00')"
style="background-color: #00ff00;"></button>
<button class="color-btn" onclick="changeBrushColor('#0000ff')"
style="background-color: #0000ff;"></button>
<button class="color-btn" onclick="changeBrushColor('#ffff00')"
style="background-color: #ffff00;"></button>
</div>
<div><label for="widthPicker">选择画笔宽度：</label>
<input type="range" id="widthPicker" value="1" min="1">
<div>
<button class="color-btn" onclick="changeBrushWidth(4)"
style="background-color: #888888;"></button>
<button class="color-btn" onclick="changeBrushWidth(8)"
style="background-color: #666666;"></button>
<button class="color-btn" onclick="changeBrushWidth(12)"
style="background-color: #444444;"></button>
<button class="color-btn" onclick="changeBrushWidth(16)"
style="background-color: #222222;"></button>
<button class="color-btn" onclick="changeBrushWidth(20)"
style="background-color: #000000;"></button>
</div>
<div id="player-box">
<div class="player-item">张</div>
@@ -88,8 +102,10 @@
let playerId = "";
// 当前房间id
let roomId = "";
let backendAddr = "192.168.31.222:8080"
const backendAddr = "192.168.31.222:8080"
const api = "http://" + backendAddr + "/api"
init();
function init() {
@@ -312,6 +328,28 @@
if (result.type === "room-chat") {
$("#chat-box").append("<p>" + result.data + "</p>")
}
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);
} else {
// 移动端若按下事件坐标为空，则在划线事件中处理，将新的坐标作为点补充画点事件
if (brushPoint.x == null || brushPoint.y == null) {
drawPoint(brush.x, brush.y, brush.width, brush.color);
brushPoint = {x: brush.x, y: brush.y};
return;
}
drawLine(brushPoint, {
x: brush.x,
y: brush.y
}, brush.width, brush.color);
brushPoint = {x: brush.x, y: brush.y};
}
}
};
ws.onclose = function () {
// 关闭 websocket
@@ -413,3 +451,5 @@
</script>
<script src="./js/draw.js"></script>
src/main/resources/static/js/draw.js
+127
View File
@@ -0,0 +1,127 @@
// canvas画板
let canvas = document.getElementById("board");
let context = canvas.getContext("2d");
context.imageSmoothingEnabled = true;
let brushColor = "#000000";
let brushWidth = 2;
let brushPoint = {x: 0, y: 0};
let isDrawing = false;
// PC端 *******************************
// 鼠标按下事件处理程序
canvas.addEventListener("mousedown", function (event) {
isDrawing = true;
brushPoint = getBrushPoint(event);
// 广播绘画数据
sendDrawData(brushPoint.x, brushPoint.y, true);
drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor);
});
// 鼠标移动事件处理程序
canvas.addEventListener("mousemove", function (event) {
if (isDrawing) {
let newPoint = getBrushPoint(event);
// 广播绘画数据
sendDrawData(newPoint.x, newPoint.y, false);
drawLine(brushPoint, newPoint, brushWidth, brushColor);
brushPoint = newPoint;
}
});
// 鼠标释放事件处理程序
canvas.addEventListener("mouseup", function () {
isDrawing = false;
});
// 移动端 *******************************
// 触摸开始事件处理程序
canvas.addEventListener("touchstart", function (event) {
isDrawing = true;
brushPoint = getTouchPoint(event);
// 广播绘画数据
sendDrawData(brushPoint.x, brushPoint.y, true);
drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor);
});
// 触摸移动事件处理程序
canvas.addEventListener("touchmove", function (event) {
event.preventDefault(); // 防止滚动页面
if (isDrawing) {
let newPoint = getTouchPoint(event.touches[0]); // 使用第一个触摸点
// 广播绘画数据
sendDrawData(newPoint.x, newPoint.y, false);
drawLine(brushPoint, newPoint, brushWidth, brushColor);
brushPoint = newPoint;
}
});
// 触摸结束事件处理程序
canvas.addEventListener("touchend", function () {
isDrawing = false;
});
// 计算画笔在画布上的坐标
function getBrushPoint(event) {
let rect = canvas.getBoundingClientRect();
return {
x: (event.clientX - rect.left) * 2,
y: (event.clientY - rect.top) * 2
};
}
// 计算画笔在画布上的触摸坐标
function getTouchPoint(touch) {
let rect = canvas.getBoundingClientRect();
return {
x: (touch.clientX - rect.left) * (canvas.width / rect.width),
y: (touch.clientY - rect.top) * (canvas.height / rect.height)
};
}
// 绘制单个点
function drawPoint(x, y, width, color) {
context.beginPath();
context.fillStyle = color;
context.arc(x, y, width / 2, 0, Math.PI * 2);
context.fill();
context.closePath();
}
// 绘制线段
function drawLine(startPoint, endPoint, whidth, color) {
context.beginPath();
context.strokeStyle = color;
context.lineWidth = whidth;
context.lineCap = "round";
context.moveTo(startPoint.x, startPoint.y);
context.lineTo(endPoint.x, endPoint.y);
context.stroke();
context.closePath();
}
// 发送绘图信息的函数
function sendDrawData(x, y, isPoint) {
// 构造绘图信息对象
const drawData = {
x,
y,
color: brushColor,
width: brushWidth,
isPoint
};
sendMessage("room-draw", JSON.stringify(drawData));
}
/**
* 切换画笔颜色
* @param color
*/
function changeBrushColor(color) {
brushColor = color;
}
/**
* 切换画笔宽度
* @param width 整数
*/
function changeBrushWidth(width) {
brushWidth = width;
}