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  
<input class="tally" disabled id="greentally" type="text" value="0">
<br>
<input name="iconType" type="radio" id="yellow" onclick="iconSet()" /> Yellow  
<input class="tally" disabled id="yellowtally" type="text" value="0">
<br>
<input name="iconType" type="radio" id="red" onclick="iconSet()" /> red  
<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