由于json中的字体样式对象，fabric js粗斜体不起作用答案

【问题标题】：fabric js bold italic not working because of font styles object in json由于json中的字体样式对象，fabric js粗斜体不起作用
【发布时间】：2016-05-19 00:42:46
【问题描述】：

我在织物 js 中面临 1 个典型问题，我正在使用 canvas.toJson 将画布转换为 json 并将其保存到数据库中。后来我使用loadFromJSON将该json加载到画布中，一切正常。

现在的问题是，我有很多层的 json，其中一层是文本框，它有一些字体样式，所以该层的 json 就像，

 {
     "type":"textbox",
     "originX":"center",
     "originY":"top",
     "left":1200.84,
     "top":573.63,
     "width":312.81,
     "height":127.46,
     "fill":"rgb(0, 0, 0)",
     "stroke":null,
     "strokeWidth":1,
     "strokeDashArray":null,
     "strokeLineCap":"butt",
     "strokeLineJoin":"miter",
     "strokeMiterLimit":10,
     "scaleX":1,
     "scaleY":1,
     "angle":0,
     "flipX":false,
     "flipY":false,
     "opacity":1,
     "shadow":null,
     "visible":true,
     "clipTo":null,
     "backgroundColor":"",
     "fillRule":"nonzero",
     "globalCompositeOperation":"source-over",
     "transformMatrix":null,
     "lockMovementX":false,
     "lockMovementY":false,
     "evented":true,
     "overrideSecondary":1,
     "text":"NATURAL\nVENEERS",
     "fontSize":63,
     "fontWeight":"",
     "fontFamily":"'trebuchet ms'",
     "fontStyle":"",
     "lineHeight":0.9,
     "textDecoration":"",
     "textAlign":"left",
     "textBackgroundColor":"",
     "styles":{
        "0":{
           "0":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "1":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "2":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "3":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "4":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "5":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "6":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "7":{
              "fontSize":62.666651
           }
        },
        "1":{
           "0":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "1":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "2":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "3":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "4":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "5":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           },
           "6":{
              "fontSize":62.666651,
              "fontFamily":"'trebuchet ms'",
              "fontWeight":"",
              "fontStyle":""
           }
        }
     },
     "minWidth":20
  },

加载json 后，我正在使用此代码进行粗体和斜体效果。

canvas.getActiveObject().set("fontWeight", "bold");
canvas.renderAll();

哪个有效，但是当我这样做时，

canvas.getActiveObject().set("fontWeight", "");
canvas.getActiveObject().set("fontWeight", "100");
canvas.getActiveObject().set("fontWeight", "normal");

它不会工作。经过一番调查，我可以确定来自 json 的 styles 属性会导致问题，如果我使用此代码从主 json 对象中删除样式，

delete index['styles'];

然后bold、italic 和normal 文本对我有用。看看它在删除之前和之后的表现如何stylesHERE。

对此有什么可能的解决方案？

【问题讨论】：

您没有提供足够的信息来解决问题。对象属性.styles 不是fabric.js API 的一部分，对象类型type : "textBox", 也不是，还有一些没有标准属性。尽管无论如何我都会删除样式，但它完全是多余的信息。不要使用delete，它会影响 Javascript 优化，使用index.styles = undefined; 对结构 JSON 对象进行字符串化。
@Blindman67 我应该向您提供哪些其他信息以解决问题？
信息很好。这实际上是 fabricjs 中的一个错误，应该修复或至少改进。我会尽力照顾它。现在除了每次都“从样式对象中的每个对象的样式中删除 fontWeight”之外，没有其他答案可以给出。我将作为参考发布作为答案。
某些样式对象上缺少克隆函数，这是问题所在。如果新版本仍然受到影响，您应该尝试。考虑到您必须使用新版本创建文本对象，而不仅仅是重新加载它。
@AndreaBogazzi 最新版本的 fabricjs 是什么？

标签： javascript jquery json canvas fabricjs

【解决方案1】：

目前的fabricjs版本存在这个问题。

你可以在每次设置一个新的时删除 fontWeight 属性。

示例：

function cleanFontWeightStyle(obj) {
    if (obj.styles) {
        var style = obj.styles;
        for (rowIndex in style) {
            var row = style[rowIndex];
            for (letterIndex in row) {
                letter = row[letterIndex];
                if (letter.fontWeight && letter.fontWeight=='') {
                    delete letter['fontWeight'];
                }
            }
        }
    }
}

丑。这应该在库本身中修复，不应创建无意义的样式对象。

【讨论】：

好的，让我试试。但是如果我必须在字符串中设置部分字体粗体怎么办？
这将删除未设置的fontWeight或设置为空字符串，如果您将部分设置为粗体，粗体不同于false和''所以它不会删除它，它会保留。给它一个托盘，因为我没有。
删除后如何恢复到原来的对象？
从对象中删除了fontWeight。但仍然是同样的问题。
我检查了您的视频，可能是文本框本身的错误。