fabric.js 캔버스를 사용하여 사용자 정의 모양을 전환/선택/삭제하는 방법

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 기능을 만들 시도하고 질문을 검색 한 인터넷 검색 및 위키를 확인하지만 난 단지 그것을 이해하거나 아니에요 그룹 선택으로 이러한 모양을 삭제할 수 있습니다 방법

• .

$ ("# 삭제") ((기능을 클릭) {캔버스 :..이를 사용할 때 뭔가 빠진 함수가 정의되지되는 activeGroup를 방법 상태 I는 한 번에 하나의 개체를 삭제할 수 있어요 .isDrawingMode = false;

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