You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 07:54:09