1

我正在尝试在画布中加载对象（对象组），这没有问题。但是，如果我想使用 set 方法向加载的对象添加一些选项，例如 scaleX、scaleY、lockScalingX 等，我会收到错误“Uncaught TypeError: Object Group has no method 'set'”。我不明白为什么，我尝试了几种方法。我的代码如下 -

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]));
}
}

任何人都可以帮助我吗？

4

1 回答 1

4

发生此异常的原因是 var "type" 获取字符串值为 "Group"

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

因此，您使用的“Group”字符串中没有“set”方法：

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

你可以使用这个：

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

这里是JSfiddle

于 2013-06-29T17:50:08.870 回答