I am using FabricJS to put SVG objects on Canvas element in the HTML.
But since the FabricJS uses new
keyword to instantiate classes, I think the properties of that class are getting tied to the global
namespace.
Below, is my code for reference
My JSON object that I am parsing
var defaultSceneObj = [
{
"eyes": "res/img/animals/cat/cat_part_eye.svg",
"skin": "res/img/animals/cat/cat_skin.svg",
"mouth": "res/img/animals/cat/cat_part_mouth_happy.svg",
"pos": {
"ground" : "right_back",
"sky" : "none", //other values ["none"]
"relative" : "none" //other values ["none", "top", "bottom"]
}
},
{
"eyes": "res/img/animals/cat/cat_part_eye.svg",
"skin": "res/img/animals/cat/cat_skin.svg",
"mouth": "res/img/animals/cat/cat_part_mouth_happy.svg",
"pos": {
"ground" : "left_back",
"sky" : "none", //other values ["none"]
"relative" : "none" //other values ["none", "top", "bottom"]
}
}
];
Which means there are 2 animals
in my object, where each animal
is composed of eye
, skin
and mouth
svg files.
I am looping through them in my javascript
code to render them
var renderObjOnCanvas = function(cObj, cDim){
// console.log("Object, Dimension:", cObj, cDim);
// var canvas = new fabric.Canvas('elem-frame-svg');
var canvas = this.__canvas = new fabric.Canvas('elem-frame-svg');
imgwidth = 200; //default image width
imgheight = 255; //default image height
imgScale = 0.6;
imgOffsetX = Math.floor(imgwidth*imgScale/2);
imgOffsetY = Math.floor(imgheight*imgScale/2);
canvaswidth = canvas.width;
canvasheight = canvas.height;
// console.log("render canvas dimensions:", canvaswidth, canvasheight);
if (cObj.length > 0){
for (var c =0; c < cObj.length; c++){
var noun = cObj[c]; //assign the noun object
if (noun.skin !== 'Undefined'){
var animalParts = ['skin', 'eyes', 'mouth'];
var pos = cDim.ground[noun.pos.ground];
for (var g = 0; g < animalParts.length; g++){
var part_top = canvasheight - (pos[1] + imgOffsetY);
var part_left = pos[0] - imgOffsetX;
console.log("part:", noun[animalParts[g]], "part_position: ", part_top, part_left);
var img = new fabric.Image.fromURL(noun[animalParts[g]], function(s){
this.top = part_top;
this.left = part_left;
// this.scale(imgScale);
s = this;
console.log("part:", part_top, part_left);
canvas.add();
});
}
}
}
}
};
The first console.log
outputs the correct top
and left
coordinates, but the second one only outputs the last values assigned and hence all my objects are getting placed on the same position in canvas.
Output for the first console.log
:
part: res/img/animals/cat/cat_skin.svg part_position: 282 574 main.js:126
part: res/img/animals/cat/cat_part_eye.svg part_position: 282 574 main.js:126
part: res/img/animals/cat/cat_part_mouth_happy.svg part_position: 282 574 main.js:126
part: res/img/animals/cat/cat_skin.svg part_position: 282 135 main.js:126
part: res/img/animals/cat/cat_part_eye.svg part_position: 282 135 main.js:126
part: res/img/animals/cat/cat_part_mouth_happy.svg part_position: 282 135
Output for the second console.log
:
(6) part: 282 135