FabricJS在文本对象中添加新行

Question

据我所知，不可能在 FabricJS 中向 textBackgroundColor 添加填充（填充存在，但对 textBackgroundColor 没有影响），所以我试图修改文本的外观以给人一种有填充的印象.

我通过在文本对象中的每一行末尾自动添加空格来做到这一点。它并不优雅，但很接近。

但是我遇到了 1 个问题，我的代码变得有点混乱。

现在添加新行（按回车键）无法按预期工作。

光标似乎出现在它应该出现的字符后面，并且必须按两次回车才能进入新行，此时已添加了一个空行。

出了什么问题，我怎样才能让它重回正轨？

我认为要解决空行错误，如果该行包含 1 个或多个字符，则仅添加空格是有意义的，但我无法做到这一点。

这是我的Fiddle

JS

var canvas = new fabric.Canvas('mycanvas');
var activeObject = canvas.getActiveObject(str1);

var objects = canvas.getObjects();
var concatstr = '';
var res;
var str;
var str1;
var abcd;
canvas.on('text:changed', function() {
  var concatstr = '';
  var activeObject = canvas.getActiveObject();
  var txtsa = jQuery.trim(activeObject.text);
  values = txtsa.split('\n');

  jQuery.each(values, function(index, val) {
    jQuery.trim(val);
    concatstr += " " + val + " " + "\\n";
  });
  var temp = concatstr.replace(/  +/g, ' ');
  var final = temp.replace(/\\n/g, "\n");

  activeObject.setText(final);
});

var text1 = new fabric.IText(' Text ', {
  top: 100,
  left: 100,
  textBackgroundColor: '#000',
  fontSize: 30,
  lineHeight: 0.9,
  fill: 'white',
  fontWeight: 'bold',
  textAlign: 'center',
  fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS',
});

canvas.add(text1);
canvas.renderAll();

Answer 1

我认为在文本中添加文本以获得填充不是一个好的解决方案。

即使您的问题是关于添加空格和按键，我也会向您展示另一种将填充添加到背景颜色的方法。

fabric.Object.prototype._renderBackground = function(ctx) {
      if (!this.backgroundColor) {
        return;
      }
      var dim = this._getNonTransformedDimensions();
      ctx.fillStyle = this.backgroundColor;

      ctx.fillRect(
        -dim.x / 2 - 10,
        -dim.y / 2 - 10,
        dim.x + 20,
        dim.y + 20
      );
      // if there is background color no other shadows
      // should be casted
      this._removeShadow(ctx);
    };

var canvas = new fabric.Canvas('mycanvas');
var activeObject = canvas.getActiveObject(str1);

var objects = canvas.getObjects();
var concatstr = '';
var res;
var str;
var str1;
var abcd;

var text1 = new fabric.IText(' Text ', {
  top: 100,
  left: 100,
  backgroundColor: '#000',
  fontSize: 30,
  lineHeight: 0.9,
  fill: 'white',
  fontWeight: 'bold',
  textAlign: 'center',
  fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS',
});

canvas.add(text1);
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script>

<canvas id="mycanvas" width="1000" height="1000"></canvas>

正如您所见，覆盖默认的 backgroundColor 函数非常简单。 虽然很难为库中的每个人添加选项，但原型更​​改可让您轻松获得自定义行为。