Canvas FabricJS-在对象旋转事件上继续旋转

在使用对象：旋转事件函数时，我遇到了元素的奇怪行为。该元素以额外的角度连续旋转。看起来角度一直累积到上一个角度

基本上，当旋转一个红色的元素时，我试图实现的是黄色元素的正确位置和角度

这是。请尝试旋转红色元素

var canvas=this.\uu canvas=new fabric.canvas（'paper'）{
对：对
});
常数数据={
红色：{
前50名，
左:50,，
角度：-30，
宽度：300，
身高：200
},
黄色：{
前50名，
左:50,，
角度：20，
宽度：100，
身高：100
}
};
const黄色=新结构.Rect({
左：data.yellow.left，
顶部：data.yellow.top，
填充：“黄色”，
角度：data.yellow.angle，
宽度：data.yellow.width，
高度：data.yellow.height，
原文：“中心”，
原文：'中心'，
不透明度：.7
});
yellow.setPositionByOrigin（{x:yellow.getLeft（）+yellow.getWidth（）/2，y:yellow.getTop（）+yellow.getHeight（）/2}，'center'，'center'）；
fabric.Image.fromURL（'//images.sftcdn.net/images/t_优化，f_auto/p/85e6f558-9a68-11e6-bdf1-00163ed833e7/1312338326/slack logo.png'，函数（img）{
const patternSourceCanvas=new fabric.StaticCanvas（）；
patternSourceCanvas.enableRetinaScaling=false；
patternSourceCanvas.setBackgroundColor（'red'，patternSourceCanvas.renderAll.bind（patternSourceCanvas））；
patternSourceCanvas.setBackgroundImage（img，patternSourceCanvas.Renderal.bind（patternSourceCanvas）{
顶部：yellow.getTop（）-yellow.getWidth（）/2，
左：yellow.getLeft（）-yellow.getHeight（）/2，
宽度：黄色。getWidth（），
高度：黄色。getHeight（），
角度：黄色。getAngle（），
scaleX:1，
斯卡利：1，
原文：“中心”，
原文：'中心'，
});
var图案=新织物。图案({
资料来源：函数（）{
patternSourceCanvas.setDimensions({
宽度：data.red.width，
高度：data.red.height
});
patternSourceCanvas.renderAll（）；
返回patternSourceCanvas.getElement（）；
},
重复：“不重复”
});
const red=new fabric.Rect({
左：data.red.left，
顶部：data.red.top，
角度：data.red.angle，
填充：模式，
宽度：data.red.width，
高度：data.red.height，
原文：“中心”，
原文：'中心'，
patternSourceCanvas:patternSourceCanvas
});
red.setPositionByOrigin（{x:red.getLeft（）+red.getWidth（）/2，y:red.getTop（）+red.getHeight（）/2}，'center'，'center'）；
canvas.add（红色）；
canvas.add（黄色）；
on（'object:rendered'，function（））{
console.log（'Rednder'）
});
红色。on（'旋转'，函数（）{
UpdateLowPosition（）；
});
红色。on（'moving'，function（）{
UpdateLowPosition（）；
});
UpdateLowPosition（）；
函数updateLowPosition（）{
//在这里，我想用一些逻辑来确定正确的位置
//（左，上，角）的红色的背景图像位置，并应用这些
//黄色元素
log（'Yellow left top'，red，red.angle，red.getAngle（），Yellow.getLeft（），Yellow.getTop（））；
const shiftX=red.patternSourceCanvas.backgroundImage.left；
const shiftY=red.patternSourceCanvas.backgroundImage.top；
const backgroundAngle=red.patternSourceCanvas.backgroundImage.angle；
const redCenterPoint=red.getCenterPoint（）；
const newYellowPos=fabric.util.rotatePoint(
新织物。点（
黄色。getLeft（），
黄色。getTop（）
)，//不确定
新面料，点(
redCenterPoint.x，
红点
)，//不确定
fabric.util.degreestoradis（red.getAngle（））//不确定
);  
黄色。按原点设置位置(
{
x:newYellowPos.x，
y:newYellowPos.y
},
“中心”，
“中心”
);
黄色。旋转（黄色。getAngle（）+红色。getAngle（））。设置坐标（）；
canvas.renderAll（）；
}
}，{crossOrigin:'匿名'}）
此示例演示如何在fabricJS中以通用方式处理转换

您应该从红色矩形的中心找到相对位置。
将其保存在变量中

每个变换步骤，计算红色矩形变换矩阵，并使用该矩阵计算出画布中现在的相对位置

将黄色矩形放在那里，并使其成直角

我更新了示例，使其也可以使用scaleX和scaleY

如果你需要的话，它也可以用于倾斜

矩阵可以变换2d画布所能做的一切，因此您应该学习如何使用它们，它们通常提供解决方案和代码快捷方式


var canvas=this.\uu canvas=new fabric.canvas（'paper'）{
对：对
});
常数数据={
红色：{
前50名，
左:50,，
角度：-30，
宽度：300，
身高：200
},
黄色：{
前50名，
左:50,，
角度：20，
宽度：100，
身高：100
}
};
const yellow=new fabric.Rect({
左：data.yellow.left，
顶部：data.yellow.top，
填充：“黄色”，
角度：data.yellow.angle，
宽度：data.yellow.width，
高度：data.yellow.height，
原文：“中心”，
原文：'中心'，
不透明度：.7
});
yellow.setPositionByOrigin（{x:yellow.getLeft（）+yellow.getWidth（）/2，y:yellow.getTop（）+yellow.getHeight（）/2}，'center'，'center'）；
fabric.Image.fromURL（'//images.sftcdn.net/images/t_优化，f_au