fabricjs how i can make an angle measurement? - fabricjs

Question

i want to use fabricjs for create an Object and can measure some images sections .
Update:
I follow sample of http://fabricjs.com/stickman/ and seems I have something but need to improve more
here is what i have https://jsfiddle.net/mavirroco/gtfw58st/
(function () {
var canvas = this.__canvas = new fabric.Canvas('c', {
selection: false
});
var text1 = new fabric.Text('0 Deg', {
fontSize: 20,
fontFamily: 'Georgia',
top: 10,
left: 100
});
canvas.add(text1);
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
function makeCircle(left, top, line1, line2, line3, line4) {
var c = new fabric.Triangle({
left: left,
top: top,
strokeWidth: 5,
fill: '#fff',
stroke: '#666',
angle: -180,
width: 10,
height: 10
});
c.hasControls = c.hasBorders = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
c.line4 = line4;
return c;
}
function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'red',
stroke: 'red',
strokeWidth: 5,
selectable: false
});
}
var line2 = makeLine([250, 175, 250, 250]),
line3 = makeLine([250, 250, 300, 350]),
line4 = makeLine([250, 250, 200, 350]);
canvas.add(line3, line4);
canvas.add(
makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
makeCircle(line3.get('x2'), line3.get('y2'), line3),
makeCircle(line4.get('x2'), line4.get('y2'), line4));
canvas.on('object:moving', function (e) {
var p = e.target;
p.line1 && p.line1.set({
'x2': p.left,
'y2': p.top
});
p.line2 && p.line2.set({
'x1': p.left,
'y1': p.top
});
p.line3 && p.line3.set({
'x1': p.left,
'y1': p.top
});
p.line4 && p.line4.set({
'x1': p.left,
'y1': p.top
});
canvas.renderAll();
dy = line3.get('y2') - line4.get('y2');
dx = line3.get('x2') - line4.get('x2');
theta = Math.atan2(dy, dx);
theta *= 180 / Math.PI // rads to degs
text1.setText(parseFloat(theta).toFixed(2));
});
})();

Answer 1

y11 = line3.get('y1');
y12 = line3.get('y2');
y21 = line4.get('y1');
y22 = line4.get('y2');
x11 = line3.get('x1');
x12 = line3.get('x2');
x21 = line4.get('x1');
x22 = line4.get('x2');
angle1 = Math.atan2(y11 - y12, x11 - x12);
angle2 = Math.atan2(y21 - y22, x21 - x22);
angle = angle1 - angle2;
angle = angle*180/Math.PI;
if(angle < 0) angle = -angle;
if(360 - angle < angle) angle = 360 - angle;
text1.setText(angle.toString());
https://jsfiddle.net/gtfw58st/5/