show object positoin

position.js

_transformObject: function(e) {
this.renderAll();
transform.target._renderTransformDetail(transform);
}    


fabric.Object = fabric.util.createClass({});

transformDetailOffset: 30,
showTransformDetails: true,

_renderTransformDetail: function(transform) {
    if (!this.showTransformDetails) {
        return;
    }
    this.setCoords();
    var text = this._getTextForTransform(transform.action),
        ctx = this.canvas.contextContainer;
    ctx.font = "10px Arial";
    var textWidth = ctx.measureText(text).width,
        coords = this._getCoordinatesToRenderTransformDetail(transform.corner, textWidth),
        padding = 1.5,
        textHeight = 8;
    ctx.save();
    ctx.fillStyle = '#ffffff';
    ctx.globalAlpha = 0.5;
    ctx.fillRect(coords.x - padding, coords.y - textHeight - padding, textWidth + 2 * padding, textHeight + 2 * padding + 1);
    ctx.restore();
    ctx.save();
    ctx.fillStyle = "#000000";
    ctx.fillText(text, Math.round(coords.x), Math.round(coords.y));
    ctx.restore();
    },
    _getTextForTransform: function(action) {
    var text = '';
    switch (action) {
        case 'drag':
            var x, y, angle = this.angle,
                corners = this.getCornerPoints(this.getCenterPoint());
            if (angle > 45 && angle < 135) {
                x = corners.bl.x;
                y = corners.bl.y
            } else if (angle > 135 && angle < 225) {
                x = corners.br.x;
                y = corners.br.y
            } else if (angle > 225 && angle < 315) {
                x = corners.tr.x;
                y = corners.tr.y
            } else {
                x = corners.tl.x;
                y = corners.tl.y
            }
            text = Math.round(x) + ", " + Math.round(y);
            break;
        case 'rotate':
            text = Math.round(this.angle) + "°";
            break;
        case 'scaleX':
        case 'scaleY':
        case 'scale':
            text = Math.round(this.width * this.scaleX) + " x " + Math.round(this.height * this.scaleY);
            break;
    }
    return text;
    },
    _getCoordinatesToRenderTransformDetail: function(corner, textWidth) {
    console.info(this.transformDetailOffset)
    var dx, dy, angle = this.angle,
        theta = fabric.util.degreesToRadians(angle),
        textWidthOffset = textWidth / 2,
        textHeight = 8,
        textHeightOffset = textHeight / 2;
    switch (corner) {
        case 'tl':
            dx = (this.oCoords.tl.x) + (this.transformDetailOffset * Math.sin(theta - Math.PI / 4));
            dy = (this.oCoords.tl.y) - (this.transformDetailOffset * Math.cos(theta - Math.PI / 4));
            if (angle >= 0 && angle < 45 || angle > 225) {
                dx -= textWidth;
            }
            break;
        case 'tr':
            dx = (this.oCoords.tr.x) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
            dy = (this.oCoords.tr.y) - (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
            if (angle > 135 && angle < 315) {
                dx -= textWidth;
            }
            break;
        case 'bl':
            dx = (this.oCoords.bl.x) - (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
            dy = (this.oCoords.bl.y) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
            if (angle >= 0 && angle < 135 || angle > 315) {
                dx -= textWidth;
            }
            break;
        case 'br':
            dx = (this.oCoords.br.x) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
            dy = (this.oCoords.br.y) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
            if (angle > 45 && angle < 225) {
                dx -= textWidth;
            }
            break;
        case 'mt':
            dx = (this.oCoords.mtr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
            dy = (this.oCoords.mtr.y) + textHeightOffset - (this.transformDetailOffset * Math.cos(theta));
            break;
        case 'mr':
            dx = (this.oCoords.mr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.cos(theta));
            dy = (this.oCoords.mr.y) + textHeightOffset + (this.transformDetailOffset * Math.sin(theta));
            break;
        case 'mb':
            dx = (this.oCoords.mb.x) - textWidthOffset - ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
            dy = (this.oCoords.mb.y) + textHeightOffset + (this.transformDetailOffset * Math.cos(theta));
            break;
        case 'ml':
            dx = (this.oCoords.ml.x) - textWidthOffset - ((this.transformDetailOffset + textWidthOffset) * Math.cos(theta));
            dy = (this.oCoords.ml.y) + textHeightOffset - (this.transformDetailOffset * Math.sin(theta));
            break;
        case 'mtr':
            dx = (this.oCoords.mtr.x) - textWidthOffset + ((this.transformDetailOffset + textWidthOffset) * Math.sin(theta));
            dy = (this.oCoords.mtr.y) + textHeightOffset - (this.transformDetailOffset * Math.cos(theta));
            break;
        default:
            if (angle > 45 && angle < 135) {
                dx = (this.oCoords.bl.x) - (this.transformDetailOffset * Math.sin(theta + Math.PI / 4)) - textWidth;
                dy = (this.oCoords.bl.y) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
            } else if (angle > 135 && angle < 225) {
                dx = (this.oCoords.br.x) + (this.transformDetailOffset * Math.cos(theta + Math.PI / 4)) - textWidth;
                dy = (this.oCoords.br.y) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4));
            } else if (angle > 225 && angle < 315) {
                dx = (this.oCoords.tr.x) + (this.transformDetailOffset * Math.sin(theta + Math.PI / 4)) - textWidth;
                dy = (this.oCoords.tr.y) - (this.transformDetailOffset * Math.cos(theta + Math.PI / 4));
            } else {
                dx = (this.oCoords.tl.x) + (this.transformDetailOffset * Math.sin(theta - Math.PI / 4)) - textWidth;
                dy = (this.oCoords.tl.y) - (this.transformDetailOffset * Math.cos(theta - Math.PI / 4));
            }
    }
    var cw = this.canvas.width,
        ch = this.canvas.height,
        padding = 3;
    if (dx < 0) {
        dx -= (dx - padding)
    } else if (dx + textWidth > cw) {
        dx -= (dx - cw + textWidth + padding)
    }
    if ((dy - textHeight) < 0) {
        dy -= (dy - textHeight - padding)
    } else if (dy > ch) {
        dy -= (dy - ch + padding)
    }
    return new fabric.Point(dx, dy)
    },

  getCornerPoints: function(center) {
    var angle = this.angle,
        width = this.width * this.scaleX,
        height = this.height * this.scaleY,
        tl, tr, bl, br, x = center.x,
        y = center.y,
        theta = fabric.util.degreesToRadians(angle);
    if (width < 0) {
        width = Math.abs(width);
    }
    var sinTh = Math.sin(theta),
        cosTh = Math.cos(theta),
        _angle = width > 0 ? Math.atan(height / width) : 0,
        _hypotenuse = (width / Math.cos(_angle)) / 2,
        offsetX = Math.cos(_angle + theta) * _hypotenuse,
        offsetY = Math.sin(_angle + theta) * _hypotenuse;
    tl = {
        x: x - offsetX,
        y: y - offsetY
    };
    tr = {
        x: (x - offsetX) + (width * cosTh),
        y: (y - offsetY) + (width * sinTh)
    };
    br = {
        x: x + offsetX,
        y: y + offsetY
    };
    bl = {
        x: (x - offsetX) - (height * sinTh),
        y: (y - offsetY) + (height * cosTh)
    };
    return {
        tl: tl,
        tr: tr,
        bl: bl,
        br: br
    };
},