Fabric js将单个对象从mysql数据库加载到画布

Question

我有一个位于视频顶部的画布。当用户暂停视频时，他们可以将 fabricjs 对象添加到画布上。将对象添加到画布后，它会以 JSON 格式保存到 mysql 数据库中的表中。

当用户单击一个按钮时，它将查询 mysql 数据库中的记录，并通过 ajax 返回数组中每个记录的对象。

当它遍历这个数组时，我希望fabricjs 一次渲染每个对象，直到所有对象都被渲染。

我尝试过使用：

canvas.loadFromJSON(rData, canvas.renderAll.bind(canvas), function(o, object) {
  fabric.log(o, object);
});

它将加载所有对象，但在每次加载之前清除画布，并且只显示最后一个对象。

我已经尝试过这里的示例：

http://codepen.io/Kienz/pen/otyEz 但似乎无法让它为我工作。我也试过http://jsfiddle.net/Kienz/bvmkQ/，但看不出有什么问题。

所以我来找专家了！我感谢所有和任何帮助。谢谢。

这是我在 mysql 中的表，有 2 条记录：

CREATE TABLE IF NOT EXISTS `telestrations` (
  `id_telestration` int(11) NOT NULL AUTO_INCREMENT,
  `object` longtext NOT NULL,
  PRIMARY KEY (`id_telestration`),
  UNIQUE KEY `id_telestration` (`id_telestration`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=65 ;

--
-- Dumping data for table `telestrations`
--

INSERT INTO `telestrations` (`id_telestration`, `object`) VALUES
(63, '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":161.05,"top":359.29,"width":69.3,"height":20.97,"fill":"#e6977e","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","text":"AAAAAA","fontSize":16,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{"0":{"1":{},"2":{},"3":{},"4":{},"5":{}}}}],"background":""}'),
(64, '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":463.68,"top":353.84,"width":69.3,"height":20.97,"fill":"#20f20e","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","text":"BBBBBB","fontSize":16,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{"0":{"1":{},"2":{},"3":{},"4":{},"5":{}}}}],"background":""}');

这是我的 php 文件：

$teles = Telestration::getTeleByVideo();

$objArray = array();
foreach($teles as $tele){
    $obj = $tele->getValueEncoded('object');
    $objArray[] = $obj;
}
echo json_encode($objArray);

这是我的 JavaScript：

document.getElementById("get_json").onclick = function(ev) {    
  $.ajax({
    url: 'getTelestrations.php',
    data: dataString,
    type: 'POST',
    dataType:"json",
    success: function(data){
      for (var i = 0; i < data.length; i++) {
        rData = data[i].replace(/&quot;/g, '\"');
        //Do something
        canvas.loadFromJSON(rData, canvas.renderAll.bind(canvas), function(o, object) {
          fabric.log(o, object);
        }); 
      }
    }
  }); 
}

Answer 1

Hello 在你的 success 函数中使用而不是 canvas.loadFromJSON ，fabric.util.enlivenObjects() 函数，如下所示：

 //inside the success function, you get the results data from the server and loop inside the items, allright if you have only one object but use      loop for more.
   results.data.forEach(function (object) {
       var tmpObject = JSON.parse(object.table_data);

       fabric.util.enlivenObjects([tmpObject], function (objects) {
             var origRenderOnAddRemove = canvas.renderOnAddRemove;
             canvas.renderOnAddRemove = false;
             console.log(objects);
             objects.forEach(function (o) {
                     canvas.add(o);
                     console.log(o);
              });

            canvas.renderOnAddRemove = origRenderOnAddRemove;
            canvas.renderAll();
         });//end enlivenObjects
    });//end data.forEach

希望对你有帮助，祝你好运

Answer 2

我能够弄清楚如何加载每个对象。事实证明，从我的 mysql 返回的 json 对于fabricjs 来说不是“可行的”。我必须清理我的 json，然后才能加载对象。

我只对我的 javascript 进行了更改：

    $.ajax({
        url: 'getTelestrations.php',
        data: dataString,
        type: 'POST',
        dataType:"json",
        success: function(data){
            for (var i = 0; i < data.length; i++) {
                //clean results for json
                json_result = data[i].replace(/&quot;/g, '\"');             //remove quotes from entire result  
                json_clean = json_result.replace(/"objects"/, 'objects');       //remove quotes around first object
                jsonObj = JSON.parse(JSON.stringify(json_clean));               // parse the entire result
                jsonobj2 = eval('(' + jsonObj + ')');
                // Add object to canvas
                var obj = new fabric[fabric.util.string.camelize(fabric.util.string.capitalize(jsonobj2.objects[0].type))].fromObject(jsonobj2.objects[0]); 
                canvas.add(obj); 
                canvas.renderAll();
            }
        }
    });