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 颜色“红色” 2b) strokeWidth 的strokeOffset 和backgroundColor (不确定是否可以使用透明覆盖)

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

注意： 也许在异或模式下使用 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>