Question

嘿家伙所以即时创建一个使用面料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;这里的绘图模式已打开且颜色是透明的，因此它根据您的鼠标移动（铅笔路径对象）不可见并创建另一个边界框。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

fabric js free drawing rectangle结果重复

1 个答案: