带有 fabricjs 的交互式文本框

Question

我正在使用 fabricjs 文本框。我编写了以下代码来更改文本选项，如字体大小、字体粗细、行高。

我的代码可以工作，但问题是 当我 select 一个文本框对象并更改字体大小或字体粗细或行高时，除非我单击 [=21]，否则它不起作用=] 在文本框外.

但是我想在更改输入字段时更改这些值。我的代码如下：

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

Answer 1

您应该触发对象修改事件，然后触发 renderAll() 函数以确保反映更改。以下是字体大小更改事件所需的示例代码。

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

带有 fabricjs 的交互式文本框

interactive text box with fabricjs

javascript

fabricjs