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

Posted

技术标签:

【中文标题】编辑文本 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
)

【讨论】:

以上是关于编辑文本 Fabricjs - IText 格式字母和同时选择 textDecoration的主要内容,如果未能解决你的问题,请参考以下文章