javascript - 编辑文本 Fabricjs - IText 格式字母和同时选择 textDecoration

Question

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

为了使这个编辑器成为我作为 kitchensink 文本编辑器的基础，我咨询了 fabric js documentation about IText并在 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 的最后一个(也可能是之前)版本中我们有更改唯一选定文本样式的方法。 Here在文档中是对此方法的描述
你可以像这样使用它:

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