FabricJS – 找到表示多边形对象当前变换的变换矩阵？

什么是FabricJS？

FabricJS是一个用于HTML5 Canvas绘图的库。它允许用户通过JavaScript创建和控制复杂的图形对象。可以添加/删除形状、图像、文本等，并对它们进行定位、缩放、旋转和多个其他变换操作，同时也可以处理交互和动画。

什么是变换矩阵

在网格图形中，所有形状（如三角形、四边形等）都有一个所有点的列表。现在，我们想要转换这些形状，比如缩放或旋转。要通过简单的矩阵计算来完成这个转换过程，我们用一个3x3矩阵来表示形状所需的变换操作。

变换矩阵表示为：

[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]

其中，第一列中的 a 和 b 控制缩放和切变，第二列中的 c 和 d 控制旋转和剪切，最后一列中的 e 和 f 控制平移。

找到表示多边形对象当前变换的变换矩阵

在FabricJS中，可以通过实例对象的 calcTransformMatrix() 方法来找到当前变换矩阵，该方法返回当前对象的变换矩阵。

calcTransformMatrix方法参数

calcTransformMatrix() 方法没有传递任何参数。

calcTransformMatrix方法返回值

该方法返回表示对象当前变换的变换矩阵的Array对象。

示例代码

以下是一个演示如何使用calcTransformMatrix()方法找到表示多边形对象当前变换的变换矩阵的示例代码：

var myPolygon = new fabric.Polygon([
  {x: 100, y: 100},
  {x: 200, y: 100},
  {x: 200, y: 200},
  {x: 100, y: 200}
]);
// 对myPolygon对象进行一些操作，如旋转、缩放等
var transformMatrix = myPolygon.calcTransformMatrix();
console.log(transformMatrix);

在上面的实际代码中，我们首先创建了一个多边形对象 myPolygon，然后对其进行了某些变换操作，例如缩放或旋转。最终，我们使用 calcTransformMatrix() 方法找到当前变换矩阵，该方法返回由数字表示的矩阵。

我们可以使用上面的代码来检查多边形对象的当前变换矩阵，以便在应用其他变换之前对其进行检查。

结论

使用 FabricJS，可以轻松地创建、控制和转换HTML5 Canvas中的形状、图像和文本。为了找到表示多边形对象当前变换的变换矩阵，可以使用对象的 calcTransformMatrix() 方法。该方法返回一个表示当前变换的矩阵的数组。