无法使用 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>

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

Can't color the selected letters and their background with FabricJS 2

fabricjs

fabricjs2