FabricJS - 创建对象组，包括自定义扩展对象

我正在使用 Fabric JS 在画布上绘图。我创建了一个名为 LineArrow 的自定义对象，它扩展了fabric.Line对象并在末尾添加了一个箭头。这是基本代码和它工作的 JSFiddle https://jsfiddle.net/oyqw228o/9/

const LineArrow = fabric.util.createClass(fabric.Line, {
  type: 'line-arrow',

  initialize(element, options) {
    options || (options = {});
    this.callSuper('initialize', element, options);

    // Set default options
    this.set({
      hasBorders: false,
      hasControls: false,
      perPixelTargetFind: true,
    });
  },

  _render(ctx) {
    this.callSuper('_render', ctx);

    // do not render if width/height are zeros or object is not visible
    if (this.width === 0 || this.height === 0 || !this.visible) return;
    ctx.save();

    const xDiff = this.x2 - this.x1;
    const yDiff = this.y2 - this.y1;
    const angle = Math.atan2(yDiff, xDiff);
    ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
    ctx.rotate(angle);
    ctx.beginPath();
    // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
    ctx.moveTo(5, 0);
    ctx.lineTo(-5, 5);
    ctx.lineTo(-5, -5);
    ctx.closePath();
    ctx.fillStyle = this.stroke;
    ctx.fill();
    ctx.restore();
  },
});

这按预期呈现，但是我想要做的是在此对象的开头和结尾添加“锚点”，以允许人们更改线条。锚点应仅在选择该线时显示。这就是我希望它的外观：

这是一个 JSFiddle，试图渲染一组由自定义线和 2 个基本结构组成的组。Circle 对象https://jsfiddle.net/6v0s0h1x/3/

我收到错误Uncaught TypeError: o.setCoords is not a function。