3

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

当字体/文本长度发生变化时，对齐会再次混乱。有没有办法确保文本总是在图像之后开始（不管文本长度、字体等）

如果没有内置织物的方法来执行此操作，是否有任何解决方法可以解决问题？这是我试过的代码和下面的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/

4

1 回答 1

4

你已经接近了...只要确保将 text.top 属性设置为等于 half-image-height + half-text-height。与 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/

于 2013-02-09T19:10:44.417 回答