作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
尝试创建一个包含图像和文本对象的组对象。它有点像一个图标后跟文本。无法正确对齐对象。我可以手动设置左侧、顶部并调整它们,但文本、字体等可能会在运行时发生变化。
当字体/文本长度发生变化时,对齐会再次变得困惑。有什么方法可以确保文本总是在图像之后开始(不管文本长度、字体等。)
如果内置结构无法执行此操作,是否有任何解决方法来解决该问题?这是我尝试过的代码和下面的 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);
});
最佳答案
您很接近...只需确保将 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 :
关于javascript - 对齐组对象中的图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14789851/
我是一名优秀的程序员,十分优秀!