fabric js fontweight不工作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (83)

我使用此代码添加textboxcanvas使用fabric js

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);

成功添加textboxcanvas。现在,如果我尝试bold使用这个命令

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

工作,但是当试图将其改变为正常时,

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

不工作。

我不知道问题出在哪里。我在这里做错了什么?

提问于
用户回答回答于
用户回答回答于

以下代码适用于我。我看到两点我可以在你身边失败:

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();

扫码关注云+社区

领取腾讯云代金券