Monday, 19 August 2019

Fabricjs isolate object count by color

I have a counter that tallies the total number of objects on canvas, but I want to isolate it to count by object color. Can canvas.getObjects().length; get objects by color?

var canvas = new fabric.Canvas('c');
var iconTriangle = new fabric.Triangle({
  width: 62.5,
  height: 50,
  originX: 'center',
  originY: 'center',
  fill: "green"
});
icon = iconTriangle;
canvas.add(icon);
//disable icon & hide when hovering over existing icon
canvas.on('mouse:over', function(obj) {
  iconTriangle.set('opacity', 0);
  icon = null;
  canvas.renderAll()
});
//restor icon & unhide
canvas.on('mouse:out', function(obj) {
  iconTriangle.set('opacity', 1);
  icon = iconTriangle;
  canvas.renderAll()
});

canvas.on('mouse:move', function(obj) {
  icon.top = obj.e.y - 80;
  icon.left = obj.e.x - 10;
  canvas.renderAll()
});
canvas.on('mouse:out', function(obj) {
  icon.top = -100;
  icon.left = -100;
  canvas.renderAll()
});
//place icon and count each by type
canvas.on('mouse:up', function(obj) {
  var count = canvas.getObjects().length;
  document.getElementById("greentally").value = count;
  document.getElementById("yellowtally").value = count;
  document.getElementById("redtally").value = count;
  canvas.add(icon.clone());
  canvas.renderAll();
});
//set icon type
function iconSet() {
  if (document.getElementById("green").checked == true) {
    iconTriangle.setFill("green");
    canvas.renderAll();
    canvas.trigger('object:modified', {
      target: iconTriangle
    });

  } else if (document.getElementById("yellow").checked == true) {
    iconTriangle.setFill("yellow");
    canvas.renderAll();
    canvas.trigger('object:modified', {
      target: iconTriangle
    });
  } else if (document.getElementById("red").checked == true) {
    iconTriangle.setFill("red");
    canvas.renderAll();
    canvas.trigger('object:modified', {
      target: iconTriangle
    });
  }
}
canvas {
  border: 1px solid #ccc;
}

.tally {
  position: fixed;
  width: 50px;
  left: 255px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>

<input name="iconType" type="radio" id="green" onclick="iconSet()" />Green &emsp;
<input class="tally" disabled id="greentally" type="text" value="0">
<br>
<input name="iconType" type="radio" id="yellow" onclick="iconSet()" /> Yellow &emsp;
<input class="tally" disabled id="yellowtally" type="text" value="0">
<br>
<input name="iconType" type="radio" id="red" onclick="iconSet()" /> red &emsp;
<input class="tally" disabled id="redtally" type="text" value="0">
<canvas id="c" width="300" height="300"></canvas>


from Fabricjs isolate object count by color

No comments:

Post a Comment