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

Question

我正在使用 Fabric JS 在 Canvas 上绘图。我创建了一个名为 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();
  },
});

这按预期渲染，但是我想要做的是将“ anchor ”添加到该对象的开头和结尾，以允许人们更改线条。仅当选择了线时才应显示 anchor 。这就是我想要的样子:

这是一个 JSFiddle 尝试渲染一组由自定义线和 2 个基本织物组成的组。圆形对象 https://jsfiddle.net/6v0s0h1x/3/

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

Answer 1

创建两个圆圈并添加到 Canvas 。当您选择一条线对象时，您需要使用 visible = true 使圆可见。并从选定的线点(x1，y1，x2，y2)设置圆的左侧和顶部。

移动圆时，您需要从左侧/顶部获取点并将其设置为选定的线点。

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

这里是jsFiddle .