Question

Trying to create a group object with an image and a text object. It’s sort of like an icon followed by text. Having trouble aligning the objects properly. I can manually set the left,top and adjust them, but the text, font etc.. may change at run time.

When the font/text length changes the alignment gets messed up again. Is there any way to ensure the text always starts after the image (regardless of the text length, font etc..)

If there is no way built in fabric to do this, is there any workaround to solve the problem? Here’s the code I tried and jsFiddle link below, you can see how the image and text is overlapped. Thanks.

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://i.imgur.com/vews5Vd.jpg', function(img) {
    var img1 = img.scale(1).set({ left: 0, top: 0 });
    var text = new fabric.Text('the_text_sample', {
                fontFamily: 'Arial',
                fontSize:30,
                left:img1.width,
                top:10,

            });
    var group = new fabric.Group([ img1,text ], { left: 200, top: 200 });
    canvas.add(group);
});

http://jsfiddle.net/gCpnz/

Answer 1

You’re close…just be sure to set the text.top property to equal half-image-height + half-text-height. Ditto with text.left.

After the text object is created, the text width/height can be gotten using text.getBoundingRectWidth() and text.getBoundingRectHeight().

So your code becomes:

var scaleFactor=1.0
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('http://i.imgur.com/vews5Vd.jpg', function(img) {
    var img1 = img.scale(scaleFactor).set({ left: 0, top: 0 });
    var text = new fabric.Text('the_text_sample', {
                fontFamily: 'Arial',
                fontSize:30,
            });
            text.set("top",img.height*scaleFactor/2+text.getBoundingRectHeight()/2);
            text.set("left",-img.width*scaleFactor/2+text.getBoundingRectWidth()/2);  

    var group = new fabric.Group([ img1,text ], { left: 200, top: 200 });
    canvas.add(group);
});

Here is a Fiddle:

http://jsfiddle.net/m1erickson/5Wzvg/