Fabric.js - 如何創建沒有換行符的 TextBox？

Question

我在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);

實際結果演示：

如您所見，每個空白處都有換行符，但我想要一個帶空格的單行文本。 有趣的是，如果我用下划線_替換空格，我會得到一行文本。

演示：

Answer 1

我不知道在Textbox禁用換行。
但是要獲得單行文本，您可以

• 要么設置Textbox寬度
• 或使用Text而不是Textview （請參閱此代碼筆）

Answer 2

最初在這里找到： 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>