对齐组对象中的图像和文本

Question

尝试使用图像和文本对象创建组对象。它有点像图标，后面跟着文字。无法正确对齐对象。我可以手动设置左侧，顶部并调整它们，但文本，字体等可能会在运行时更改。

当字体/文本长度发生变化时，对齐会再次混乱。有没有什么方法可以确保文字始终在图像之后开始（不管文本的长度，字体等等）。

如果没有办法在fabric中构建这样做，是否有解决该问题的解决方法？这里是我尝试的代码和下面的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); 
}); 

这里是一个小提琴：

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