如何正确保留三角形位置以在fabric.js中形成一条带箭头的箭头

Question

我正在尝试使用正常工作的线条和三角形绘制箭头。

现在，当我调整大小时，它仍能正常工作并正确保留三角形位置以便与线形成一个箭头但是当我尝试旋转它时，箭头会受到干扰。

我已经处理过事件以使其可以工作，但我想我错过了一些东西。

这里是fiddle已完成的工作。

代码： `

    var calcArrowAngle = function(x1, y1, x2, y2) {
    var angle = 0, x, y;
        x = (x2 - x1);
        y = (y2 - y1);
        if (x === 0) {
            angle = (y === 0) ? 0 : (y > 0) ? Math.PI / 2 : Math.PI * 3 / 2;
        } else if (y === 0) {
            angle = (x > 0) ? 0 : Math.PI;
        } else {
            angle = (x < 0) ? Math.atan(y / x) + Math.PI :
                (y < 0) ? Math.atan(y / x) + (2 * Math.PI) : Math.atan(y / x);
        }
        return (angle * 180 / Math.PI + 90);
    };

var logs = document.getElementById('logs');
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.selection = false;
var x1=50, y1=50, x2=150, y2=100;
var line = new fabric.Line([x1, y1, x2, y2], {
        stroke: 'blue',
        opacity: 1,
        strokeWidth: 2,
        selectable: true,
    left : x1,
     top : y1
    });
  //line.setControlsVisibility({'tl' : true,'tr' : true,'bl' : true,'br' : true,'ml' : false, 'mt' : false,'mr' : false,'mb' : false,'mtr' : false});

var centerX = (line.x1 + line.x2) / 2;
var centerY = (line.y1 + line.y2) / 2;
var deltaX = line.left - centerX;
var deltaY = line.top - centerY;
  var triangle = new fabric.Triangle({
    left : line.left - 10/2,
    top : line.top + 10,
    fill : 'blue',
    width : 20,
    height : 20,
    angle : calcArrowAngle(x2, y2, x1, y1),
    selectable : false
  });

    canvas.add(line, triangle);
  canvas.renderAll();
  canvas.observe('object:scaling', function (e) {
    var m = canvas.getActiveObject(); 
    logs.innerHTML = m.x1 + ',' + m.y1 + ',' + m.x2 + ', ' + m.y2;
    triangle.left = line.left - 10/2;
    triangle.top = line.top + 10;
    line.width *= line.scaleX;
    line.height *= line.scaleY;
    line.scaleY = line.scaleX = 1;

  });
  canvas.observe('object:moving', function (e) {
    triangle.left = line.left - 10/2;
    triangle.top = line.top + 10;
  });
  canvas.observe('object:rotating', function (e) {
    triangle.left = line.left - 10/2;
    triangle.top = line.top + 10;
  });`