FabricJS - カスタム拡張オブジェクトを含むオブジェクトグループの作成

Question

私はFabric JSを使用してキャンバスに描画しています。私はfabric.Lineオブジェクトを拡張し、最後に矢印を追加するLineArrowというカスタムオブジェクトを作成しました。ここで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があるこれは予想通り、しかし、私が何をしたいのか、人々が変更できるようにするには、このオブジェクトの開始と終了に「アンカーポイント」を追加することでレンダリングこの線。アンカーポイントは、行が選択されている場合にのみ表示する必要があります。ここで

はJSFiddleは、カスタムラインと2基本的なfabric.Circleからなるグループオブジェクト https://jsfiddle.net/6v0s0h1x/3/

私はエラーを取得をレンダリングしようとしている：これは私がそれを見てみたい方法ですUncaught TypeError: o.setCoords is not a function。

Answer 1

2つの円を作成してキャンバスに追加します。線オブジェクトを選択するときは、visible = trueを使用して円を表示させる必要があります。 そして、選択した線の点（x1、y1、x2、y2）から左と上の円を設定します。

円を移動する場合、左/上からポイントを取得し、選択したラインポイントに設定する必要があります。

選択した行で、サークルを無効にする選択を解除します。

ここはjsFiddleです。