javascript - 如何在 Fabric.js 中为活动文本添加轮廓

Question

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

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

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

http://jsfiddle.net/vNWn6/

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

3 回答 3