相关博客:JavaScript判断点是否在三角形内部并使用Canvas可视化_ 一只博客-CSDN博客
本文核心算法参考博客:C++ 判断点是否在多边形内部的方法_高祥xiang的博客-CSDN博客
我使用JavaScript实现了他的C++代码一下,并加了实时修改点位置和可视化的功能,便于调试
效果演示图
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.info {
width: 200px;
resize: none;
border: none;
cursor: pointer;
}
#xy{
position: relative;
left:20px;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500">
</canvas>
<textarea class="info" id="text" readonly="readonly"></textarea>
<div id="xy">
A<input type="text" id="Ax" value="100" size="1">,<input type="text" id="Ay" value="150" size="1"><br>
B<input type="text" id="Bx" value="140" size="1">,<input type="text" id="By" value="300" size="1"><br>
C<input type="text" id="Cx" value="400" size="1">,<input type="text" id="Cy" value="200" size="1"><br>
D<input type="text" id="Dx" value="200" size="1">,<input type="text" id="Dy" value="20" size="1"><br>
E<input type="text" id="Ex" value="200" size="1">,<input type="text" id="Ey" value="230" size="1"><br>
P<input type="text" id="Px" value="240" size="1">,<input type="text" id="Py" value="240" size="1"><br>
</div>
<script type="text/javascript">
fresh()
xy.onchange = fresh
//重新计算,判断点是否在多边形内部,并在画布上重新绘制
function fresh() {
var Polygon = [
[+document.getElementById("Ax").value, +document.getElementById("Ay").value],
[+document.getElementById("Bx").value, +document.getElementById("By").value],
[+document.getElementById("Cx").value, +document.getElementById("Cy").value],
[+document.getElementById("Dx").value, +document.getElementById("Dy").value],
[+document.getElementById("Ex").value, +document.getElementById("Ey").value]
]
var Point = [+document.getElementById("Px").value, +document.getElementById("Py").value]
drawPolygon(Polygon)
drawPoint(Point)
if (isPointInPolygon(Polygon, Point)) {
document.getElementById("text").value = "The point is in the polygon."
} else {
document.getElementById("text").value = "The point is not in the polygon."
}
}
//判断点是否在多边形内部
function isPointInPolygon(Polygon, Point) {
var CrossNum = 0
for (let i = 0; i < Polygon.length; i++) {
var p1 = Polygon[i], p2 = Polygon[(i + 1) % Polygon.length]
if (p1[1] == p2[1] || Point[1] < Math.min(p1[1], p2[1]) || Point[1] >= Math.max(p1[1], p2[1])){
console.log("与第"+(i+1)+"条边不相交")
continue
}
var x = (Point[1] - p1[1]) * (p2[0] - p1[0]) / (p2[1] - p1[1]) + p1[0]
if (x > Point[0]){
CrossNum++
console.log("与第"+(i+1)+"条边相交,"+"交点坐标为("+x+","+Point[1]+")")
}else{
console.log("与第"+(i+1)+"条边不相交")
}
}
return CrossNum % 2 == 1
}
//画多边形
function drawPolygon(Polygon) {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath()
ctx.moveTo(Polygon[0][0], Polygon[0][1])
for(let i = 1; i < Polygon.length; i++){
ctx.lineTo(Polygon[i][0], Polygon[i][1])
}
ctx.closePath()
ctx.fillStyle = '#1096fc'
ctx.fill()
ctx.stroke()
}
//画点
function drawPoint(point) {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.arc(point[0], point[1], 3, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = '#fc5531'
ctx.fill()
ctx.stroke()
}
</script>
</body>
</html>