无法使用 FabricJS 2 为所选字母及其背景着色

Question

嗨，我想用 FabricJS 只为选定的文本及其背景着色。事实上，带有 FabricJS 的文本字母如下：

正如他们的网站演示中所展示的那样。

但我想不出一种方法来重现它。我尝试obj.set("textBackgroundColor", "red")只为所选字母的背景着色，但它始终为整个文本的背景着色。

我试过obj.setColor("red")只给选定的字母上色，但它总是给文本的所有字母上色。这是我的jsfiddle

请问我错在哪里？

提前谢谢了。

Answer 1

使用setSelectionStyles将样式设置为所选文本，样式对象为{textBackgroundColor:value}.

演示

var canvas = this.__canvas = new fabric.Canvas('c');

var itext = new fabric.IText('This is a IText object', {
  left: 100,
  top: 150
});

$('#bg-color').change((e) => {
  let obj = canvas.getActiveObject();
  let $this = $(e.currentTarget);
  obj.setSelectionStyles({textBackgroundColor:$this.val()});
  canvas.renderAll();
});

$('#text-color').change((e) => {
  let obj = canvas.getActiveObject();
  let $this = $(e.currentTarget);
  obj.setSelectionStyles({fill:$this.val()});
  //obj.textBackgroundColor =$this.val();
  canvas.renderAll();
});


canvas.add(itext);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<canvas id="c" width="500" height="400" style="border:1px solid #000"></canvas>

<br>
<div class="controls">
  <p>
    Text color
    <input type="color" id="text-color" data-type="color" />
  </p>
  <p>
    Text background color
    <input type="color" id="bg-color" data-type="color" />
  </p>
</div>