[英]Fabric.js - how to create TextBox without line breaks?
我在Fabric.js文档中搜索了很多属性,如maxLines
、 noWrap
、 splitByWhitespace
等,但它们不存在。 您知道禁用fabric.Textbox
内的文本换行的fabric.Textbox
解决方案吗?
我的代码:
const text = new window.fabric.Textbox('expected single line', {
fontFamily: 'Nunito Sans',
fontWeight: 400,
fontSize: 15,
originX: 'center',
originY: 'center',
});
const border = new window.fabric.Rect({
rx: 10,
ry: 10,
fill: '#999999',
height: text.height + 10,
width: text.width + 100,
originX: 'center',
originY: 'center',
});
const group = new window.fabric.Group([border, text], {
originX: 'left',
originY: 'top',
hasRotatingPoint: false,
height: 42,
width: 200,
top: 167,
left: 50,
});
canvas.add(group);
实际结果演示:
如您所见,每个空白处都有换行符,但我想要一个带空格的单行文本。 有趣的是,如果我用下划线_
替换空格,我会得到一行文本。
演示:
我不知道在Textbox
禁用换行。
但是要获得单行文本,您可以
Textbox
宽度Text
而不是Textview
(请参阅此代码笔)最初在这里找到: https : //stackoverflow.com/a/41335051/1815624
这种排序通过检查fixedWidth
和fixedHeight
的添加值然后在更改文本后检查与新宽度相比的值来完成您想要的...
这不是真正的解决方案,但它可能会帮助您解决问题...
// ADD YOUR CODE HERE var canvas = new fabric.Canvas('c'); var t1 = new fabric.Textbox('MyText', { width: 150, top: 5, left: 5, fontSize: 16, textAlign: 'center', fixedWidth: 150, fixedHeight: 20, }); canvas.on('text:changed', function(opt) { var t1 = opt.target; if (t1.width > t1.fixedWidth) { t1.fontSize *= t1.fixedWidth / (t1.width + 1); t1.width = t1.fixedWidth; } if(t1.height > t1.fixedHeight){ t1.fontSize *= t1.fixedHeight / (t1.height + 1); t1.height = t1.fixedHeight; } canvas.renderAll(); }); canvas.add(t1);
canvas { border: 1px solid #999; }
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> <canvas id="c" width="600" height="600"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.