Question

我正在使用fabricjs文本框。我编写了以下代码来更改文本选项，如font-size，font-weight，line-height。

我的代码正在运行，但问题是当我选择文本框对象并更改字体大小或字体粗细或行高时，除非我单击文本框外的画布，否则它不起作用。

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

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的交互式文本框

1 个答案: