在Canvas中加载JSON而不清除

时间:2017-01-02 06:06:35

标签: javascript jquery json canvas fabricjs

我想在JSON字符串中添加现有画布中的对象而不清除现有对象。但是,当我单击按钮添加它时,清除我的画布,然后从json字符串添加。 请帮帮我怎么做? 以下是我的尝试

var yourData = '[{"type":"group","originX":"center","originY":"center","left":161.82,"top":76.48,"width":174.38,"height":59.05,"fill":"rgb(0,0,0)","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":"","objects":[{"type":"line","originX":"center","originY":"center","left":0,"top":-0.01,"width":172.38,"height":1,"fill":"transparent","stroke":"transparent","strokeWidth":2,"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":"","x1":75.6300048828125,"y1":75.98500061035156,"x2":248.00997924804687,"y2":75.98500061035156},{"type":"rect","originX":"left","originY":"top","left":-86.19,"top":-30.03,"width":172.38,"height":59.05,"fill":"yellow","stroke":"red","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.3,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","rx":0,"ry":0,"x":0,"y":0}]}]';
var json = '{"objects":' + yourData + '}';

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  fabric.log(o, object);
});

0 个答案:

没有答案