无法使用FabricJS 2

Question

嗨，我想用FabricJS仅给选中的文本及其背景上色。实际上，FabricJS的文本字母如下：

在their website demo上显示得很好。

但是我想不出一种再现它的方法。 我尝试使用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>