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

Posted 2023-03-24

【中文标题】编辑文本 Fabricjs - IText 格式字母和同时选择 textDecoration

【英文标题】：Editor Text Fabricjs - IText format letters and simultaneous selection textDecoration

【发布时间】：2016-05-05 08:06:20

【问题描述】：

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

【问题讨论】：

感谢分享此代码！我说的是fabricjs和canvas，它看起来很棒，你有什么问题吗？看起来工作正常！谢谢。

【参考方案1】：

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

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

你可以像这样使用它：

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