面料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数据库加载单个对象到画布

回答

相关问题