Text Fabricjs Editor - IText format letters and simultaneous selection of textDecoration

https://jsfiddle.net/gislef/Lvfpq57h/

To make this editor, I took the kitchen text editor as a basis, I consulted the construction of the js documentation about IText and saw some isolated examples in Jsfiddle.

I have two questions:

  • How to select letters and format only those that were selected in the text?

  • How can I choose three options for simultaneously formatting text: underline, pass-through and superscript?

Current code:

radios5 = document.getElementsByName("fonttype");  // wijzig naar button
for(var i = 0, max = radios5.length; i < max; i++) {
    radios5[i].onclick = function() {

        if(document.getElementById(this.id).checked == true) {
            if(this.id == "text-cmd-bold") {
                canvas.getActiveObject().set("fontWeight", "bold");
            }
            if(this.id == "text-cmd-italic") {
                canvas.getActiveObject().set("fontStyle", "italic");
            }
            if(this.id == "text-cmd-underline") {
                canvas.getActiveObject().set("textDecoration", "underline");
            }
            if(this.id == "text-cmd-linethrough") {
                canvas.getActiveObject().set("textDecoration", "line-through");
            }
            if(this.id == "text-cmd-overline") {
                canvas.getActiveObject().set("textDecoration", "overline");
            }

        } else {
            if(this.id == "text-cmd-bold") {
                canvas.getActiveObject().set("fontWeight", "");
            }
            if(this.id == "text-cmd-italic") {
                canvas.getActiveObject().set("fontStyle", "");
            }  
            if(this.id == "text-cmd-underline") {
                canvas.getActiveObject().set("textDecoration", "");
            }
            if(this.id == "text-cmd-linethrough") {
                canvas.getActiveObject().set("textDecoration", "");
            }  
            if(this.id == "text-cmd-overline") {
                canvas.getActiveObject().set("textDecoration", "");
            }
        }


        canvas.renderAll();
    }
}
+4
source share

No one has answered this question yet.

Source: https://habr.com/ru/post/1626293/


All Articles