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