面料js從mysql數據庫加載單個對象到畫布

我有一個生活在視頻頂部的畫布。當用戶暫停視頻時，他們可以將canvasjs對象添加到畫布上。當一個對象被添加到畫布時，它將被保存到一個mysql數據庫中的表格中，作爲JSON。面料js從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); 
     }); 
     } 
    } 
    }); 
}

來源

2016-09-02 user16454

我能弄清楚如何加載每個對象。從我的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(); 
      } 
     } 
    });

來源

2016-09-02 20:52:55 user16454

你好canvas.loadFromJSON的fabric.util.enlivenObjects() funtion，像這樣：

//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

希望這有助於良好運氣

來源

2016-09-04 16:53:12

面料js從mysql數據庫加載單個對象到畫布

回答

相關問題