Write amount of angle image rotates on fabric js canvas

Question

I am working on a Fabric.js project and i m trying to print amount of rotated angle ....

Using Fabric.js's function getAngle(). I can get angle, but how to print it on screen? ..as an image

There is website printio.ru/classic_tees/new (founder website of fabric.js library)..this is a t-shirt printing website...upload any image by clicking image option and then u can position that image wherever u want and on rotation of that image,amount of angle image rotated will also be printed... Thanks in advance

Answer 1

I know that it is not complete, but at least it's a start. I don't really have the time at the moment, but I would get the center of the object:

( obj.left + obj.width / 2 , obj.top + obj.height / 2 )

And then get the polar coordinates for the hover-tooltip using a vector from the center out towards the rotation handle.

Demo @ JSFiddle

Edit: The following code is updated from my original submission. I added vector logic to translate the text according to the angle of rotation. I kept the original intact in case anyone is interested.

var imgSrc = 'http://placehold.it/500x300/322F37/E9EBFF.png&text=Image';
var showLine = true;

(function () {
    fitToContainer(document.querySelector('canvas#c'));

    var canvas = this.__canvas = new fabric.Canvas('c');
    
    fabric.Object.prototype.transparentCorners = false;

    // Image - An image to rotate.
    fabric.Image.fromURL(imgSrc, function (img) {
        img.scale(0.5).set({
            left: 100,
            top: 100,
            lockScalingX : true,
            lockScalingY : true,
            lockMovementX : true,
            lockMovementY : true
        });
        canvas.add(img).setActiveObject(img);
        img.moveTo(0);
    });
    
    // Line - Shows distance from center of object to text
    var line = new fabric.Line([0, 0, 0, 0], {
        stroke: 'red'
    });
    canvas.add(line);
    line.moveTo(1);
    
    // Text - Shows current rotation
    var text = new fabric.Text('0.00°', {
        top: 30,
        left: 210,
        fontSize : 20,
        fill : '#222',
        evented: false
    });
    canvas.add(text);
    text.moveTo(2);
    
    canvas.on({
        'object:rotating': function(e) {
            handleUpdate(e.target, text, line);
        }
    });
})();

// Canvas setup function
function fitToContainer(canvas) {
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
}

// Vector functions
function v_vector(x, y) {
    return { x : x, y : y }
}
function v_vector2(mag, dir) {
    return v_vector(mag * Math.sin(dir), mag * Math.cos(dir));
}
function v_add(v1, v2) {
    return v_vector(v1.x + v2.x, v1.y + v2.y);
}
function v_scale(v, s) {
    return v_vector(v.x * s, v.y * s);
}
function v_displace(point, angle, distance) {
    return v_add(point, v_vector2(distance, angle));
}

// Fabric.js functions
function getLocation(obj) {
    return v_vector(obj.left,obj.top);
}
function setLocation(obj, dispacement) {
    obj.left = dispacement.x;
    obj.top = dispacement.y;
}
function isImage(obj) {
    return obj['getElement'] && obj.getElement().className === 'canvas-img';
}
function handleUpdate(obj, text, line) {
    if (isImage(obj)) {
        updateAngleText(obj, text, line);
    }
}
function updateAngleText(obj, text, line) {
    var angle = obj.getAngle() % 360;
    
    text.text = angle.toFixed(2) + '°';
    
    var centerPoint = getLocation(obj);
    var antiAngle = -angle * Math.PI / 180;
    var distanceToTop = obj.height * obj.scaleY / 2;
    var textOffset = 80;
    var distance = -1 * (distanceToTop + textOffset);
    var displacement = v_displace(centerPoint, antiAngle, distance);
    
    if (showLine) {
        updateLine(line, centerPoint, displacement);
    }
    
    var textDimensions = v_vector(text.width, text.height);
    var textLocation = v_add(displacement, v_scale(textDimensions, -0.5));    
    setLocation(text, textLocation);
}
function updateLine(line, centerPoint, displacement) {
    line.x1 = centerPoint.x;
    line.y1 = centerPoint.y;
    line.x2 = displacement.x;
    line.y2 = displacement.y;
    
    line.width = Math.abs(line.x1 - line.x2);
    line.height = Math.abs(line.y1 - line.y2);
    line.left = line.x1 < line.x2 ? line.x1 : line.x2;
    line.top = line.y1 < line.y2 ? line.y1 : line.y2;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="800" height="600"></canvas>

Original code

var imgSrc = 'http://placehold.it/500x300/322F37/E9EBFF.png&text=SUV';
    
    function fitToContainer(canvas) {
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }
    
    function isImage(obj) {
        return obj['getElement'] && obj.getElement().className === 'canvas-img';
    }
    
    function updateAngleText(obj, text) {
        var rotHandlePos = obj.oCoords.mt;
        var angle = (obj.getAngle() % 360).toFixed(2);
        text.text = 'Angle: ' + angle + '°';
        text.top = rotHandlePos.y;
        text.left = rotHandlePos.x - text.width / 2;        
    }
    
    (function () {
        fitToContainer(document.querySelector('canvas#c'));
    
        var canvas = this.__canvas = new fabric.Canvas('c');    
        fabric.Object.prototype.transparentCorners = false;
    
        // Image
        fabric.Image.fromURL(imgSrc, function (img) {
            img.scale(0.5).set({
                left: 100,
                top: 100
            });
            canvas.add(img).setActiveObject(img);
            img.moveTo(0);
        });
        
        
        // Text
        var text = new fabric.Text('Angle: 0.00°', {
            top: 50,
            left: 100,
            fontSize : 16,
            fill : '#FFFFFF',
            backgroundColor : '#112244',
            lockRotation : true,
            lockScalingX : true,
            lockScalingY : true,
            lockMovementX : true,
            lockMovementY : true
        });
        canvas.add(text);
        text.moveTo(1);
        
        canvas.on({
            'object:rotating': function(e) {
                var obj = e.target;
                if (isImage(obj)) {
                    updateAngleText(obj, text);
                }
            },
            'object:moving': function(e) {
                var obj = e.target;
                if (isImage(obj)) {
                    updateAngleText(obj, text);
                }
            }
        });
    })();

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="800" height="600"></canvas>

Answer 2

Maybe you could use fabric.Text. You can see an example at http://fabricjs.com/patterns/

ie:

var text = new fabric.Text('Honey,\nI\'m subtle', 
    {
        fontSize: 250,
        left: 50,
        top: 0,
        lineHeight: 1,
        originX: 'left',
        fontFamily: 'Helvetica',
        fontWeight: 'bold'   
    });   

canvas.add(text);

I went ahead and created a fiddle for you: http://jsfiddle.net/johnboker/sfu5w9ng/3/