var canvas = new fabric.Canvas('c');
fabric.Canvas.prototype.getItemByName = function(name) {
var object = null,
objects = this.getObjects();
for (var i = 0, len = this.size(); i < len; i++) {
if (objects[i].name && objects[i].name === name) {
object = objects[i];
break;
}
}
return object;
};
var currentColor;
var defaultIcon = {
width: 40,
height: 30,
originX: 'center',
originY: 'center',
hasControls: false,
};
var iconTriangle = new fabric.Triangle(defaultIcon);
setColor('green');
canvas.add(iconTriangle);
canvas.on('mouse:over', function(obj) {
iconTriangle.set('opacity', 0);
canvas.renderAll();
});
canvas.on('mouse:out', function(e) {
if (document.getElementById("on").checked == true) {
if (e.target) {
iconTriangle.set('opacity', 1);
} else {
iconTriangle.left = -100;
iconTriangle.top = -100;
}
canvas.renderAll();
};
});
canvas.on('mouse:move', function(obj) {
iconTriangle.top = obj.e.y - 100;
iconTriangle.left = obj.e.x - 10;
canvas.renderAll();
});
canvas.on('mouse:up', function(e) {
if (e.target) {
return
}
var red = getObjectsBy((obj) => obj.fill === 'red').length;
var green = getObjectsBy((obj) => obj.fill === 'green').length;
var yellow = getObjectsBy((obj) => obj.fill === 'yellow').length;
document.getElementById("greentally").value = green;
document.getElementById("yellowtally").value = yellow;
document.getElementById("redtally").value = red;
addIcon(e.e.x - 10, e.e.y - 100, currentColor);
});
function setColor(color) {
currentColor = color;
iconTriangle.setColor(currentColor);
canvas.renderAll();
}
function getObjectsBy(fn) {
return canvas.getObjects().filter(fn)
}
function addIcon(x, y, color) {
var icon = new fabric.Triangle(defaultIcon);
if (document.getElementById("icon").checked == true) {
icon.setColor(color);
icon.left = x;
icon.top = y;
canvas.add(icon);
} else if (document.getElementById("link").checked == true) {
iconTriangle.set('opacity', 0);
icon = null;
};
canvas.renderAll();
}
$(".switch").click(function() {
if (document.getElementById("green").checked == true) {
setColor('green');
} else if (document.getElementById("yellow").checked == true) {
setColor('yellow');
} else if (document.getElementById("red").checked == true) {
setColor('red');
}
});
document.getElementById("icon").checked = true;
$("input").change(function () {
mode = "draw";
canvas.on('mouse:up', function (o) {
isDown = true;
var icon = canvas.getItemByName('icon');
if (document.getElementById("link").checked == true) {
if (canvas.getActiveObjects().length == 1) {
mode = "draw";
var pointer = canvas.getActiveObject();
var points = [pointer.left, pointer.top, pointer.left, pointer.top];
if (mode == "draw") {
line1 = new fabric.Line(points, {
strokeWidth: 5,
fill: '#39ff14',
stroke: '#39ff14',
originX: 'center',
originY: 'center',
selectable: false,
hasControls: false,
hasBorders: false,
evented: false,
targetFindTolerance: true,
name: 'line1',
});
canvas.add(line1);
line1.sendToBack();
};
canvas.renderAll();
} else {
return;
};
};
});
if (document.getElementById("link").checked == true) {
canvas.on('mouse:move', function (o) {
line1.set('opacity', 0.4);
if (o.target !== null) {
var x2 = o.target.left;
var y2 = o.target.top;
if (mode == "draw") {
line1.set({
x2: x2,
y2: y2
});
canvas.renderAll();
}
} else {
var pointer = canvas.getPointer(o.e);
if (mode == "draw") {
line1.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
}
}
line1.set('opacity', 1);
});
canvas.on('mouse:down', function (e) {
if (document.getElementById("link").checked == true) {
canvas.selection = false;
var line1 = canvas.getItemByName('line1');
var objEl = e.target;
var type = objEl.get('type');
if (type !== 'text') {
canvas.remove(line1);
}
};
});
};
canvas.renderAll();
});
$("input").change(function () {
if (document.getElementById("link").checked == true) {
['object:moving', 'object:scaling'].forEach(addChildMoveLine);
function addChildLine(options) {
if (document.getElementById("link").checked == true) {
canvas.off('object:selected', addChildLine);
var fromObject = canvas.addChild.start;
var toObject = options.target;
var from = fromObject.getCenterPoint();
var to = toObject.getCenterPoint();
var line = new fabric.Line([from.x, from.y, to.x, to.y], {
strokeWidth: 5,
fill: '#39ff14',
stroke: '#39ff14',
originX: 'center',
originY: 'center',
selectable: false,
hasControls: false,
hasBorders: false,
evented: false,
targetFindTolerance: true,
name: 'line',
});
canvas.add(line);
line.sendToBack();
fromObject.addChild = {
from: (fromObject.addChild && fromObject.addChild.from) || [],
to: (fromObject.addChild && fromObject.addChild.to)
}
fromObject.addChild.from.push(line);
toObject.addChild = {
from: (toObject.addChild && toObject.addChild.from),
to: (toObject.addChild && toObject.addChild.to) || []
}
toObject.addChild.to.push(line);
line.addChildRemove = function () {
fromObject.addChild.from.forEach(function (e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
toObject.addChild.to.forEach(function (e, i, arr) {
if (e === line)
arr.splice(i, 1);
});
}
canvas.discardActiveObject();
};
}
function addChildMoveLine(event) {
if (document.getElementById("link").checked == true) {
canvas.on(event, function (options) {
var object = options.target;
var objectCenter = object.getCenterPoint();
if (object.addChild) {
if (object.addChild.from)
object.addChild.from.forEach(function (line) {
line.set({
'x1': objectCenter.x,
'y1': objectCenter.y
});
})
if (object.addChild.to)
object.addChild.to.forEach(function (line) {
line.set({
'x2': objectCenter.x,
'y2': objectCenter.y
});
})
}
canvas.renderAll();
});
};
}
function addChild(o) {
if (document.getElementById("link").checked == true) {
var line = canvas.getItemByName('line');
var objEl = canvas.getActiveObject();
var type = objEl.get('type');
canvas.addChild = {
start: canvas.getActiveObject()
}
canvas.off('object:selected', addChildLine);
canvas.on('object:selected', addChildLine);
};
};
canvas.on('mouse:down', function (e) {
if (document.getElementById("link").checked == true) {
var line = canvas.getItemByName('line');
canvas.selection = false;
if (e.target !== null) {
addChild();
} else {
canvas.discardActiveObject();
}
canvas.on('mouse:over', function () {
canvas.discardActiveObject();
});
canvas.on('mouse:out', function () {
canvas.forEachObject(function (obj) {
if (obj.get('name') !== 'cursor') {
obj.set('opacity', 1);
}
});
});
};
});
};
});
canvas {
border: 1px solid #ccc;
}
.tally {
position: fixed;
width: 50px;
left: 255px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<b>PLACE:</b>
<input class="switch" name="iconOn" type="radio" id="icon" />
<b>ICON</b>
<input class="switch" name="iconOn" type="radio" id="link" />
<b>LINK</b>
<br>
<input class="switch" checked name="iconType" type="radio" id="green" />Green
<input class="tally" disabled id="greentally" type="text" value="0">
<br>
<input class="switch" name="iconType" type="radio" id="yellow" /> Yellow
<input class="tally" disabled id="yellowtally" type="text" value="0">
<br>
<input class="switch" name="iconType" type="radio" id="red" /> red
<input class="tally" disabled id="redtally" type="text" value="0">
<canvas id="c" width="600" height="300"></canvas>