Setting an object's property afterwards?

Question

I am trying to work with KineticJs, and want to have objects, so I can handle the elements easily.

Here is my code. It won't work and I don't know why. (I don't really know oop, just 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');
});

What I intend to do is to be able to set the fill color of polygons after I have created them, I have to handle a lot of parts of the image so I use objects to make it simple. Can you point out the problems with my code please? I'm soory I know I'm lame, I just need your help.

EDIT: When I add

Left.dark.frame();
Left.dark.fill('red');

after

Left.light.frame();
Left.light.fill('red');

Left.light.frame() becomes red, but Left.dark.frame() does not

You have an extra comma and missing semicolon (*at the end of your code after `fill: function` and before `Left.light.frame();`*), although I do not think that's the problem. — Givi, Dec 01 '13 at 11:59

score 0 · Accepted Answer · answered Dec 01 '13 at 12:05

0

The proble is that I have to add layer to stage after I have filled it!

stage.add(color_layer);

goes to the very bottom

answered Dec 01 '13 at 12:05

godzsa

2,105
4
34
56

score 0 · Answer 2 · answered Dec 02 '13 at 01:28

Your fill function should have either color_layer.draw() or stage.draw() at the end.

Why it worked as mentioned in your edit:

Basically, when you call Left.dark.frame() after the calls to Left.light you are adding another object to layer and also trying to add the layer back to stage, one of those (I'm not sure which one at the moment can look into the source though) is calling the draw() method. My guess is that most likely it is the call to add the layer to stage again, which refreshes your canvas and you see the filled up color for Light polygon.

Setting an object's property afterwards?

2 Answers2