ファブリックjs mysqlデータベースからキャンバスに単一オブジェクトをロード

Question

私はビデオの上に生きるキャンバスを持っています。ユーザーがビデオを一時停止すると、fabricjsオブジェクトをキャンバスに追加できます。オブジェクトがキャンバスに追加されると、JSONとしてmysqlデータベースのテーブルに保存されます。

ユーザがボタンをクリックすると、レコードをmysqlデータベースに照会し、配列内の各レコードのオブジェクトをajax経由で返します。

この配列をループするので、すべてのオブジェクトがレンダリングされるまで、fabricjsは各オブジェクトを1つずつレンダリングします。

私が使用して試してみました：

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/を試しましたが、何が間違っているか見ることはできません。

だから私は専門家に来ました！私はすべての助けに感謝します。ありがとうございました。ここで

は、2つのレコードWTHでのMySQLの私のテーブルです：

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

私はどのように理解することができた各オブジェクトをロードします。それは、私のmysqlから返されたjsonがfabricjsに対して "実行可能"ではなかったことを示しています。私は私のjsonをきれいにしなければならなかった、そして、オブジェクトはロードするでしょう。このようなあなたの成功機能の使用内部

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

Answer 2

こんにちは代わりの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 

希望、良い

は、私は私のjavascriptを変更しました運