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

最新推荐文章于 2024-07-30 17:53:07 发布

zxw394

最新推荐文章于 2024-07-30 17:53:07 发布

阅读量1.2k

点赞数

文章标签： javascript fabricjs

本文链接：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));