Javascript fabricjs中的箭头

我正在尝试使用fabricjs创建箭头形状。到目前为止，我最好的方法是添加一条直线和一个三角形，并将它们组合成一个组合组。然而，问题是，当我调整箭头的大小时，箭头会被拉伸，这不是一个好的效果

我想问的是，如何在fabricjs上创建一个箭头对象，该对象只能纵向调整大小，而无需拉伸箭头。

html，正文
{
高度：100%；最小高度：100%；
宽度：100%；最小宽度：100%；
背景色：透明；
保证金：0；
}
按钮
{
高度：44px；
保证金：0；
}
画
添加矩形
加圈
添加三角形
添加行
添加箭头
清楚的
拯救
负载
去除
fabric.Object.prototype.toObject=（函数（toObject）
{
返回函数（）
{
返回fabric.util.object.extend（toObject.call）（this），
{
id:this.id，
});
};
})（fabric.Object.prototype.toObject）；
fabric.LineArrow=fabric.util.createClass（fabric.Line{
类型：“lineArrow”，
初始化：函数（元素、选项）{
选项| |（选项={}）；
this.callSuper（'initialize'，元素，选项）；
},
toObject:function（）{
返回fabric.util.object.extend（this.callSuper（'toObject'）；
},
_渲染：函数（ctx）{
这个.callSuper（“'u render'，ctx”）；
//如果宽度/高度为零或对象不可见，则不渲染
if（this.width==0 | | this.height==0 | | |！this.visible）返回；
ctx.save（）；
var xDiff=this.x2-this.x1；
var yDiff=this.y2-this.y1；
变量角度=数学atan2（yDiff，xDiff）；
ctx.translate（（this.x2-this.x1）/2，（this.y2-this.y1）/2）；
ctx.旋转（角度）；
ctx.beginPath（）；
//将10px移动到线的前面以开始箭头，这样它就不会在前面显示方形线端（0,0）
ctx.moveTo（10,0）；
ctx.lineTo（-20,15）；
ctx.lineTo（-20，-15）；
ctx.closePath（）；
ctx.fillStyle=此.stroke；
ctx.fill（）；
ctx.restore（）；
}
});
fabric.LineArrow.fromObject=函数（对象，回调）{
回调和回调（新的fabric.LineArrow（[object.x1，object.y1，object.x2，object.y2]，object））；
};
fabric.LineArrow.async=true；
var canvas=newfabric.canvas（'c'）；
canvas.isDrawingMode=false；
canvas.freeDrawingBrush.width=5；
设置颜色（“红色”）；
var sendToApp=函数（_键，_值）
{
var iframe=document.createElement（“iframe”）；
setAttribute（“src”，_key+”：######“+_val”）；
document.documentElement.appendChild（iframe）；
iframe.parentNode.removeChild（iframe）；
iframe=null；
};
canvas.on（'object:selected'，函数（选项）
{
if（options.target）
{
//console.log（'选择了对象！'，options.target.type）；
var sel=document.getElementById（“选定”）；
sel.style.visibility=“可见”；
sendToApp（“对象：选定的”、“已选择的”）；
}
});
canvas.on（'selection:cleared'，函数（选项）
{
//console.log（'selection cleared'）；
var sel=document.getElementById（“选定”）；
sel.style.visibility=“隐藏”；
sendToApp（“选择：清除”和“”）；
});
canvas.on（'object:modified'，函数（选项）
{
if（options.target）
{
//console.log（'修改了对象！'，options.target.type）；
sendToApp（“对象：已修改的”、”）；
}
});
canvas.on（'object:added'，函数（选项）
{
if（options.target）
{
if（typeof options.target.id==“未定义”）
{
options.target.id=1337；
}
//console.log（'添加了对象！'，options.target.type）；
sendToApp（“对象：已添加“，”）；
}
});
canvas.on（'object:removed'，函数（选项）
{
if（options.target）
{
//console.log（'对象已删除！'，options.target.type）；
sendToApp（“对象：已删除”，“已删除”）；
}
});
addEventListener（'resize'，resizeCanvas，false）；
函数resizeCanvas（）
{
canvas.setHeight（window.innerHeight）；
canvas.setWidth（window.innerWidth）；
canvas.renderAll（）；
}
函数颜色（）
{
返回canvas.freedrawingprush.color；
}
函数setColor（颜色）
{
canvas.freeDrawingBrush.color=颜色；
}
函数toggleDraw（）
{
setDrawingMode（！canvas.isDrawingMode）；
}
函数设置绘图模式（isDrawingMode）
{
canvas.isDrawingMode=isDrawingMode；
var btn=document.getElementById（“绘图模式”）；
btn.innerHTML=canvas.isDrawingMode？“绘图”：“绘图”；
sendToApp（“模式”，canvas.isDrawingMode？“绘图”：“绘图”）；
}
函数setLineControls（行）
{
行。setControlVisible（“tr”，假）；
line.setControlVisible（“tl”，false）；
line.setControlVisible（“br”，false）；
行。setControlVisible（“bl”，假）；
line.setControlVisible（“ml”，false）；
行。setControlVisible（“mr”，假）；
}
函数createLine（点）
{
var线=新结构线（点，
{
冲程宽度：5，
笔划：颜色（），
原文：“中心”，
原文：'中心'，
lockScalingX：对，
//lockScalingY:错，
});
设置行控件（行）；
回流线；
}
函数createArrowHead（点）
{
var头长=15，
x1=点[0]，
y1=点[1]，
x2=点[2]，
y2=点[3]，
dx=x2-x1，
dy=y2-y1，
角度=数学常数2（dy，dx）；
角度*=180/Math.PI；
角度+=90；
var三角形=新结构。三角形({
角度:角度,，
填充：颜色（），
顶部：y2，
左：x2，
高度：头长，
宽度：头长，
原文：“中心”，
原文：'中心'，
//lockScalingX:错误，
//lockScalingY：是的，
});
返回三角形；
}
函数addRect（）
{
add（newfabric.Rect（{left:100，top:100，fill:color（），width:50，height:50}））；
}
函数addCircle（）
{
添加（新的fabric.Circle（{left:150，top:150，fill:color（），radius:50/2}））；
}
函数addTriangle（）
{
add（newfabric.Triangle（{left:200，top:200，fill:color（），height:50，width:46}））；
}
函数addLine（）
{
变量线=c
var angle = Math.atan2(toy - fromy, tox - fromx);

var headlen = 15;  // arrow head size

// bring the line end back some to account for arrow head.
tox = tox - (headlen) * Math.cos(angle);
toy = toy - (headlen) * Math.sin(angle);

// calculate the points.
var points = [
    {
        x: fromx,  // start point
        y: fromy
    }, {
        x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
        y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
    },{
        x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2), 
        y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
    }, {
        x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
        y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
    },{
        x: tox + (headlen) * Math.cos(angle),  // tip
        y: toy + (headlen) * Math.sin(angle)
    }, {
        x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
        y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
    }, {
        x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
        y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
    }, {
        x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
        y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
    },{
        x: fromx,
        y: fromy
    }
];

var obj = canvas.getActiveObject();
var width = obj.getWidth();
var height = obj.getHeight;
var top = obj.getTop();