相关博客:JavaScript判断点是否在多边形内部并使用Canvas可视化_ 一只博客-CSDN博客
本文核心算法参考博客:二维平面上判断点是否在三角形内 - 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>