由於json中的字體樣式對象，fabric js粗體斜體不起作用

Question

我在fabric js中面臨一個典型問題，我使用canvas.toJson將canvas轉換為json並將其保存到數據庫中。 后來我使用loadFromJSON將json加載到畫布中，所有這些都正常工作。

現在問題是，我有json有很多層，一層是textbox，在字體上有一些樣式，所以那層的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文本適合我。 看到它，然后刪除和刪除后如何表現styles HERE 。

這有什么可能的解決方案？

Answer 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'];
                }
            }
        }
    }
}

丑陋。 這應該在庫本身中修復，不應該創建無意義的樣式對象。