如何将大纲添加到Fabric.js中的活动文本答案

【问题标题】：How to add outline to the active text in Fabric.js如何将大纲添加到Fabric.js中的活动文本
【发布时间】：2013-08-18 12:09:56
【问题描述】：

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

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

另外一件事我无法应用第二个大纲。我有一个例子，但它不适用于fabricjs。

http://jsfiddle.net/vNWn6/

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

var active_obj = canvas.getActiveObject();
active_obj.stroke = '#000';
active_obj.strokeWidth = 5;
canvas.renderAll();

【讨论】：