FabricJs "DrawModeボタン"で描画できない

Question

ボタンをクリックしてから矩形を描くことができます。

Javascriptを：

$("#select").click(function() { 
    DrawingRectangle = false; 
}); 
$("#draw").click(function() { 
    DrawingRectangle = true; 
    draw(); 
}); 

function draw() { 
    if (DrawingRectangle == true) { 
     canvas.on('mouse:down', function(o) { 
      var pointer = canvas.getPointer(o.e); 
      isDown = true; 
      origX = pointer.x; 
      origY = pointer.y; 

      rectangle = new fabric.Rect({ 
       left: origX, 
       top: origY, 
       fill: 'transparent', 
       stroke: 'red', 
       strokeWidth: 3, 
      }); 
      canvas.add(rectangle); 
     }); 

     canvas.on('mouse:move', function(o) { 
      if (!isDown) return; 
      var pointer = canvas.getPointer(o.e); 
      if (origX > pointer.x) { 
       rectangle.set({ 
        left: Math.abs(pointer.x) 
       }); 
      } 
      if (origY > pointer.y) { 
       rectangle.set({ 
        top: Math.abs(pointer.y) 
       }); 
      } 

      rectangle.set({ 
       width: Math.abs(origX - pointer.x) 
      }); 
      rectangle.set({ 
       height: Math.abs(origY - pointer.y) 
      }); 
      canvas.renderAll(); 
     }); 

     canvas.on('mouse:up', function(o) { 
      isDown = false; 
      DrawingRectangle = false; 
     }); 
    } 
} 

HTML：

<canvas id="paper" width="800" height="300" style="border:1px solid #ccc;position: absolute; z-index : 1"></canvas> 
<li align="center"><button id="draw">Draw ROI</button></li> 
<li align="center"><button id="select">Select ROI(s)</button></li> 

IF文でコードが解雇されることはありませんなぜ私は知りません。 私はcanvas.offを使用していると考えていましたが、どのように動作するのかわかりません。

私の警告があまりにも表示されないので、私はDrawingRectangleが決して真ではないと思います。

Answer 1

キャンバスの位置は絶対で、Z-インデックスは1です。ボタンの上部に表示されます。そのボタンはクリックできませんでした。 canvas.onとcanvas.offを使用してイベントを登録できます。 Check。

var canvas = new fabric.Canvas('paper'); 
 
var isDown = false; 
 
$("#select").click(function() { 
 
    DrawingRectangle = false; 
 
    canvas.selection = true; 
 
    canvas.off('mouse:down'); 
 
    canvas.off('mouse:move'); 
 
    canvas.off('mouse:up'); 
 
    changeSelectableStatus(true); 
 
}); 
 

 
$("#draw").click(function() { 
 
    canvas.selection = false; 
 
    draw(); 
 
    changeSelectableStatus(false); 
 
}); 
 

 
function changeSelectableStatus(val) { 
 
    canvas.forEachObject(function(obj) { 
 
     obj.selectable = val; 
 
    }) 
 
    canvas.renderAll(); 
 
} 
 

 
function draw() { 
 
    canvas.on('mouse:down', onMouseDown); 
 
    canvas.on('mouse:move', onMouseMove); 
 
    canvas.on('mouse:up', onMouseUp); 
 
} 
 

 
function onMouseDown(o) { 
 
    var pointer = canvas.getPointer(o.e); 
 
    isDown = true; 
 
    origX = pointer.x; 
 
    origY = pointer.y; 
 

 
    rectangle = new fabric.Rect({ 
 
     left: origX, 
 
     top: origY, 
 
     fill: 'transparent', 
 
     stroke: 'red', 
 
     strokeWidth: 3, 
 
     selectable: false 
 
    }); 
 
    canvas.add(rectangle); 
 
} 
 

 
function onMouseMove(o) { 
 
    if (!isDown) return; 
 
    var pointer = canvas.getPointer(o.e); 
 
    if (origX > pointer.x) { 
 
     rectangle.set({ 
 
      left: Math.abs(pointer.x) 
 
     }); 
 
    } 
 
    if (origY > pointer.y) { 
 
     rectangle.set({ 
 
      top: Math.abs(pointer.y) 
 
     }); 
 
    } 
 

 
    rectangle.set({ 
 
     width: Math.abs(origX - pointer.x) 
 
    }); 
 
    rectangle.set({ 
 
     height: Math.abs(origY - pointer.y) 
 
    }); 
 
    canvas.renderAll(); 
 
}; 
 

 
function onMouseUp(o) { 
 
    rectangle.setCoords(); 
 
    isDown = false; 
 
    DrawingRectangle = false; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script> 
 
<canvas id="paper" width="800" height="300" style="border:1px solid #ccc;"></canvas> 
 
<li align="center"><button id="draw">Draw ROI</button></li> 
 
<li align="center"><button id="select">Select ROI(s)</button></li>