JavaScript Canvas 多边形点击边检测 - 完整代码示例

在canvas中判断点击在多边形的那条边上，可以使用以下方法：\n\n1. 获取多边形的顶点坐标数组。\n2. 判断点击点是否在多边形内部，可以使用射线法。从点击点向右方水平发射一条射线，统计与多边形的边相交的次数。如果相交次数为奇数，则点击点在多边形内部；如果相交次数为偶数，则点击点在多边形外部。\n3. 如果点击点在多边形内部，则可以进一步判断点击点在多边形的哪条边上。遍历多边形的边，判断点击点是否在每条边上，可以使用点到直线的距离公式来计算。找到距离最近的边，即为点击点所在的边。\n\n以下是一个示例代码：\n\njavascript\n// 获取点击事件的坐标\ncanvas.addEventListener('click', function(event) {\n var x = event.pageX - canvas.offsetLeft;\n var y = event.pageY - canvas.offsetTop;\n\n // 判断点击点是否在多边形内部\n if (isPointInPolygon(x, y, polygon)) {\n // 遍历多边形的边，找到距离最近的边\n var minDistance = Number.MAX_VALUE;\n var nearestEdge = null;\n for (var i = 0; i < polygon.length; i++) {\n var p1 = polygon[i];\n var p2 = polygon[(i + 1) % polygon.length];\n var distance = pointToLineDistance(x, y, p1[0], p1[1], p2[0], p2[1]);\n if (distance < minDistance) {\n minDistance = distance;\n nearestEdge = [p1, p2];\n }\n }\n \n // nearestEdge即为点击点所在的边\n console.log(nearestEdge);\n }\n});\n\n// 判断点击点是否在多边形内部\nfunction isPointInPolygon(x, y, polygon) {\n var inside = false;\n for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n var xi = polygon[i][0], yi = polygon[i][1];\n var xj = polygon[j][0], yj = polygon[j][1];\n\n var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n if (intersect) inside = !inside;\n }\n return inside;\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 }\n else if (param > 1) {\n xx = x2;\n yy = y2;\n }\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这段代码中，polygon表示多边形的顶点坐标数组，canvas表示canvas元素。在点击canvas时，首先判断点击点是否在多边形内部，如果是，则遍历多边形的边，找到距离最近的边，并将其输出到控制台。