Editor Text Fabricjs-IText格式的字母和同时选择的textDecoration [英] Editor Text Fabricjs - IText format letters and simultaneous selection textDecoration

问题描述

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

要使此编辑器成为我的厨房垃圾文本编辑器的基础，我查阅了 fabric js文档关于IText ，并在Jsfiddle中看到了一些孤立的示例.

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

我有两个问题:

• 如何选择字母并仅格式化文本中选择的字母?

• How do I select letters and format only that was selected within the text?

我如何同时选择文本修饰的三个选项:下划线，直行和上划线?

How do I get to select the three options simultaneously the text decoration: underline, line-through and overline?

当前代码:

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

推荐答案

在您的示例中，您使用的是fabric.js 1.5.0

In your an example you're using the version of fabric.js 1.5.0

在fabric.js的最新版本(可能是之前的版本)中，我们提供了用于更改唯一选定文本样式的方法. 此处是此方法的说明

In the last (and probably before) version of fabric.js we have the method for changing styles for the only selected text. Here in the doc is a description of this method

您可以像这样使用它:

canvas.getActiveObject().setSelectionStyles({
  underline: true,
  overline: true
})

这篇关于Editor Text Fabricjs-IText格式的字母和同时选择的textDecoration的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！