fabric.js canvasを使用してカスタムシェイプをトグル/選択/削除する方法

Question

私はKrunal Shah/Thirdrocktechknoが提供する答えをhow to free draw using fabric-jsで使用しています。これはうまくいきます（少なくとも私はさまざまなシェイプを切り替えて、キャンバス）しかし、私はいくつかを把握しようとしています。異なる形状の間

• トグル（サークル/ライン/矢印/平方）その後、このより好ましい方法がある場合：

  は、これは私が形を切り替えるために持っているものですが、私は回すことができませんそれらオフ個別に設定、のみが異なる形状に切り替えるとき：

HTML：

<button id="line" class="btn btn-info">Straight Line</button> 
<button id="circle" class="btn btn-info">Circle</button> 
<button id="squrect" class="btn btn-info">Square/Rectangle</button> 
<button id="arrow" class="btn btn-info">Arrow</button> 

JSを：それは描画を停止するよう

// Tried this to disable/untoggle the shape 
var lineOn = false; 
$("#line").click(function(){ 
    if(!lineOn){ 
     lineOn = true; 
     canvas.isDrawingMode = false; 
     var line = new Line(canvas); 
    } else if(lineOn = true){ 
     lineOn = false; 
     $(Line(canvas)).unbind(); 
    } 
}); 

$("#circle").click(function(){ 
    canvas.isDrawingMode = false; 
    var circle = new Circle(canvas); 
}); 

$("#squrect").click(function(){ 
    canvas.isDrawingMode = false; 
    var squrect = new Rectangle(canvas); 
}); 

$("#arrow").click(function(){ 
    canvas.isDrawingMode = false; 
    var arrow = new Arrow(canvas); 
}); 

• バインド解除/無効にする方法/形状をオフに？
  が、私はそれを使用する方法がわからない、これを見ましたが、：

Line.prototype.disable =機能（）{ をthis.isDrawing =偽; }

• どのように私はグループの選択として、これらの形状を削除することができます（私はgetSelection関数を作成しようとしたとの質問を検索しました、Googleで検索、およびWikiをチェックしますが、私はそれを理解していませんよか。。何かが欠けてactiveGroupの方法は、私はこれを使用して、一度に1つのオブジェクトを削除することができるよ関数が定義されていない状態：

$（「＃削除」（）関数（）{キャンバスをクリックしてください。 .isDrawingMode = false; deleteObjects（）;}）;

function deleteObjects(){ 
    var activeObject = canvas.getActiveObject(); 
    if (activeObject) { 
     canvas.discardActiveObject(); 
     canvas.remove(activeObject); 
     canvas.remove(Line); 
     canvas.remove(Circle); 
     canvas.remove(Rectangle); 
     canvas.remove(Arrow); 
    } else if (canvas.getActiveGroup()) { 
     canvas.getActiveGroup().forEachObject(function(a) { 
      canvas.remove(a); 
     }); 
     canvas.discardActiveGroup(); 
    } 
} 

しかし、私はライン/サークル/などのように色を変えることはできません。私が次のような選択モードに入ると、設定されている線/円の形状が、マウスをクリックしたとき（フリードローモードでも）図形を描き続けると、選択ボックスも表示されますが、削除しようとすると選択は、それが添付イベントを削除する

$("#select").click(function(){ 
    canvas.isDrawingMode = false; 
    this.isDrawing = false; 
    canvas.selection = true; 
}); 

Answer 1

canvas.off('mouse:down'); 
canvas.off('mouse:up'); 
canvas.off('mouse:move'); 

使用canvas.off方法を動作しません。あなたはキャンバスにイベントを登録していますが、選択/自由な図面の間にキャンバスを削除しないので、ツールを描画しています。チェックが更新されましたjsFiddle