javascript - ('object:selected' 上的 FabricJS)不会连续触发行

Question

我目前正在使用 FabricJs 和 Canvas 构建一个简单的线条绘制工具。

绘图模式: 使用鼠标绘制线条

DELETE 模式: 在任意位置单击一行以将其删除。 使用 fabric js on('object:selected')

我的问题是DELETE模式不一致，单击上半部分删除该行，单击下半部分不执行任何操作。

我错过了什么吗？我已经尝试了一切。

感谢您的帮助。

编辑:添加片段

var isDrawing = true;
var canvas = new fabric.Canvas('a', {
  selection: false
});

var grid = 30;

// create grid
//line
var line, isDown;


function createGrid(board) {
  for (var i = 0; i < (600 / grid); i++) {
    board.add(new fabric.Line([i * grid, 0, i * grid, 600], {
      stroke: '#000',
      selectable: false
    }));
    board.add(new fabric.Line([0, i * grid, 600, i * grid], {
      stroke: '#000',
      selectable: false
    }))
  }
}
//create grids
createGrid(canvas);

//Button Toggle

$("#draw").click(function() {
  isDrawing = true;
  DrawLine(canvas);
});
$("#erase").click(function() {
  isDrawing = false;
  EraseLine(canvas);
});

function DrawLine(board) {



  // add objects
  board.on('mouse:down', function(o) {

    isDown = true;
    var pointer = board.getPointer(o.e);
    var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 5,
      strokeDashArray: [5, 10],
      strokeLineCap: 'round',
      fill: '#005E7A',
      stroke: '#005E7A',
      originX: 'center',
      originY: 'center',
      hasControls: 'false',
      hasRotatingPoint: 'false',
      padding: 50,
      ///perPixelTargetFind: true,
      lockMovementX: true,
      lockMovementY: true,

    });
    line.setOptions({
      'selectable': false
    });
    board.add(line);
  });

  board.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = board.getPointer(o.e);
    line.set({
      x2: pointer.x,
      y2: pointer.y
    });
    board.renderAll();
  });

  board.on('mouse:up', function(o) {
    var pointer = board.getPointer(o.e);
    isDown = false;
    line.set({
      x2: Math.round(pointer.x / grid) * grid,
      y2: Math.round(pointer.y / grid) * grid
    });
    board.renderAll();
  });

}


function EraseLine(board) {

  board.off();

  line.setOptions({
    'selectable': true
  });
  var eraseHandler = function(o) {
    console.log(o);

    board.remove(o.target);

  };

  board.on('object:selected', eraseHandler);
  board.renderAll();

}

canvas {
  background-color: transparent;
  margin: 3px;
  width: 120px;
  height: 240px;
  border: 2px solid #ccc;
  padding-left: 0;
}

.boards {
  display: inline;
  padding-left: 0;
}

.boards canvas {
  list-style: none;
  display: inline-block;
  background-color: transparent;
  margin: 3px;
  width: 120px;
  height: 240px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<h1>Fabric Js On selected mode </h1>
<div class="boards">
  <canvas id="a" width="120" height="240"></canvas>
  <br>
  <button id="draw">
        Draw MOde
        </button>
  <button id="erase">
       Erase Mode
        </button>

Answer 1

var isDrawing = true;
var canvas = new fabric.Canvas('a', {
  selection: false
});

var grid = 30;

// create grid
//line
var line, isDown;


function createGrid(board) {
  for (var i = 0; i < (600 / grid); i++) {
    board.add(new fabric.Line([i * grid, 0, i * grid, 600], {
      stroke: '#000',
      selectable: false
    }));
    board.add(new fabric.Line([0, i * grid, 600, i * grid], {
      stroke: '#000',
      selectable: false
    }))
  }
}
//create grids
createGrid(canvas);

//Button Toggle

$("#draw").click(function() {
  isDrawing = true;
  DrawLine(canvas);
});
$("#erase").click(function() {
  isDrawing = false;
  EraseLine(canvas);
});

function DrawLine(board) {
  canvas.forEachObject(function(obj){
   obj.selectable = false;
  })
  // add objects
  board.on('mouse:down', function(o) {

    isDown = true;
    var pointer = board.getPointer(o.e);
    var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
    line = new fabric.Line(points, {
      strokeWidth: 5,
      strokeDashArray: [5, 10],
      strokeLineCap: 'round',
      fill: '#005E7A',
      stroke: '#005E7A',
      originX: 'center',
      originY: 'center',
      hasControls: 'false',
      hasRotatingPoint: 'false',
      padding: 50,
      ///perPixelTargetFind: true,
      lockMovementX: true,
      lockMovementY: true,
      selectable: false

    });
    board.add(line);
  });

  board.on('mouse:move', function(o) {
    if (!isDown) return;
    var pointer = board.getPointer(o.e);
    line.set({
      x2: pointer.x,
      y2: pointer.y
    });
    board.renderAll();
  });

  board.on('mouse:up', function(o) {
    var pointer = board.getPointer(o.e);
    isDown = false;
    line.set({
      x2: Math.round(pointer.x / grid) * grid,
      y2: Math.round(pointer.y / grid) * grid
    });
    line.setCoords();
    board.renderAll();
  });

}


function EraseLine(board) {

  board.off();

  line.setOptions({
    'selectable': true
  });
  canvas.forEachObject(function(obj){
   obj.selectable = true;
  })
  canvas.renderAll();
  var eraseHandler = function(o) {
    board.remove(o.target);
  };

  board.on('object:selected', eraseHandler);

}

canvas {
  background-color: transparent;
  margin: 3px;
  width: 120px;
  height: 240px;
  border: 2px solid #ccc;
  padding-left: 0;
}

.boards {
  display: inline;
  padding-left: 0;
}

.boards canvas {
  list-style: none;
  display: inline-block;
  background-color: transparent;
  margin: 3px;
  width: 120px;
  height: 240px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<h1>Fabric Js On selected mode </h1>
<div class="boards">
  <canvas id="a" width="120" height="240"></canvas>
  <br>
  <button id="draw">
        Draw MOde
        </button>
  <button id="erase">
       Erase Mode
        </button>

设置线点后使用line.setCoords();设置坐标。