织物js字体重量不起作用答案

【问题标题】：fabric js fontweight not working织物js字体重量不起作用
【发布时间】：2016-04-26 09:55:01
【问题描述】：

我正在使用此代码使用fabric js 在canvas 中添加textbox，

var text = 'Type Text Here';
var textSample = new fabric.Textbox(text, {
    left: getCardLeft() + 100,
    top: getCardTop() + 10,
    width: 200,
    height: 20,
    fontFamily: 'Helvetica',
    fill: getColorPickerForegroundColor(),
    fontWeight: '',
    fontSize: parseInt('25'),
    originX: 'center',
    hasRotatingPoint: true,
    centerTransform: true,
});
canvas.add(textSample);

成功地将textbox 添加到canvas。现在，如果我尝试使用此命令使其 bold

canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();

工作，但是当尝试将其更改为正常时，

canvas.getActiveObject().set("fontWeight", "");
canvas.getActiveObject().set("fontWeight", "100");
canvas.getActiveObject().set("fontWeight", "normal");
canvas.renderAll();

不工作。

我不知道问题出在哪里。我在这里做错了吗？。

它的行为很奇怪你可以看到它here。

先访问here 然后访问here

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

以下代码对我有用。我发现有两点我可能会在你身边失败：

canvas.renderAll();

需要正确重新渲染。还有：

canvas.setActiveObject(textSample);

对我来说是必要的。因为否则：

canvas.getActiveObject();

未定义。现在是一个完整的工作代码示例：

var canvas = new fabric.Canvas('c', { selection: false });
var text = 'Type Text Here';

var textSample = new fabric.Textbox(text, {
  left: 300,
  top: 50,
  width: 200,
  height: 20,
  fontFamily: 'Helvetica',
  fill: "#fac",
  fontWeight: '100',
  fontSize: parseInt('25'),
  originX: 'center',
  hasRotatingPoint: true,
  centerTransform: true,
});

canvas.add(textSample);
canvas.setActiveObject(textSample);
canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();
canvas.getActiveObject().set("fontWeight", "100");
canvas.renderAll();

希望对您有所帮助。

【讨论】：

我已经在我的代码中渲染了。但它的行为很奇怪。见screencast.com/t/HDVH6ckkr
我刚刚编辑了我的问题，请再次参考。可能是你有什么我找不到的错误。谢谢

【解决方案2】：

我只是从here 中取出fabric.js 并替换为我的，然后全部工作。

【讨论】：

替换我当前的 fabric.min.js 后，它仍然不适合我。