Javascript 对齐组对象中的图像和文本
尝试使用图像和文本对象创建组对象。它有点像一个图标,后面跟着文字。无法正确对齐对象。我可以手动设置左侧、顶部和调整它们,但不能设置文本、字体等。。可能在运行时更改 当字体/文本长度改变时,对齐方式会再次混乱。是否有办法确保文本始终在图像之后开始(无论文本长度、字体等) 如果内置结构无法做到这一点,是否有解决问题的方法?下面是我尝试的代码和下面的JSFIDLE链接,您可以看到图像和文本是如何重叠的。谢谢Javascript 对齐组对象中的图像和文本,javascript,html,fabricjs,Javascript,Html,Fabricjs,尝试使用图像和文本对象创建组对象。它有点像一个图标,后面跟着文字。无法正确对齐对象。我可以手动设置左侧、顶部和调整它们,但不能设置文本、字体等。。可能在运行时更改 当字体/文本长度改变时,对齐方式会再次混乱。是否有办法确保文本始终在图像之后开始(无论文本长度、字体等) 如果内置结构无法做到这一点,是否有解决问题的方法?下面是我尝试的代码和下面的JSFIDLE链接,您可以看到图像和文本是如何重叠的。谢谢 var canvas = new fabric.Canvas('canvas'); fabri
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);
});
您很接近了……请确保将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);
});
这是一把小提琴:
我的意思是水平对齐,而不是垂直对齐。这样地。问题是,在我当前的代码中,当文本太长时,文本与图像重叠,而当文本太短时,文本与图像之间存在间隙。使用相同的概念:TOP:text.set(“TOP”,-img.height*scaleFactor/2+text.getBoundingRectHeight()/2);--左:text.set(“左”,img.width*scaleFactor/2+text.getBoundingRectWidth()/2);另一把小提琴: