使用 Fabric JS 在画布上键入文本的问题

Question

我正在尝试使用画布自定义文本和字体。我已经开始，但在提交时我无法使文本、字体或颜色正常工作。

默认值似乎没问题，但一旦更改并提交它就会中断。

我尝试了一个有效的缩减版本，但没有选项。

// Create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

//Remove all objects
canvas.forEachObject(function(o) {
    canvas.fxRemove(o)
});
canvas.remove(text);
canvas.renderAll();

/* ------------------------------------ 
    LOAD FONTS 
------------------------------------ */
// Define an array with all fonts
var fontsOptions = {
    'Pacifico' : 'Pacifico',
    'VT323' : 'VT323',
    'Quicksand' : 'Quicksand',
    'Inconsolata' : 'Inconsolata'
};
var selectedOption = 'VT323';

// Populate the fontFamily select
var select = $("#font-family");

if(select.prop) {
    var options = select.prop('options');
}else{
    var options = select.attr('options');
}
$('option', select).remove();

$.each(fontsOptions, function(val, text) {
    options[options.length] = new Option(text, val);
});
select.val();

/* ------------------------------------ 
    SET DEFAULTS 
------------------------------------ */

// Set the default values - supplied via DB    
var user_firstname = $('#firstname').val();
var user_surname = $('#surname').val();
var user_colours = "#000000";
var user_fonts = $("#font-family").val();
var text_lineHeight = 1;
var text_input = user_firstname + '\r\n' + user_surname;

var text = new fabric.Text(text_input, {
    fontFamily: user_fonts,
    fontSize: 20,
    fill: user_colours,
    //stroke: '#000fff',
    //strokeWidth: 1,
    lineHeight: text_lineHeight,
    textAlign: 'center',
    top: 10,
    left: 10,
    selectable: false,
});

gnerate_image(canvas);

// Apply selected font on change
$( "#font-family" ).change(function() {
    console.log($(this).val());

    var selectedFont = $(this).val();
    if (selectedFont !== 'Times New Roman') {
      loadAndUse(selectedFont);
    } else {
      canvas.getActiveObject().set("fontFamily", selectedFont);
      canvas.requestRenderAll();
    }
});

/* ------------------------------------ 
    SEND DATA 
------------------------------------ */
$("#testForm").submit(function(e) {
    var user_firstname = $('#firstname').val();
    var user_surname = $('#surname').val();
    var user_colours = $('#colours').val();
    var user_fonts = $('#font-family').val();
    var text_input = user_firstname + ' ' + user_surname;

    var textNew = new fabric.Text(text_input, {
      fontFamily: user_fonts,
      fontSize: 20,
      fill: user_colours,
      //stroke: user_colours,
      //strokeWidth: 1,
      lineHeight: text_lineHeight,
      textAlign: 'center',
      top: 10,
      left: 10,
      selectable: false,
    });

    alert('Font: ' + user_fonts + '\r\n' + 'Colour: ' + user_colours + '\r\n' + 'Text: ' + text_input);

    gnerate_image(canvas);

    e.preventDefault();
});


// Generate PNG Image
function gnerate_image(canvas) {
    var dataURL = canvas.toDataURL('png');
    $("img").attr("src", dataURL);
    canvas.remove(text);
    canvas.add(text);
    canvas.getActiveObject(text);
    canvas.renderAll();
}

// Load Selected Fonts
function loadAndUse(font) {
    // alert(font);
    // exit();
    var myfont = new FontFaceObserver(font);

    myfont.load().then(function() {
        console.log(font + ' is available');
        canvas.getActiveObject().set("fontFamily", font);
        canvas.requestRenderAll();
    }).catch(function(e) {
        console.log(e);
        console.log('Font is not available');
    });
}

谁能帮我解决这个问题。

JS Fiddle DEMO

Answer 1

您没有在任何地方使用textNew，也许您可​​以将其作为参数传递给您的方法gnerate_image，如下所示：

    // Generate PNG Image
    function gnerate_image(canvas, newText) {
        var dataURL = canvas.toDataURL('png');
        $("img").attr("src", dataURL);
        canvas.remove(text);
        text = newText;
        canvas.add(text);
        canvas.getActiveObject(text);
        canvas.renderAll();
    }

https://jsfiddle.net/o3aeb8up/1/