Home FabricJS on('object:selected') doesn't trigger consistently for lines
Reply: 1

FabricJS on('object:selected') doesn't trigger consistently for lines

Andi Milhomme
1#
Andi Milhomme Published in 2017-11-14 15:52:42Z

I am currently building a simple line drawing tool using FabricJs and canvas.

DRAW mode: Draw lines using the mouse

DELETE mode: Click anywhere a line to delete it. Using the fabric js on('object:selected')

My issue is that DELETE mode is inconsistent, Clicking on the top half deletes the line, clicking on the bottom half doesn't do anything.

Am I missing something? I have tried everything.

Thanks for the help.

EDIT: ADDED snippet

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>

Durga
2#
Durga Reply to 2017-11-14 16:51:56Z

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>

use line.setCoords(); to set coordinate after setting line points.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318952 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO