畫布-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的strokeWidth，顏色爲「紅色」 2B）中風strokeOffset的strokeWidth用的backgroundColor（不知道是否可以使用透明覆蓋它）

3）填充顏色會產生這種效果。

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