JavaScript Canvas 多边形点击边线判断 - 代码实现

要判断点击是否在多边形的某条边上，可以使用以下步骤：\n\n1. 获取多边形的顶点坐标数组，可以使用一个数组来存储每个顶点的坐标。\n\n2. 使用鼠标点击事件的坐标作为起点，遍历多边形的每条边。\n\n3. 使用射线法判断点击点是否在当前边上。射线法的思路是，从点击点沿着x轴方向发射一条射线，统计射线与多边形的每条边的交点数量。如果交点数量是奇数，则说明点击点在多边形内部，而偶数说明点击点在多边形外部。\n\n4. 如果点击点在多边形内部，可以继续判断点击点是否在当前边上。可以使用点到直线的距离公式来判断：如果点击点到当前边的距离小于一个阈值，则说明点击点在当前边上。\n\n下面是一个示例代码：\n\njavascript\n// 获取多边形的顶点坐标数组\nvar polygon = [\n {x: 100, y: 100},\n {x: 200, y: 100},\n {x: 200, y: 200},\n {x: 100, y: 200}\n];\n\n// canvas元素\nvar canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\n\n// 绘制多边形\nctx.beginPath();\nctx.moveTo(polygon[0].x, polygon[0].y);\nfor (var i = 1; i < polygon.length; i++) {\n ctx.lineTo(polygon[i].x, polygon[i].y);\n}\nctx.closePath();\nctx.stroke();\n\n// 鼠标点击事件处理函数\ncanvas.addEventListener('click', function(e) {\n var mouseX = e.clientX - canvas.getBoundingClientRect().left;\n var mouseY = e.clientY - canvas.getBoundingClientRect().top;\n\n // 判断点击点是否在多边形内部\n var insidePolygon = false;\n for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n if (((polygon[i].y > mouseY) !== (polygon[j].y > mouseY)) &&\n (mouseX < (polygon[j].x - polygon[i].x) * (mouseY - polygon[i].y) / (polygon[j].y - polygon[i].y) + polygon[i].x)) {\n insidePolygon = !insidePolygon;\n }\n }\n\n // 如果在多边形内部，继续判断点击点是否在边上\n if (insidePolygon) {\n for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n var dist = pointToLineDistance(mouseX, mouseY, polygon[i].x, polygon[i].y, polygon[j].x, polygon[j].y);\n if (dist < 5) { // 距离小于5像素，可以自定义阈值\n console.log('点击点在第' + (i + 1) + '条边上');\n break;\n }\n }\n }\n});\n\n// 计算点到直线的距离\nfunction pointToLineDistance(x, y, x1, y1, x2, y2) {\n var A = x - x1;\n var B = y - y1;\n var C = x2 - x1;\n var D = y2 - y1;\n\n var dot = A * C + B * D;\n var len_sq = C * C + D * D;\n var param = dot / len_sq;\n\n var xx, yy;\n\n if (param < 0 || (x1 == x2 && y1 == y2)) {\n xx = x1;\n yy = y1;\n } else if (param > 1) {\n xx = x2;\n yy = y2;\n } else {\n xx = x1 + param * C;\n yy = y1 + param * D;\n }\n\n var dx = x - xx;\n var dy = y - yy;\n return Math.sqrt(dx * dx + dy * dy);\n}\n\n\n这段代码中，首先获取多边形的顶点坐标数组，并绘制多边形。然后，在鼠标点击事件处理函数中，判断点击点是否在多边形内部，如果是的话，再判断点击点是否在多边形的某条边上。判断点击点是否在多边形内部使用的是射线法，判断点击点是否在边上使用的是点到直线的距离公式。