fabric.js通过json字符串生成object

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zxw394/article/details/72918416
var canvas = window._canvas = new fabric.Canvas('c');

// json of circle object
var circle1 = {
    type: "circle",
    originX: "center",
    originY: "center",
    left: 100,
    top: 60,
    width: 160,
    height: 160,
    fill: "",
    overlayFill: null,
    stroke: "rgb(0,0,0)",
    strokeWidth: 5,
    strokeDashArray: null,
    scaleX: 1,
    scaleY: 0.7,
    angle: 0,
    flipX: false,
    flipY: false,
    opacity: 1,
    selectable: true,
    hasControls: true,
    hasBorders: true,
    hasRotatingPoint: true,
    transparentCorners: true,
    perPixelTargetFind: false,
    shadow: null,
    visible: true,
    radius: 80,
    XZIndex:60
};

var circle2 = {
    type: "circle",
    XZIndex:80,
    originX: "center",
    originY: "center",
    left: 100,
    top: 140,
    width: 160,
    height: 160,
    fill: "",
    overlayFill: null,
    stroke: "rgb(255,0,0)",
    strokeWidth: 5,
    strokeDashArray: null,
    scaleX: 1,
    scaleY: 0.7,
    angle: 0,
    flipX: false,
    flipY: false,
    opacity: 1,
    selectable: true,
    hasControls: true,
    hasBorders: true,
    hasRotatingPoint: true,
    transparentCorners: true,
    perPixelTargetFind: false,
    shadow: null,
    visible: true,
    radius: 80
};

// var path = {"type":"path","originX":"left","originY":"top","left":0,"top":0,"width":300,"height":300,"fill":"red","stroke":"green","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","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":150,"y":150},"path":[["M",0,0],["L",300,100],["L",200,300],["z"]]}

fabric.util.enlivenObjects([circle1,circle2], function(objects) {
    var origRenderOnAddRemove = canvas.renderOnAddRemove;
    canvas.renderOnAddRemove = false;

    objects.forEach(function(o) {
//     	canvas.moveTo(o, 200);
        canvas.add(o);
    });
    canvas.renderOnAddRemove = origRenderOnAddRemove;
    canvas.renderAll();
});

console.log(JSON.stringify(canvas));

展开阅读全文

复杂的json字符串,怎么生成啊。

11-21

'name': '总公司',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 8rn ,rn 'children': [rn rn 'name': '员工1',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn ,rn rn 'name': '员工2',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 2,rn 'parent_num': 1,rn 'sibling_num': 7rn ,rn 'children': [rn rn 'name': '员工9',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 1rn rn ,rn rn 'name': '员工10',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 2,rn 'parent_num': 1,rn 'sibling_num': 1rn ,rn 'children': [rn rn 'name': '员工11',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 1rn rn ,rn rn 'name': '员工12',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 1rn rn rn ]rn rn ]rn ,rn rn 'name': '员工3',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 2,rn 'parent_num': 1,rn 'sibling_num': 7rn ,rn 'children': [rn rn 'name': '员工13',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 1rn rn ,rn rn 'name': '员工14',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 1rn rn rn ]rn ,rn rn 'name': '员工4',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn ,rn rn 'name': '员工5',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn ,rn rn 'name': '员工6',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn ,rn rn 'name': '员工7',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn ,rn rn 'name': '员工8',rn 'title': '科技公司',rn 'relationship': rn 'children_num': 0,rn 'parent_num': 1,rn 'sibling_num': 7rn rn rn ]rn ;rnrn $('#chart-container').orgchart(rn 'data': datascource,rn 'depth': 2,rn 'nodeTitle': 'name',rn 'nodeContent': 'title'rn );rnrn );rnrn )(jQuery);rnrnrn我要生成这样的json字符串,我自己本来用类写的,写出来感觉太臃肿了,有数据从数据库查出来一个员工list敢问大神们有没有好的方法啊,最好能帮忙写个例子。 论坛

没有更多推荐了,返回首页