CODEWITHSUNDEEP
canvasfabricjsfont-family
Muhammad Salman Javed
Muhammad Salman Javed

Reputation: 23

Fabricjs textbox fontfamily changes when writing text

I am facing an issue as when I select a text and change font family for that specific selected text in a textbox and then start writing with the selection enabled on the selected text. The textbox is not picking the last changed fontfamily. Use case steps are: 1. insert a text box and write some text like "Fabricjs is a good library". At this point text fontfaily is TimeNewRoman. 2. Now make a selection on a text like select a word library and change its fontfamily to Arial. 3. Now if you start typing on the selection enabled text(library) whose fontfamily is changed is the previous step, the newly type text is not picking up the Arial fontfamily instead it is written in TimeNewRoman.

http://fabricjs.com/test/misc/itext.html

Select a text object Apply style like bold to a selective text and then write some text on the same bold selective text. Its not writing in bold style.

Kindly share a way to handle this issue. Any thoughts on this please share.

Thanks.

Upvotes: 0

Views: 1956

Answers (2)

saleem
saleem

Reputation: 415

you can change style during write by text:change event:

     var lastCharPressed ;
    ie_Canvas.on("text:changed", function (e) {
        if (lastCharPressed == 8) return;

        var isBold = $("#TextEditor_isBold").val().toLowerCase() == "true" ? "bold" : "";
        var isUnderLine = $("#TextEditor_isUnderline").val().toLowerCase() == "true";
        var isItalic = $("#TextEditor_isItalic").val().toLowerCase() == "true" ? "italic" : "";
        var fontF = $("#TextEditor_font").val();
        var fill = $("#TextEditor_color").val();
        var fontSize = $("#TextEditor_fontSize").val();
        var textBackgroundColor = $("#TextEditor_bgcolor").val();

        e.target.selectionStart = e.target.selectionStart - 1;
        e.target.setSelectionStyles({ "fontWeight": isBold, 'underline': isUnderLine, 'fontStyle': isItalic, 'fontFamily': fontF, 'fill': fill, 'fontSize': fontSize, 'textBackgroundColor': textBackgroundColor })
        e.target.selectionStart = e.target.selectionStart + 1;
        ie_Canvas.renderAll();
    });

   $(window).keydown(function (event) {
        lastCharPressed = event.keyCode;

    });

$("#TextEditor_font") => replace line to any value you want

it's work for me

thanks.

Upvotes: 1

Dennis Smolek
Dennis Smolek

Reputation: 8760

So I just tried this out on the kitchen sink as the link you gave doesn't have a font-family dropdown.

  1. Select the word "quux" click bold, click after the "x". Start typing.. Keeps the color/weight just fine..

  2. The fontFamily on the kitchen sink seems to apply to the entire text object, not just the selection

Underneath what is happening is the styles object has styles applied to EACH CHARACTER so if the entire text is fontFamily:'Verdana' and then you change a word to arial each character is given the change of arial.

Something like (word):

styles: {0:{0:{fontFamily:'arial'},1: {fontFamily:'arial'}, 2: {fontFamily:'arial'}, 3:{fontFamily:'arial'}}}

It seems Fabric is smart enough that if you start on a character with an applied style it duplicates it as you type for the next character, but if you have a space afterwards it will default back to the fontFamily on the main object.

I haven't tried switching the fontFamily on a selection as I dont have a way to to test it, if you had a chance to do a fiddle, plunker, etc. I could take a look.

Upvotes: 0

Related Questions