Canvas - FabricJS - 从文本边缘分离笔划

Question

我正在尝试使用FabricJS和Canvas来创建带有描边的文本。

我可以在文本中添加笔划，但我想将文本与笔划分开，比如在文本上添加边距，然后在边距外部绘制笔划。

我搜索并搜索并找不到任何内容。

有什么建议吗？

我想知道如果没有办法用当前的库做这个，有没有办法可以利用创建的脚本并设置起点+ x和+ y并在整个时间内完成画在文本周围。

非常感谢任何指导。

canvas = new fabric.Canvas('myc');

var text = new fabric.Text('Test', {
    left: 25,
    top: 25,
    stroke: '#000',
    strokeWidth: 3,
    fill: '#fff',
    fontSize: 75,
    strokeOffset: 5   <--- i need something like this
});
canvas.add(text);

<canvas id="myc"></canvas>

结果看起来像这样......

Answer 1

您无法将笔划与填充分开。 你能做的是：

1）修改fabricjs的文本渲染功能 反转笔划和填充顺序。

2）将文本笔划功能修改为2次： 2a）具有strokeWidth的行程宽度+ strokeOffset，颜色为＆＃34;红色＆＃34; 2b）strokeColor具有strokeWolor的strokeOolor设置（不确定是否可以使用透明覆盖它）

3）填充颜色会产生这种效果。

注意： 也许在XOR模式下使用globalCompositeOperation，你甚至可以使它透明。

Answer 2

canvas = new fabric.Canvas('myc');

var text = new fabric.Text('Test', {
    left: 25,
    top: 25,
    stroke: '#000',
    strokeWidth: 3,
    fill: '#fff',
    fontSize: 75,
    strokeOffset: 5  // <--- i need something like this
});
canvas.add(text);

<canvas id="myc"></canvas>