CODEWITHSUNDEEP
fabricjsjson
rafi
rafi

Reputation: 1543

Adding options in "group" type object in fabricjs canvas

I am trying to load object (group of objects) in canvas, there is no problem with that. But if I want to add some options to loaded object such as scaleX, scaleY, lockScalingX etc. with set method I get an error "Uncaught TypeError: Object Group has no method 'set'". I cannot understand why, I have tried several ways. My code is below - 

var json = {
"objects": [{
    "type": "group",
        "originX": "center",
        "originY": "center",
        "left": 268,
        "top": 203,
        "width": 428,
        "height": 274,
        "fill": "rgb(0,0,0)",
        "overlayFill": null,
        "stroke": null,
        "strokeWidth": 1,
        "strokeDashArray": null,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "selectable": true,
        "hasControls": true,
        "hasBorders": true,
        "hasRotatingPoint": true,
        "transparentCorners": true,
        "perPixelTargetFind": false,
        "shadow": null,
        "visible": true,
        "objects": [{
        "type": "rect",
            "originX": "center",
            "originY": "center",
            "left": 11,
            "top": 37,
            "width": 200,
            "height": 200,
            "fill": "rgba(179,179,179,0.5)",
            "overlayFill": null,
            "stroke": "#FF0000",
            "strokeWidth": 0.1,
            "strokeDashArray": null,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true,
            "hasControls": false,
            "hasBorders": true,
            "hasRotatingPoint": true,
            "transparentCorners": true,
            "perPixelTargetFind": false,
            "shadow": null,
            "visible": true,
            "rx": 0,
            "ry": 0
    }, {
        "type": "triangle",
            "originX": "center",
            "originY": "center",
            "left": 114,
            "top": -37,
            "width": 200,
            "height": 200,
            "fill": "rgba(179,179,179,0.5)",
            "overlayFill": null,
            "stroke": "#FF0000",
            "strokeWidth": 0.1,
            "strokeDashArray": null,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true,
            "hasControls": false,
            "hasBorders": true,
            "hasRotatingPoint": true,
            "transparentCorners": true,
            "perPixelTargetFind": false,
            "shadow": null,
            "visible": true
    }, {
        "type": "circle",
            "originX": "center",
            "originY": "center",
            "left": -114,
            "top": 29,
            "width": 200,
            "height": 200,
            "fill": "rgba(179,179,179,0.5)",
            "overlayFill": null,
            "stroke": "#FF0000",
            "strokeWidth": 0.1,
            "strokeDashArray": null,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true,
            "hasControls": false,
            "hasBorders": true,
            "hasRotatingPoint": true,
            "transparentCorners": true,
            "perPixelTarge,,tFind": false,
            "shadow": null,
            "visible": true,
            "radius": 100
    }]
}],
    "background": ""
},
objects = json.objects,
canvas = new fabric.Canvas('canvas');

for (var i = 0; i < objects.length; i++) {
var type = fabric.util.string.camelize(fabric.util.string.capitalize(objects[i].type));
type.set({
    scaleX: 1.2,
    scaleY: 1.2,
    lockScalingX: true,
    lockScalingY: true
});
type.setCoords();

if (fabric[type].async) {
    fabric[type].fromObject(objects[i], function (img) {
        canvas.add(img);
    });
} else {
    canvas.add(fabric[type].fromObject(objects[i]));
}
}

Anyone can help me please?

Upvotes: 1

Views: 1713

Answers (1)

Muath
Muath

Reputation: 4417

This exception happens cause the var "type" gets string value which is "Group"

var type = fabric.util.string.camelize(fabric.util.string.capitalize(objects[i].type));

so there is no "set" method in "Group" string as you used:

.set({
scaleX: 1.2,
scaleY: 1.2,})//this is wrong

you can use this :

objects[i].scaleX = 1.2;
objects[i].scaleY = 1.2;
objects[i].lockScalingX = 1.2;
objects[i].lockScalingY = 1.2;

and here the JSfiddle

Upvotes: 4

Related Questions