Выравнивание изображения и текста в групповом объекте

Question

Пытается создать объект группы с изображением и текстовым объектом. Это похоже на значок, за которым следует текст. Неправильное выравнивание объектов. Я могу вручную установить левый, верхний и настроить их, но текст, шрифт и т. Д. Может измениться во время выполнения.

Когда длина шрифта/текста изменяется, выравнивание снова перепутано. Есть ли способ обеспечить, чтобы текст всегда начинался после изображения (независимо от длины текста, шрифта и т. Д.)

Если для этого не существует способа для создания ткани, есть ли способ обхода проблемы? Вот код, который я попробовал, и ссылка jsFiddle ниже, вы можете видеть, как изображение и текст перекрываются. Благодарю.

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

Вы близки ... только не забудьте установить свойство text.top равной половины высоты изображения + половинной высоты текста. Тоже с text.left.

После создается текстовый объект, ширина/высота текста может быть получена с помощью text.getBoundingRectWidth() и text.getBoundingRectHeight().

Так что ваш код становится:

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); 
}); 

Вот Fiddle:

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