Html5 canvas 基于对另一个对象的变换矩阵的更改更新一个织物对象的变换矩阵

我正在尝试同步两个结构对象的移动、调整大小和旋转操作

假设有两个多边形-Poly1和Poly2。 当以任何方式修改Poly1时，我需要对Poly2应用相同的修改，并需要获得Poly2的更新点。以下是所采用的方法：

得到修改前后Poly1的变换矩阵

使用它们可以得到修改变换矩阵的矩阵 它的原始状态变为修改状态

将上述步骤中的矩阵乘以当前变换 得到新的变换矩阵

使用新的变换矩阵，获得更新的点并重新绘制 Poly2

但是，此方法仅适用于移动操作。如果在Poly1上调整大小或旋转，则无法在Poly2上正确应用。请让我知道我做错了什么

提前感谢您的帮助

样本代码-蓝色为Poly1，红色为Poly2

var OldPoly1矩阵； var canvas=newfabric.canvas'c'； 变量srcpoptions={ 笔划：“蓝色”， 填充：， 类型：“src” }; 变量选项={ 笔划：“红色”， 填充：， 可选：false， 哈斯：错， 哈斯：错， 类型：“dest” }; var poly1=新结构。多边形[{ x:60， y:40 }, { x:160， y:40 }, { x:160， y:140 }, { x:60， y:140 }]，src选项； var poly2=新结构。多边形[{ x:60， y:300 }, { x:160， y:300 }, { x:160， y:400 }, { x:60， y:400 }]，选择权； canvas.addpoly1.addpoly2； OldPoly1矩阵=poly1.calcTransformMatrix； var originalPoly2Matrix=poly2.calcTransformMatrix； poly2.matrix=原始poly2矩阵； 函数updatePoly2{ var newPoly1矩阵=poly1.calcTransformMatrix； var oldPoly1MatrixInverted=fabric.util.invertTransformoldPoly1Matrix； //newMatrix=oldMatrix*someMatrix //因此，someMatrix=newMatrix/oldMatrix=newMatrix*inverseoldMatrix； var diffMatrix=fabric.util.multiplytransformatricesnewpoly1矩阵，oldPoly1矩阵转换； var OldPoly2矩阵=poly2.0矩阵； //应用相同的someMatrix找出poly2的新变换矩阵。 var newPoly2Matrix=fabric.util.multiplyTransformMatricesoldPoly2Matrix，diffMatrix； var updatedPoints=poly2。获取“点” .mapfunctionp{ 返回新织物.Pointp.x-poly2.minX-poly2.width/2，p.y-poly2.minY-poly2.height/2； } .mapfunctionp{ 返回fabric.util.transformPointp，newPoly2Matrix； }; OldPoly1矩阵=新Poly1矩阵； poly2.去除； poly2=新织物。Polygon更新点，可选项； poly2.matrix=新的poly2矩阵； canvas.addpoly2； } 帆布{ 边框：1px实心； } 更新红色形状

---

将translateX和translateY计算从矩阵乘法更改为简单减法后，它工作正常。将代码发布在此处以供参考

var OldPoly1矩阵； var canvas=newfabric.canvas'c'； 变量srcpoptions={ 笔划：“蓝色”， 填充：， 类型：“src” }; 变量选项={ 笔划：“红色”， 填充：， 可选：false， 哈斯：错， 哈斯：错， 类型：“dest” }; var poly1=新结构。多边形[{ x:60， y:40 }, { x:160， y:40 }, { x:160， y:140 }, { x:60， y:140 }]，src选项； var poly2=新结构。多边形[{ x:60， y:300 }, { x:160， y:300 }, { x:160， y:400 }, { x:60， y:400 }]，选择权； canvas.addpoly1.addpoly2； OldPoly1矩阵=poly1.calcTransformMatrix； var originalPoly2Matrix=poly2.calcTransformMatrix； poly2.matrix=原始poly2矩阵； 函数updatePoly2{ var newPoly1矩阵=poly1.calcTransformMatrix； var oldPoly1MatrixInverted=fabric.util.invertTransformoldPoly1Matrix； //newMatrix=oldMatrix*someMatrix //因此，someMatrix=newMatrix/oldMatrix=newMatrix*inverseoldMatrix； var diffMatrix=fabric.util.multiplytransformatricesnewpoly1Matrix，oldPoly1MatricinVerted，true； diffMatrix[4]=新的Poly1矩阵[4]-旧的Poly1矩阵[4]； diffMatrix[5]=新多边形1矩阵[5]-旧多边形1矩阵[5]； var OldPoly2矩阵=poly2.calcTransformMatrix； //应用相同的someMatrix找出poly2的新变换矩阵。 var newPoly2Matrix=fabric.util.multiplyTransformMatricesoldPoly2Matrix，diffMatrix，true； newPoly2Matrix[4]=oldPoly2Matrix[4]+diffMatrix[4]； newPoly2Matrix[5]=oldPoly2Matrix[5]+diffMatrix[5]； var updatedPoints=poly2。获取“点” .mapfunctionp{ 返回新织物.Pointp.x-poly2.minX-poly2.width/2，p.y-poly2.minY-poly2.height/2； } .mapfunctionp{ 返回fabric.util.transformPointp，newPoly2Matrix； }; OldPoly1矩阵=新Poly1矩阵； poly2.去除； poly2=新织物。Polygon更新点，可选项； poly2.matrix=新的poly2矩阵； canvas.addpoly2； } 帆布{ 边框：1px实心； } 更新红色形状

---

如果要更新pol，请更新poly2

---

y1是否已修改？是。。。。。。。。。。。。。