JavaScript判断点是否在三角形内部并使用Canvas可视化

本文核心算法参考博客：二维平面上判断点是否在三角形内 - tenos - 博客园 (cnblogs.com)

原作者参考了如下资料，使用C++写了4个判断方法

向量点积(Dot Product),向量叉积(Cross Product)_易水寒-CSDN博客

叉乘法判断点是否在三角形内_dracularking的竹林小屋-CSDN博客_叉乘判断点是否在三角形内

我挑选了最优的方法，使用JavaScript实现了一下，并加了实时修改点位置和可视化的功能

效果图，修改任何数据后页面立刻清空画布并重新判断和绘制

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.info {
				width:400px;
				resize: none;
				border: none;
				cursor: pointer;
			}
		</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="120" size="2">,<input type="text" id="Ay" value="210" size="2"><br>
			B<input type="text" id="Bx" value="280" size="2">,<input type="text" id="By" value="300" size="2"><br>
			C<input type="text" id="Cx" value="400" size="2">,<input type="text" id="Cy" value="140" size="2"><br>
			P<input type="text" id="Px" value="200" size="2">,<input type="text" id="Py" value="300" size="2"><br>
		</div>
		<script type="text/javascript">
			const xy = document.getElementById('xy')
			fresh()
			xy.onchange = fresh
			//实时计算并更新画布
			function fresh() { 
				var Triangle = [[+document.getElementById("Ax").value, +document.getElementById("Ay").value],
								[+document.getElementById("Bx").value, +document.getElementById("By").value],
								[+document.getElementById("Cx").value, +document.getElementById("Cy").value]]
				var Point = [+document.getElementById("Px").value, +document.getElementById("Py").value]
				if(isPointInTriangle(Triangle, Point)){
					document.getElementById("text").value = "The point is in the triangle."
				}else{
					document.getElementById("text").value = "The point is not in the triangle."
				}
				drawTriangle(Triangle)
				drawPoint(Point)
			}
			//画三角形
			function drawTriangle(Triangle){
				var canvas = document.getElementById("canvas")
				var ctx = canvas.getContext("2d")
				ctx.clearRect(0, 0, canvas.width, canvas.height)
				ctx.beginPath()
				ctx.moveTo(Triangle[0][0], Triangle[0][1])
				ctx.lineTo(Triangle[1][0], Triangle[1][1])
				ctx.lineTo(Triangle[2][0], Triangle[2][1])
				ctx.closePath()
				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.stroke()
			}
			//核心函数，判断点是否在三角形内部
			function isPointInTriangle(Triangle, Point){
				var PA = [Triangle[0][0] - Point[0], Triangle[0][1] - Point[1]]
				var PB = [Triangle[1][0] - Point[0], Triangle[1][1] - Point[1]]
				var PC = [Triangle[2][0] - Point[0], Triangle[2][1] - Point[1]]
				var t1 = PA[0]*PB[1] - PA[1]*PB[0]
				var t2 = PB[0]*PC[1] - PB[1]*PC[0]
				var t3 = PC[0]*PA[1] - PC[1]*PA[0]
				return t1*t2 >= 0 && t1*t3 >= 0
			}
		</script>
	</body>
</html>

JavaScript判断点是否在三角形内部并使用Canvas可视化

猜你喜欢