CODEWITHSUNDEEP
javascriptfabricjs
sayful
sayful

Reputation: 323

interactive text box with fabricjs

I am working fabricjs textbox. I wrote the following code to change text options like font-size, font-weight, line-height.

My code is working but the problem is When I select a textbox object and change font-size or font weight or line height it does not work unless I click on canvas outside textbox.

But I want to change these value when I make change on input fields. My code are as following:

canvas = new fabric.Canvas('canvas');

// Add Text to Canvas
$('#canvasAddText').on('click', function(){

    var _text       = $('#canvasText').val();
    var _color      = $('#textColor').val();
    var _fontSize   = $('#fontSize').val();
    var _fontWeight = $('#fontWeight').val();
    var _lineHeight = $('#lineHeight').val();

    var TextBox = new fabric.Textbox( _text, { 
        top: 30,
        left: 30,
        width: 200,
        fill: _color,
        fontSize: _fontSize,
        fontWeight: _fontWeight,
        lineHeight: _lineHeight,
        fontFamily: 'Comic Sans',
        textDecoration: 'none',
        textAlign: 'left',
    });
    canvas.add(TextBox);
});

// Change Font Size
$('#fontSize').on('change', function (){
    canvas.getActiveObject().setFontSize($(this).val());
});

// Change Font Weight
$('#fontWeight').on('change', function (){
    canvas.getActiveObject().setFontWeight($(this).val());
});

// Change Line Height
$('#lineHeight').on('change', function (){
    canvas.getActiveObject().setLineHeight($(this).val());
});

Upvotes: 0

Views: 1933

Answers (1)

Ranjana
Ranjana

Reputation: 815

You should trigger object modified event and then renderAll() function to make sure changes reflect. Below is example code which you need to have for on change event of font size.

// Change Font Size
$('#fontSize').on('change', function (){
    canvas.getActiveObject().setFontSize($(this).val());
    canvas.trigger("object:modified",{target: canvas.getActiveObject()});
    canvas.renderAll();
});

Upvotes: 2

Related Questions