如何在Fabric.js中为活动文本添加大纲

Question

我使用fabric js在html5中使用了canvas。 我想将轮廓应用于画布上的活动文本。以下代码我写的它工作正常，但问题是当我增加轮廓的厚度然后它重叠在文本上，这意味着文本颜色消失。

activeObject1.stroke = color;
activeObject1.strokeWidth = 5;

还有一件事通过申请我无法申请第二个大纲。 我有一个例子，但它没有使用fabricjs。

http://jsfiddle.net/vNWn6/

Answer 1

Fabric.js首先应用填充，然后是笔触。您需要颠倒顺序才能获得结果。

 original
  _renderText: function(ctx) {
  this._renderTextFill(ctx);
  this._renderTextStroke(ctx);
  }

Before

  modified
   _renderText: function(ctx) {
  this._renderTextStroke(ctx);
  this._renderTextFill(ctx);
  }

After

版本：fabric-1-7-1.js

Answer 2

App_Start/RouteConfig.cs

Answer 3

fabric.Text.prototype.set({
    fill: '#000',
    stroke: '#fff',
    strokeWidth: 4,
    paintFirst: 'stroke', // stroke behind fill
})

自2017-09-17