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

您好成功功能使用@for (var j = 0; j < Model.Questions[i].Options.Count(); j++) { <div class="form-group"> <div class="form-control"> @Html.HiddenFor(chk => chk.Questions[i].Options[j].OptionId) //CheckboxForMethod @Html.CheckBoxFor(chk => chk.Questions[i].Options[j].Checked, new { @required = "required" }) //Manual method - Name field gets overwritten <input asp-for="@Model.Questions[i].Options[j].Checked" name="@Model.Questions[i].Title" required="required" type="checkbox"> @Html.DisplayFor(chk => chk.Questions[i].Options[j].Title) </div> </div> }功能代替canvas.loadFromJSON功能，如下所示：

fabric.util.enlivenObjects()

希望这会有所帮助，祝你好运

Answer 2

我能够弄清楚如何加载每个对象。转而从我的mysql返回的json不是＆＃34;可行的＆＃34;对于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();
            }
        }
    });

fabric js从mysql数据库加载单个对象到画布

2 个答案: