Editor Text Fabricjs-IText格式的字母和同时选择textDecoration

Question

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

为了使这个编辑器成为厨具文本编辑器的基础，我查阅了关于IText的fabric js文档，并在Jsfiddle中看到了一些孤立的示例。

我有两个问题：

• 如何选择字母并仅设置文本中选择的格式？

• 如何同时选择文本修饰的三个选项：下划线，直通和上划线？

当前代码：

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

Answer 1

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

在最后一个（可能是之前）版本中，fabric.js我们有更改唯一选定文本的样式的方法。文档中对此方法进行了描述

你可以像这样使用它：

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