Working with KineticJs, I aim to efficiently handle elements by creating objects for easy management.
Below is my code which is not functioning as expected. (I am relatively new to object-oriented programming and still learning)
$(function(){
var stage = new Kinetic.Stage({
container: 'gridalea',
width: 172,
height: 720
});
var color_layer = new Kinetic.Layer();
var sh_layer = new Kinetic.Layer();
var Left={
light: {
frame: function(){
poly = new Kinetic.Polygon({
points: [70, 0, 0, 22, 0, 672, 70, 720, 70, 710, 6, 667, 6, 29, 70, 10, 70, 0],
stroke: 'white',
strokeWidth: 1
});
// add the shape to the layer
color_layer.add(poly);
stage.add(color_layer);
},
fill: function(color){
poly.setFill(color);
}
},
dark: {
frame: function(){
var poly = new Kinetic.Polygon({
points: [6, 193, 6, 667, 11, 663, 11, 440, 6, 437, 6, 427, 11, 425, 11, 193, 6, 193],
stroke: 'white',
strokeWidth: 1
});
// add the shape to the layer
color_layer.add(poly);
stage.add(color_layer);
},
fill: function(color){
poly.setFill(color);
}
},
}
Left.light.frame();
Left.light.fill('red');
});
My objective is to change the fill color of polygons after creation using objects for simplification. Could you possibly identify any issues in my code? Your guidance would be greatly appreciated.
EDIT: Upon adding
Left.dark.frame();
Left.dark.fill('red');
after
Left.light.frame();
Left.light.fill('red');
the fill color changes for Left.light.frame() but not for Left.dark.frame()