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

您好，您可以在成功函数中使用fabric.util.enlivenObjects()函数而不是canvas.loadFromJSON ，如下所示：

 //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();
            }
        }
    });