Javascript Fabric JS多段线点更新问题

我对多段线点的更新有问题

我想能够移动我的箭头，也能改变它的两点

当我移动箭头（左，上）时，点不会更新。 所以我手动更新它们，问题就出现了

对我来说，也许我错了，我的点计算是好的，但织物显示了相反的结果

我制作了一个JSFIDLE复制了这个问题：

const calcNewAngle=（{x1，y1，x2，y2}）=>{
常数宽度=数学绝对值（数学最大值（x1，x2）-数学最小值（x1，x2））；
常数高度=数学绝对值（数学最大值（y1，y2）-数学最小值（y1，y2））；
让θ；
if（x1=y2）{
θ=数学atan（-高度/宽度）；
}否则如果（x1>=x2&&y1{
常数角=钙角（{x1，y1，x2，y2}）；
常数headlen=8；
返回[
{
x:x1，
y:y1，
},
{
x:x2，
y:y2，
},
{
x:x2-标题*数学cos（角度-数学PI/2），
y:y2-头条*Math.sin（角度-Math.PI/2），
},
{
x:x2+头条*数学cos（角度），
y:y2+headlen*Math.sin（角度），
},
{
x:x2-头条*数学cos（角度+数学PI/2），
y:y2-标题*数学sin（角度+数学PI/2），
},
{
x:x2，
y:y2，
},
];
};
常量getX1Y1X2Y2=（点数）=>{
返回{
x1:点[0].x，
y1：点[0]。y，
x2：点[1].x，
y2：点[1]。y，
};
};
常量更新箭头=（e、画布、箭头、索引）=>{
const mousePos=canvas.getPointer（e）；
常数{点}=箭头；
点[index].x=mousePos.x；
点[index].y=mousePos.y；
设置（“点”，设置箭头点（getX1Y1X2Y2（点））；
};
const createControl=（{canvas，index，arrow}）=>{
常量左=箭头。点[索引].x；
const top=arrow.points[index].y；
const control=新结构。循环({
指数
左边
顶部
半径：5，
冲程宽度：1，
哈斯：错，
笔划：“rgba（0,0255,1）”，
填写：“rgba（255255,1）”，
原文：“中心”，
原创：“中心”，
});
control.setControlsVisibility({
基本法:错,，
比尔：错，
mb：错，
ml：错，
mr：错，
mt：错，
tl：错，
tr：错，
地铁：错，
});
控件上（“移动”，（e）=>updateArrow（e，画布，箭头，索引））；
返回控制；
};
常量handleMoving=（e、画布、控件）=>{
常量{target}=e.transform；
如果（！target.alreadyLogg）{
target.alreadyLogg=true；
log（“handleMoving”，target.points）；
controls.forEach（（control）=>control.set（“可见”，false））；
}
};
常量handleMoved=（e、画布、控件）=>{
console.log（“###########################”；
常数{target，transform}=e；
const{left:originLeft，top:originTop}=transform.original；
常量{left:newLeft，top:newTop，points}=target；
const leftDiff=newLeft-originLeft；
常数topDiff=newTop—原始Top；
log（{originLeft，newLeft，leftDiff，originTop，newTop，topDiff}）；
log（“pointsBeforeManualUpdate”，getX1Y1X2Y2（points））；
常数x1=点[0]。x+leftDiff；
常数y1=点[0]。y+topDiff；
常数x2=点[1]。x+leftDiff；
常数y2=点[1]。y+topDiff；
set（“points”，setArrowPoints（{x1，y1，x2，y2}））；
log（“pointsAfterManualUpdate”，getX1Y1X2Y2（target.points））；
控件。forEach（（控件）=>{
const{index}=控制；
const leftControl=target.points[index].x；
const topControl=target.points[index].y；
控件集({
可见：对，
左：左控制，
顶部：顶部控制，
});
});
target.alreadyLogg=false；
};
常量createArrow=（{canvas，points}）=>{
常数箭头点=设置箭头点（点）；
常量箭头=新结构.多段线（箭头点{
冲程宽度：2，
笔划：“rgba（0,0,0,1）”，
填写：“rgba（0,0,0,1）”，
perPixelTargetFind：对，
});
arrow.setControlsVisibility({
基本法:错,，
比尔：错，
mb：错，
ml：错，
mr：错，
mt：错，
tl：错，
tr：错，
地铁：错，
});
const control1=createControl（{canvas，索引：0，arrow}）；
constControl2=createControl（{canvas，index:1，arrow}）；
arrow.on（“移动”（e）=>handleMoving（e，canvas，[control1，control2]）；
arrow.on（“moved”，（e）=>handleMoved（e，canvas，[control1，control2]）；
canvas.add（箭头）；
canvas.add（control1）；
canvas.add（control2）；
返回箭头；
};
（功能（）{
const canvas=（this.\uu canvas=new fabric.canvas（“c”{
宽度：1500，
身高：1000，
}));
常量arrowObj=createArrow({
帆布，
点：{x1:50，y1:50，x2:200，y2:200}，
});
})();

提前感谢您的帮助