对齐组对象中的图像和文本
Aligning Image and Text in a Group Object
尝试创建一个包含图像和文本对象的组对象。这有点像一个图标后面跟着文字。无法正确对齐对象。我可以手动设置左侧、顶部和调整它们,但文本、字体等可能会在运行时更改。
当字体/文本长度发生变化时,对齐方式会再次混乱。是否有任何方法可以确保文本始终在图像之后开始(无论文本长度、字体等)
如果没有内置结构可以做到这一点,有没有解决问题的方法?这是我尝试过的代码和下面的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/
你很接近。。。只需确保将text.top属性设置为等于一半图像高度+一半文本高度。同上,带文本左
创建文本对象后,可以使用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/
相关文章:
- 将HTML表格导出到带有文本和图像的excel中
- 可单击滚动图像以显示文本框
- 正确输入的文本会更改图像
- 无法将包含文本和图像的SVG保存到画布
- 如何知道锚在文本或图像上
- 自动缩放图像以匹配文本高度
- 一个javascript实现base64图像编码并将结果写入文本文件
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- jQuery对请求图像的外部文本进行查询
- 如何检测移动浏览器(PHP/Javascript),然后进行图像/文本更改
- ASP.NET网页-使用脚本显示由预定义日期和时间指定的图像/文本
- 合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应
- 使用javascript在html中制作一个随机的图像/文本/url元素
- 将彩色带置于图像/标签+图像/文本对齐方式之上->JavaScript Titanium移动应用程序
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页
- 脚本标记中的Paperclip图像集显示的是图像文本url,而不是图像-expandablebanners.js
- 图像文本上的代码后面
- 电子邮件中包含图像/文本/插图的HTML滑块
- 如何从不同的媒体子集创建视频,如图像/文本等