添加選項fabricjs帆布

，也沒有異議。但是，如果我想用set方法爲加載的對象（如scaleX，scaleY，lockScalingX等）添加一些選項，則會出現一個錯誤「Uncaught TypeError：Object Group has no method'set'」。我無法理解爲什麼，我嘗試了幾種方法。我的代碼如下 -添加選項fabricjs帆布

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

任何人都可以幫助我嗎？

來源

2013-06-29 rafi

的jsfiddle將是巨大的 – Muath

@MoathHowari ---確定---> http://jsfiddle.net/rafi_ccj/ALmQC/1/ – rafi

此異常情況引起了var「類型」獲取字符串值，這是「集團」

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

所以沒有「設置」方法「組」字符串作爲你使用：

.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-29 17:50:08 Muath

非常感謝！我在另一部分代碼中使用了這種解決方案，我應該注意到....再次感謝兄弟........ – rafi

添加選項fabricjs帆布

回答

相關問題