【原创】《矩阵的史诗级玩法》连载三十三：作业题：用矩阵判断一个点是否在三角形内（完）

本文链接：https://blog.csdn.net/iloveas2014/article/details/86744832

这篇我一开始纠结了很久，到底要不要写在解方程的前面，因为总的来说这比解方程简单很多，方便入门。但另一方面，这是一个很奇葩的做法。点在三角形内的判断，向量法成熟高效，而矩阵法不但绕了个大圈子，而且效率还不咋地，完全是为了玩矩阵而玩矩阵。当然了，奇葩也不失为史诗级的一种玩法，自然就可以归到这个系列当中了。

为了适当提高本篇教程的难度，我做出了一个艰难的决定：把这一课题作为作业布置给大家，不过我也不会一走了之，因此我留下代码，并且去掉注释让大家自行思考原理。

题目的已知条件是三角形的3个点ABC和一个需要判断是否在三角形内的点P，判断P是否在三角形ABC内。

事不宜迟，代码奉上。

<!DOCTYPE html>
<html>
<head>
<title>矩阵法判断点是否在三角形内</title>
<script src="Matrix.js"></script>
<script src="MatrixUtil.js"></script>
<script src="Point.js"></script>
</head>
<body>
<canvas width="800" height="800" id="canvas"></canvas>
</body>
<script>

	var p0 = new Point(100, 200);
	var p1 = new Point(300, 300);
	var p2 = new Point(250, 600);

	var context = canvas.getContext("2d");
	
	context.strokeStyle = "#0000cc";
	context.fillStyle = "#ccccff";
	context.lineWidth = 0.5;
	
	var baseX = new Point(p1.x - p0.x, p1.y - p0.y);
	var baseY = new Point(p2.x - p0.x, p2.y - p0.y);
	var matrix = new Matrix();
	matrix.a = baseX.x;	
	matrix.b = baseX.y;
	matrix.c = baseY.x;
	matrix.d = baseY.y;
	MatrixUtil.translate(matrix, p0.x, p0.y);
	var matrixInvert = matrix.clone();
	matrixInvert.invert();
	
	canvas.addEventListener("mousemove", function(event)
	{
		//鼠标位置
		var mouseX = event.clientX-canvas.getBoundingClientRect().left;
		var mouseY = event.clientY-canvas.getBoundingClientRect().top;
		var transformedMouse = matrixInvert.transformPoint(new Point(mouseX, mouseY));
		var inPoint = false;
		if(transformedMouse.x >= 0 && transformedMouse.x <= 1 && transformedMouse.y >= 0 && transformedMouse.y <=1 && transformedMouse.y <= 1 - transformedMouse.x)
		{
			//鼠标在三角形内
			inPoint = true;
		}
		drawTriangle(inPoint);
		
	});
	
	function drawTriangle(inPoint)
	{
		context.clearRect(0, 0, 800, 800);
		context.beginPath();
		context.strokeStyle = "#666666";
		context.fillStyle = inPoint ? "#ccccff" : "#cccccc";
		context.lineWidth = 0.5;
		context.moveTo(p0.x, p0.y);
		context.lineTo(p1.x, p1.y);
		context.lineTo(p2.x, p2.y);
		context.lineTo(p0.x, p0.y);
		context.stroke();
		context.fill();
		context.closePath();
	}
</script>
</html>

如果大家能看懂以上代码的原理，那就说明你们真的毕业了，嘿嘿！

这个系列的教程从去年2月拖到现在才正式完工，有同事说我是个懒人。我心里多少有点不服，平时实在太忙了，上下班路上又不方便写，只能脑子里想，等到真正有空拿起键盘敲文字的时候才有办法一气呵成。你们可以看下连载二十八到连载三十三的发表时间，全部都是2月1号，也就是我们春节放假的第一天，我一口气完成了6篇，差点都把自己给吓到了。

至此，《矩阵的史诗级玩法》系列教程划上了圆满的句号！但这并不仅仅是结束，更是一个全新的开始。在三维家打滚了一年多，我又积累了很多算法方面的经验和心得，以后会给大家分享更多更精彩的教程，敬请期待！祝大家新春快乐，万事如意！