Question

我试图解决网站中出现的问题。看看这段代码：

var retrievedJSON = workarea["modifiedOptions"];
...
canvasEl = new fabric.Canvas("canvas_" + view[i]["id"]);
                    if (!jQuery.isEmptyObject(retrievedJSON))
                    {
                        for (var work in retrievedJSON)
                        {
                            canvasEl.loadFromJSON(retrievedJSON[work], function() {
                                canvasEl.renderAll();
                                canvasEl.on("object:added", mouseDown);
                            });
                        }
                    }

有一行我认为它试图加载一个json并将其元素放在画布中： canvasEl.loadFromJSON（retrievedJSON [工作]

正在加载的json就是那个：

"{"objects":[{"type":"text","originX":"left","originY":"top","left":14.08,"top":16,"width":160.84,"height":31.2,"fill":"rgb(61, 183, 228)","stroke":"rgb(0, 0, 0)","strokeWidth":0.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","text":"rascunho4","fontSize":"24","fontWeight":"normal","fontFamily":"MetalMacabre","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"center","path":null,"textBackgroundColor":"","useNative":true},{"type":"image","originX":"left","originY":"top","left":14.08,"top":17,"width":200,"height":200,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.76,"scaleY":0.76,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","src":"http://mydomain.com.br/tool/media/image/1454337092.png","filters":[{"type":"Resize"}],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":""}"

正如您所看到的那样，有一个文本和一个图像，但只是将文本加载到画布上。图像不会出现在屏幕上的画布中。为什么会这样？任何的想法？你认为我的json可能有问题吗？

感谢任何帮助。

感谢。

Answer 1

首先，您的JSON不正确。请删除JSON中的前导和尾随双引号。那么JSON就可以了，

请您使用我的JSON尝试此代码，如下所示。

var json ='{“objects”：[{“type”：“path”，“left”：104，“top”：96，“width”：99，“height”：115，“fill”： “＃00274D”， “overlayFill”：空， “中风”：NULL， “strokeWidth”：1， “的scaleX”：1.04 “的scaleY”：1.04， “角度”： - 25.8， “flipX”：假“flipY “：假，” 不透明性 “：1，” 可选择 “：真，” 路径 “：[[” M”，67.39,22.39]，[ “c” 的，2.59，-0.43,5.11,1.44,5.54,4.18] [ “c” 的，0.43,2.66，-1.3,5.26，-3.89,5.69]，[ “c” 的， - 1.8,0.29，-3.6，-0.58，-4.61，-2.02]，[ “L”，44.5， 34.56]，[ “L”，10.87,59.62]，[ “c” 的，17.42，-4.46,26.06，-14.18,27.5，-29.02]，[ “升”， - 10.01，-0.72]，[ “L” ，88.7,51.91]，[ “L”，9.43,21.24]，[ “c” 的， - 3.38，-1.95，-5.9，-5.11，-9.29，-7.06]，[ “c” 的， - 0.29,25.06， -27.14,32.76，-33.77,47.95]，[ “C”，44.42,100.08,26.5,114.77,6.91,82.8]，[ “L”，0,92.45]，[ “L”，1.51，-21.6] [ “L”，19.66,4.68]，[ “升”， - 9.43,3.67]，[ “c” 的，7.49,11.59,17.57,19.87,36.43,16.42]，[ “L”，36.22,36.57]，[ “升”， - 18.65,2.38]，[ “c” 的， - 0.14,2.16，-1.73,4.03，-3.89,4.39]，[ “c” 的， - 2.59,0.43，-5.04，-1.44，-5.54， -4.1]，[ “c” 的， - 0.43，-2.74,1.3，-5.26,3.89，-5.69]，[ “c” 的，1.94，-0.36,3.89,0.65,4.9,2.3]，[ “L”， 17.93，-4.82]，[ “升”， - 1.37，-6.84]，[ “c” 的， - 4.82，-0.79，-8.9 3，-4.75，-9.79，-10.08]，[ “c” 的， - 1.15，-6.62,3.1，-12.89,9.43，-13.97]，[ “c” 的，6.41，-1.01,12.46,3.46,13.54， 10.08]，[ “c” 的，0.86,5.18，-1.58,10.15，-5.69,12.6]，[ “L”，1.87,6.12]，[ “L”，20.74，-2.88]，[ “C”，64.01 ，24.26,65.52,22.75,67.39,22.39]，[ “L”，67.39,22.39]，[ “z” 的]，[ “M”，33.91,5.18]，[ “c” 的， - 3.46,0.58，-5.76 ，3.96，-5.11,7.56]，[ “c” 的，0.58,3.6,3.89,6.05,7.27,5.47]，[ “c” 的，3.46，-0.58,5.76，-3.96,5.18，-7.56]，[” C“，40.61,7.05,37.37,4.61,33.91,5.18]，[”z“]]}]，”背景“：”rgba（0,0,0,0）“}';

canvas.loadFromDatalessJSON（JSON）;

fabric.js中的loadFromJSON函数不加载图像

1 个答案: