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

时间:2013-08-16 06:44:57

标签: javascript html5 html5-canvas fabricjs

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

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

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

http://jsfiddle.net/vNWn6/

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

App_Start/RouteConfig.cs

答案 2 :(得分:0)

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

2017-09-17