创建一个 JS 函数 getTransform（from， to） 以返回 2x3 仿射矩阵以用于 JS canvas 上下文函数 transform（a， b， c， d， e， f）

问：

我需要一个 JS 函数 getTransform（from， to） 来获取 4 个“from”点和 4 个“to”点，并返回一个 3x3 仿射矩阵，用于 JS 画布上下文函数 transform（a， b， c， d， e， f）。问题是这只是一个仿射变换，所以平行线将始终保留，这对我的用例不起作用。

例如，“from”点 [（0， 0）， （1， 0）， （1， 1）， （0， 1）] 和 'to' 点 [（0.25， 0）， （0.75， 0）， （1， 1）， （0， 1）] 无法生成正确的矩阵，因为“from”中的平行线在“to”中变得不平行。

我认为可能的解决方案是 getTransform 函数更改了点“from”和“to”，因此它们在平行线方面是相似的，但随后返回的矩阵仍然正确地转换了原始点。

这是我当前的代码：

matrix = getTransform(
  [new Point(0, 0), new Point(0, 16), new Point(16, 16), new Point(16, 0)],
  [p1, p2, p3, p4]
);
  
  
context.save();
context.transform(...matrix);
context.drawImage(image, 0, 0);
context.restore();

而当前的 getTransform 函数：

function getTransform(from, to) {
  let A = [];
  let B = [];

  var i;
  for (i = 0; i < 3; i++) {
    let x1 = from[i].x; let y1 = from[i].y;
    let x2 = to[i].x;   let y2 = to[i].y;

    A.push([x1, y1, 1, 0, 0, 0]);
    A.push([0, 0, 0, x1, y1, 1]);
    B.push(x2);
    B.push(y2);
  }

  let X = math.multiply(math.transpose(A), A);
  let Y = math.multiply(math.transpose(A), B);
  let result = math.multiply(math.inv(X), Y);

  let [a, c, e, b, d, f] = [
    result[0], result[1], result[2],
    result[3], result[4], result[5]
  ];

  return [a, b, c, d, e, f];
}

提前致谢。