JS Canvas 多边形点击检测：查找点击的边线

要查找当前点击的多边形上的那条线，您可以使用以下步骤：\n\n1. 获取鼠标点击事件的坐标。\n2. 遍历多边形的每条边，检查鼠标点击的坐标是否在该边上。\n3. 如果鼠标点击的坐标在某条边上，则找到了当前点击的线。\n\n下面是一个示例代码：\n\njavascript\nconst canvas = document.getElementById("canvas");\nconst ctx = canvas.getContext("2d");\n\n// 定义多边形的顶点坐标\nconst polygon = [\n { x: 100, y: 100 },\n { x: 200, y: 50 },\n { x: 300, y: 100 },\n { x: 300, y: 200 },\n { x: 200, y: 250 },\n { x: 100, y: 200 }\n];\n\n// 绘制多边形\nfunction drawPolygon() {\n ctx.beginPath();\n ctx.moveTo(polygon[0].x, polygon[0].y);\n for (let i = 1; i < polygon.length; i++) {\n ctx.lineTo(polygon[i].x, polygon[i].y);\n }\n ctx.closePath();\n ctx.stroke();\n}\n\n// 获取鼠标点击事件的坐标\nfunction getMousePos(canvas, event) {\n const rect = canvas.getBoundingClientRect();\n return {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top\n };\n}\n\n// 检查点是否在线段上\nfunction pointOnLine(p1, p2, point) {\n const d1 = Math.sqrt((point.x - p1.x) ** 2 + (point.y - p1.y) ** 2);\n const d2 = Math.sqrt((point.x - p2.x) ** 2 + (point.y - p2.y) ** 2);\n const lineLength = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);\n const buffer = 0.1; // 容差值，用于调整点击的精度\n\n return d1 + d2 >= lineLength - buffer && d1 + d2 <= lineLength + buffer;\n}\n\n// 处理鼠标点击事件\nfunction handleMouseClick(event) {\n const mousePos = getMousePos(canvas, event);\n\n for (let i = 0; i < polygon.length; i++) {\n const p1 = polygon[i];\n const p2 = polygon[(i + 1) % polygon.length];\n\n if (pointOnLine(p1, p2, mousePos)) {\n console.log("点击的是多边形的第 " + i + " 条线");\n break;\n }\n }\n}\n\n// 绑定鼠标点击事件\ncanvas.addEventListener("click", handleMouseClick);\n\n// 绘制多边形\ndrawPolygon();\n\n\n这段代码将在画布上绘制一个多边形，并且当你点击多边形的边时，在控制台输出点击的是多边形的第几条边。您可以根据需要修改多边形的顶点坐标和绘制多边形的方式。