JavaScript中如何计算两个已知三角形之间的2D变换矩阵
计算两三角形映射的2D变换矩阵
我需要计算可将一个三角形映射为另一个三角形的2D变换矩阵,两个三角形的所有顶点坐标均已知。我通常使用Paper.js处理矩阵相关需求,但该库并没有内置对这一场景的支持。我已制作示例演示问题,示例中选取的点坐标和矩阵变换特意展示了变换的复杂性,期望得到的方案可覆盖所有合法输入场景。
我已找到该问题的理论解法,但由于我矩阵数学知识有限,难以将其转换为可运行的JavaScript代码。请问是否有成熟的JavaScript库可以直接解决这类问题?或者是否有人知道如何用JavaScript手动实现该功能?
演示代码
// 以下为已知的输入点 const p1A = new Point(0, 0); const p2A = new Point(25, 0); const p3A = new Point(0, 15); // 此处为需要计算的目标矩阵 const matrix = new Matrix(); matrix.translate(40, 0); matrix.rotate(30); matrix.scale(1.2, -0.2); matrix.rotate(-70); // 以下为已知的变换后坐标点 const p1B = p1A.transform(matrix); const p2B = p2A.transform(matrix); const p3B = p3A.transform(matrix); // 绘制元素以便更好地可视化问题 drawPoint(p1A, 'p1A', 'red'); drawPoint(p2A, 'p2A', 'cyan'); drawPoint(p3A, 'p3A', 'lime'); drawPoint(p1B, 'p1B', 'red'); drawPoint(p2B, 'p2B', 'cyan'); drawPoint(p3B, 'p3B', 'lime'); drawPolygon([p1A, p2A, p3A], 'A'); drawPolygon([p1B, p2B, p3B], 'B'); // 缩放视图方便查看 project.activeLayer.fitBounds(view.bounds.scale(0.8)); // // 工具方法 // function drawPoint(point, name, color) { new Path.Circle({ center: point, radius: 1, fillColor: color }); new PointText({ content: name, point: point - [0, 1.5], justification: 'center', fontSize: 1 }); } function drawPolygon(points, name) { const path = new Path({ segments: points, strokeColor: 'grey', closed: true }); new PointText({ content: name, point: path.bounds.center, justification: 'center', fontSize: 2 }); }
内容的提问来源于stack exchange,提问作者sasensi
相关产品推荐
相关产品推荐

