class ArrowLine {
    constructor(){
        const points = [0,10,150,10]

        const triangleHeight = 16
        const lineStrokeWidth = 4
        // 直线尾部箭头
        this.endArrow = new fabric.Triangle({
              width: 20, // 由于旋转90°，此时是高度
              height: triangleHeight, // 由于旋转90°，此时是宽度 
              fill: '#5b9bd5', 
              left: points[2], 
              top: points[3] - triangleHeight/2 + lineStrokeWidth/2,
              strokeWidth:0, // 边框默认为1且无颜色，但会影响计算，所以设置为0
        });
        this.line = new fabric.Line(points, {
              stroke: '#5b9bd5',
              strokeWidth:4, // 边框宽度
        });
        // 以中心点为基础，顺时针旋转90°
        this.endArrow.rotate(90)
        // 以左下角为原点，注意：由于旋转90°，此时该点在左上角，目的：更方便控制位置
        this.endArrow.set({
            left : points[2], //以直线的终点x作为三角形的left
            originX: 'left', 
            originY: 'bottom' 
        })

        this.group = new fabric.Group([this.line,this.endArrow])
        this.type = 'arrowLine'
    }
}