using fabric.js ,increase fontSize of canvas text on button click

萝らか妹 提交于 2021-02-07 18:34:15

问题


i am using fabric.js to work on canvas . i have created text on canvas .now,onclick of button i want to increase font-size .

canvas.set({fontSize,40});

this is not working ? any other method .i have created fiddle please Check

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

回答1:


Here is a working code,

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



回答2:


First of all, I was able to make this work by changing

obj.set('fontSize',40);

to

obj.setFontSize(40);

Second, I think that it is not the fontSize of your object that is changed when you resize it, but its scaleX and scaleY. Hope this helps.



来源:https://stackoverflow.com/questions/18479637/using-fabric-js-increase-fontsize-of-canvas-text-on-button-click

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!