javascript - Fabric js免费绘制矩形结果重复

Question

嘿伙计们，我正在使用 Fabric js 创建一个白板应用程序，但是每当用户绘制一个矩形并选择拖动它时，我都会遇到这个问题，它实际上会拖动另一个不可见的矩形，而不是原始的矩形，这在我拖动矩形后非常奇怪复制不可见的矩形，然后我可以自由拖动可见的矩形..这很糟糕。我实际上确定这是问题所在，因为在我绘制矩形之后，我做了 canvas.remove(rect) 并且它确实删除了矩形，但是不可见的矩形仍然留在那里..这是代码:

$('#square').click(function () {
    tool = 'square';
    canvas.selection = false;
    changeStatus(false);
    //register mouse event
    // canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.color = 'transparent';
    canvas.isDrawingMode = true;
    canvas.on('mouse:down', onMouseDown);
    canvas.on('mouse:move', onMouseMove);
    canvas.on('mouse:up', onMouseUp);
});
$("#eraser").click(function()
{
    tool = 'eraser';
    canvas.selection = true;
    canvas.isDrawingMode = false;
    changeStatus(true);
    //remove mouse event
    canvas.off('mouse:down', onMouseDown);
    canvas.off('mouse:move', onMouseMove);
    canvas.off('mouse:up', onMouseUp);
}); 
function onMouseDown(o) {
      console.warn('clicked');
      isMouseDown = true;
      var pointer = canvas.getPointer(o.e);
      if (tool == 'square') {
          rect = new fabric.Rect({
              left: pointer.x,
              top: pointer.y,
              width: 0,
              height: 0,
              stroke: 'red',
              strokeWidth: 3,
              selectable: false,
              fill: ''
          });
          canvas.add(rect);
      }
  }
function onMouseMove(o) {
    if (!isMouseDown) {
        return;
    }
    var pointer = canvas.getPointer(o.e);
    if (tool == 'square') {
        rect.set({
            width: (Math.abs((pointer.x - rect.get('left')))),
            height: (Math.abs((pointer.y - rect.get('top'))))
        });
        canvas.renderAll();
    }
}
function onMouseUp(o) {
    if (tool == 'square') {
        rect.setCoords();
        console.log(rect);
    }
    isMouseDown = false;
}

只是为了澄清一点

Answer 1

canvas.freeDrawingBrush.color = 'transparent';
canvas.isDrawingMode = true;

canvas.isDrawingMode = true; 这里绘图模式处于打开状态并且颜色是透明的，因此它不可见，并根据您的鼠标移动创建另一个边界框(铅笔路径对象)。

var canvas = new fabric.Canvas('c'),isMouseDown,tool;
$('#square').click(function () {
  tool = 'square';
  canvas.selection = false;
  changeStatus(false);
  //register mouse event
  // canvas.isDrawingMode = true;
  //canvas.freeDrawingBrush.color = 'transparent';
  //canvas.isDrawingMode = false;
  canvas.on('mouse:down', onMouseDown);
  canvas.on('mouse:move', onMouseMove);
  canvas.on('mouse:up', onMouseUp);
});
$("#select").click(function()
{
  tool = 'select';
  canvas.selection = true;
  canvas.isDrawingMode = false;
  changeStatus(true);
  //remove mouse event
  canvas.off('mouse:down', onMouseDown);
  canvas.off('mouse:move', onMouseMove);
  canvas.off('mouse:up', onMouseUp);
}); 
function onMouseDown(o) {
    console.warn('clicked');
    isMouseDown = true;
    var pointer = canvas.getPointer(o.e);
    if (tool == 'square') {
        rect = new fabric.Rect({
            left: pointer.x,
            top: pointer.y,
            width: 0.1,
            height: 0.1,
            stroke: 'red',
            strokeWidth: 3,
            selectable: false,
            fill: ''
        });
        canvas.add(rect);
    }
}

function changeStatus(val){
  canvas.forEachObject(function (obj){
   obj.selectable = val;
  })
  canvas.renderAll();
 }
function onMouseMove(o) {
  if (!isMouseDown) {
      return;
  }
  var pointer = canvas.getPointer(o.e);
  if (tool == 'square') {
      rect.set({
          width: (Math.abs((pointer.x - rect.left))),
          height: (Math.abs((pointer.y - rect.top)))
      });
      canvas.renderAll();
  }
}
function onMouseUp(o) {
  if (tool == 'square') {
      rect.setCoords();
      console.log(rect);
  }
  isMouseDown = 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.6.7/fabric.js"></script>
<button id='square'>square</button>
<button id='select'>select</button>
<canvas id='c' width=400 height=400></canvas>