在FabricJs中从Canvas中删除对象的问题

Question

我正在使用Fabricjs来创建绘图工具。我正在使用2.2版。 使用画布方法selection:created和selection:updated。我能够将像圆形和矩形的对象移除到线对象上。

以下是代码演示的JSFiddle link。

画一条线并尝试用橡皮擦将其移除。

var canvas = new fabric.Canvas('c', {
  selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;

var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
var triangle = new fabric.Triangle({
  width: 20,
  height: 30,
  fill: 'blue',
  left: 50,
  top: 50
});

canvas.add(circle, triangle);

$('#clear').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('clear');
  }
});
$('#line').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('line');
  }
});
$('#eraser').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('erase');
  }
});

var drawingPointer = {
  status: false,
  previousObj: false
};

function drawingOperation(operation) {

  if (drawingPointer.status == 'freedraw') {
    canvas.isDrawingMode = false;
  }

  if (operation == 'line') {
    console.log('Called to draw line');
    drawingPointer.status = 'line';
    canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
    canvas.hoverCursor = 'auto';
    return;
  }

  if (operation == 'erase') {
    drawingPointer.status = 'erase';
    canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
    return;
  }

  if (operation == 'clear') {
    drawingPointer.status = false;
    drawingPointer.previousObj = false;
    canvas.defaultCursor = 'auto';
    canvas.hoverCursor = 'auto';
  }
}

function handlerObjectSelection(o) {
  console.log(o.target);
  if (drawingPointer.status == 'erase') {
    console.log('Called from Erase Section');
    canvas.remove(o.target);
  }
}

function handleMouseMovement(o) {
  if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = false;
    drawingPointer.strightLine.set({
      'x2': pointer.x,
      'y2': pointer.y
    });
    canvas.renderAll();
  }
}

function handleMouseDown(o) {
  if (drawingPointer.status == 'line') {
    console.log('MouseDown from Line');
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = true;
    drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 3,
      originX: 'center',
      originY: 'center'
    });
    canvas.add(drawingPointer.strightLine);
    canvas.renderAll();
  }
}

function handleMouseUp(o) {
  if (drawingPointer.status == 'line') {
    console.log('MouseUp from Line');
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = false;
    drawingPointer.strightLine.set({
      'x2': pointer.x,
      'y2': pointer.y
    });
    canvas.renderAll();
    drawingPointer.strightLine = null;
  }
}

canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
  <div class="col-xs-10 col-xs-offset-2">
    <h3>Drawing Function</h3>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active">
        <input type="radio" name="options" id="clear" autocomplete="off" checked>
        <img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
      </label>

      <label class="btn btn-default">
        <input type="radio" name="options" id="line" autocomplete="off">
        <img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
      </label>

      <label class="btn btn-default">
        <input type="radio" name="options" id="eraser" autocomplete="off">
        <img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
      </label>
    </div>
  </div>
</div>

Answer 1

drawingPointer.strightLine.setCoords();

完成绘图后，您需要使用setCoords。

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('c', {
  selection: false
});
canvas.perPixelTargetFind = true;
canvas.targetFindTolerance = 4;

var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
var triangle = new fabric.Triangle({
  width: 20,
  height: 30,
  fill: 'blue',
  left: 50,
  top: 50
});

canvas.add(circle, triangle);

$('#clear').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('clear');
  }
});
$('#line').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('line');
  }
});
$('#eraser').on('change', function() {
  if ($(this).is(':checked')) {
    drawingOperation('erase');
  }
});

var drawingPointer = {
  status: false,
  previousObj: false
};

function drawingOperation(operation) {

  if (drawingPointer.status == 'freedraw') {
    canvas.isDrawingMode = false;
  }

  if (operation == 'line') {
    console.log('Called to draw line');
    drawingPointer.status = 'line';
    canvas.defaultCursor = 'url("https://image.ibb.co/dCkbWc/icon_straight.png") 0 16 ,auto';
    canvas.hoverCursor = 'auto';
    return;
  }

  if (operation == 'erase') {
    drawingPointer.status = 'erase';
    canvas.defaultCursor = canvas.hoverCursor = 'url("https://image.ibb.co/h2bGWc/icon_eraser.png") 2 12 ,auto';
    return;
  }

  if (operation == 'clear') {
    drawingPointer.status = false;
    drawingPointer.previousObj = false;
    canvas.defaultCursor = 'auto';
    canvas.hoverCursor = 'auto';
  }
}

function handlerObjectSelection(o) {
  console.log(o.target);
  if (drawingPointer.status == 'erase') {
    console.log('Called from Erase Section');
    canvas.remove(o.target);
  }
}

function handleMouseMovement(o) {
  if (drawingPointer.status == 'line' && drawingPointer.strightLine) {
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = false;
    drawingPointer.strightLine.set({
      'x2': pointer.x,
      'y2': pointer.y
    });
    canvas.renderAll();
  }
}

function handleMouseDown(o) {
  if (drawingPointer.status == 'line') {
    console.log('MouseDown from Line');
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = true;
    drawingPointer.strightLine = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 3,
      originX: 'center',
      originY: 'center'
    });
    canvas.add(drawingPointer.strightLine);
    canvas.renderAll();
  }
}

function handleMouseUp(o) {
  if (drawingPointer.status == 'line') {
    console.log('MouseUp from Line');
    var pointer = canvas.getPointer(o.e);
    drawingPointer.down = false;
    drawingPointer.strightLine.set({
      'x2': pointer.x,
      'y2': pointer.y
    });
    drawingPointer.strightLine.setCoords();
    canvas.renderAll();
    drawingPointer.strightLine = null;
  }
}

canvas.on('selection:created', handlerObjectSelection);
canvas.on('selection:updated', handlerObjectSelection);
canvas.on('mouse:move', handleMouseMovement);
canvas.on('mouse:down', handleMouseDown);
canvas.on('mouse:up', handleMouseUp);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300" style="border: 1px solid;margin: 10px;"></canvas>
<div class="row">
  <div class="col-xs-10 col-xs-offset-2">
    <h3>Drawing Function</h3>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active">
        <input type="radio" name="options" id="clear" autocomplete="off" checked>
        <img src="https://image.ibb.co/iedVrc/icon_cursor.png" height="16" width="16" />
      </label>

      <label class="btn btn-default">
        <input type="radio" name="options" id="line" autocomplete="off">
        <img src="https://image.ibb.co/dCkbWc/icon_straight.png" height="16" width="16" />
      </label>

      <label class="btn btn-default">
        <input type="radio" name="options" id="eraser" autocomplete="off">
        <img src="https://image.ibb.co/h2bGWc/icon_eraser.png" height="16" width="16" />
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;