Javascript fabric.js箭头捕捉到网格

我已经修改了一些代码，使用Fabric.js将一条线捕捉到网格，如下所示。我想让它变成一支箭。我似乎无法使箭头（三角形）正确移动。我一直试图添加一个三角形作为箭头来破坏代码，所以我删除了所有试图添加它的代码。请帮我添加箭头，谢谢

var canvas=newfabric.canvas（'c'，{selection:false}）；
var网格=50；
对于（变量i=0；i<（600/网格）；i++）{
add（newfabric.Line（[i*grid，0，i*grid，600]，{stroke:'#ccc'，可选：false}））；
添加（新的fabric.Line（[0，i*grid，600，i*grid]，{stroke:'#ccc'，可选：false}））
}
无功线路，isDown；
canvas.on（'mouse:down'，函数（o）{
画布。删除（行）；
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[Math.round（pointer.x/grid）*grid，Math.round（pointer.y/grid）*grid，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：5，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
set（{x2:pointer.x，y2:pointer.y}）；
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
var pointer=canvas.getPointer（o.e）；
isDown=假；
line.set（{x2:Math.round（pointer.x/grid）*grid，y2:Math.round（pointer.y/grid）*grid}）；
canvas.renderAll（）；
});
抓住他们了！对我来说，诀窍是按照小提琴中的方法定义三角形的中心：

在哪里

    centerX = (line.x1 + line.x2) / 2;
    centerY = (line.y1 + line.y2) / 2;
    deltaX = line.left - centerX;
    deltaY = line.top - centerY;


window.onload=function（）{
var canvas=new fabric.canvas（'c'{
选择：false
});
var网格=50；
对于（变量i=0；i<（600/网格）；i++）{
canvas.add（新的fabric.Line（[i*grid，0，i*grid，600]{
笔划：“#ccc”，
可选：false
}));
canvas.add（新的fabric.Line（[0，i*grid，600，i*grid]{
笔划：“#ccc”，
可选：false
}))
}
无功线，三角形，isDown；
函数计算器（x1，y1，x2，y2）{
var角度=0，
x、 y；
x=（x2-x1）；
y=（y2-y1）；
如果（x==0）{
角度=（y==0）？0:（y>0）？Math.PI/2:Math.PI*3/2；
}如果（y==0），则为else{
角度=（x>0）？0:Math.PI；
}否则{
角度=（x<0）？Math.atan（y/x）+Math.PI：（y<0）？Math.atan（y/x）+（2*Math.PI）：Math.atan（y/x）；
}
返回（角度*180/Math.PI+90）；
}
canvas.on（'mouse:down'，函数（o）{
画布。删除（直线、三角形）；
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[Math.round（pointer.x/grid）*grid，Math.round（pointer.y/grid）*grid，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：5，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
centerX=（line.x1+line.x2）/2；
centerY=（line.y1+line.y2）/2；
deltaX=line.left-centerX；
deltaY=line.top-centerY；
三角形=新织物。三角形({
左：line.get（'x1'）+deltaX，
顶部：line.get（'y1'）+deltaY，
原文：“中心”，
原文：'中心'，
哈斯：错，
哈斯：错，
lockScalingX：对，
lockScalingY：是的，
是的，
点类型：“箭头\开始”，
角度：-45，
宽度：20，
身高：20，
填充：“红色”
});
画布。添加（直线、三角形）；
});
canvas.on（'mouse:move'，函数（o）{
//函数角度（x1，y1，x2，y2）{angle=Math.atan（（y2-y1）/（x2-x1））*180/Math.PI+90；返回角度；}
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
三角形集合({
“左”：指针.x+deltaX，
“top”：指针.y+deltaY，
“角度”：距角（第x1行、第y1行、第x2行、第y2行）
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
var pointer=canvas.getPointer（o.e）；
isDown=假；
SnapdxCoordinate=数学圆（指针.x/网格）*网格；
SnapdyCoordinate=数学圆（指针.y/网格）*网格；
SnapdxCoordinatorRowHead=数学圆（（指针.x+deltaX）/grid）*网格；
SnapdyCoordinatorRowHead=数学圆（（指针y+deltaY）/grid）*网格；
line.set({
x2:X坐标，
y2:snapdycoordination
});
三角形集合({
“左”：snapdxCoordinatorRowhead，
“顶部”：SnapdyCoordinatorRowhead，
“角度”：距角（第x1行、第y1行、第x2行、第y2行）
});
canvas.renderAll（）；
});
}
您需要添加用于创建箭头的代码，并解释任何错误。在StackOverflow，我们更愿意解决现有的问题，而不是给出全新的解决方案。我们希望您了解您之前的尝试有什么问题。
    centerX = (line.x1 + line.x2) / 2;
    centerY = (line.y1 + line.y2) / 2;
    deltaX = line.left - centerX;
    deltaY = line.top - centerY;