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

Question

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

的JSFiddle

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个基本fabric.Circle对象组成的组https://jsfiddle.net/6v0s0h1x/3/

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

Answer 1

创建两个圆圈并添加到画布。选择线对象时，需要使用visible = true使圆圈可见。 并从选定的线点（x1，y1，x2，y2）设置圆圈的左侧和顶部。

在移动圆圈时，您需要从左/上获取点并设置为选定的线点。

在选定的行上取消选择禁用圈子。

这是jsFiddle。