使用 fabric.js，在按钮点击时增加画布文本的字体大小

Question

我正在使用fabric.js在画布上工作。我已经在画布上创建了文本。现在，当我点击按钮时，我想增加字体大小。

canvas.set({fontSize,40});

这个方法不起作用了吗？还有其他的方法吗？我已经创建了一个fiddle，请查看

   var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
    left: 100,
    top: 100,
    fill: 'navy'
});

canvas.add(text);

document.getElementById('textinput').addEventListener('change', function (e) {
    var obj = canvas.getActiveObject();

    if (!obj) return;

    obj.setText(e.target.value);
    canvas.renderAll();
});

document.getElementById('btn').addEventListener('click', function (e) {
    var obj = canvas.getActiveObject();

   alert('button clicked');
     if (!obj) return;

    obj.set(fontSize,40);
    canvas.renderAll();
});

- anam

---

将其更改为字体大小。 - Prasanna Aarthi

obj.set(fontSize,40) 没有被执行，程序在此之前停止了。 - Prasanna Aarthi

Answer 1

这里是一个可用的代码，

var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.Text('Sample', {
  left: 100,
  top: 100,
  fontSize: 80,
  fill: 'navy'
});

canvas.add(text);
document
  .getElementById('btn')
  .addEventListener('click', function (e) {
    canvas.getActiveObject().set("fontSize", "30");
    canvas.renderAll();   
  });

- Prasanna Aarthi

Answer 2

首先，我通过更改某些内容使其正常工作。

obj.set('fontSize',40);

为了

obj.setFontSize(40);

其次，我认为当您调整大小时，对象的scaleX和scaleY发生了变化，而不是它的字体大小fontSize。希望这能有所帮助。

- Stav Geffen

---

我正在使用 Fabric 4.3.0，但第二个选项对我无效。 - Wayne Smallman