Question

据我所知，不可能在FabricJS中向textBackgroundColor添加填充（填充存在，但它对textBackgroundColor没有影响），所以我试图破解文本的外观给出有填充的印象

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

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

现在添加新行（点击返回）无法按预期工作。

游标似乎出现在它应该的角色后面，并且必须返回2次才能到达新行，此时已添加空行。

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

我想解决空行错误，如果行包含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

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

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

required

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();

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

FabricJS在文本对象中添加新行

1 个答案: