Reputation: 1543
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
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