Search code examples
javascripthtmlcanvascreatejseaseljs

EaselJS: Update shape color on property change

I am writing a simple game in JS using EaselJS. I try to keep everything object-oriented to keep in sync state of game, state of EaselJS objects and what is displayed on my canvas. I would like to have possibility to change stroke color of shapes that are displayed on canvas by changing their attributes. I've found in docs append() here, but I can't get it working.

Here's what I've achieved so far:

Shape definition:

var bLetter = new createjs.Shape();
bLetter.graphics.append({exec: setPoweredState});
bLetter.graphics.moveTo(0, 0)
                .lineTo(0, segSize * 2)
                .arc(circSize, segSize * 2, circSize, Math.PI, Math.PI + 0.0001, true);

setPoweredState function - When i set bLetter.powered = true, the line color should change:

setPoweredState = function(ctx, shape) {
    if(shape.powered) {
        shape.color = consts.COLOR_LINE_ACTIVE;
    } else {
        shape.color = consts.COLOR_LINE_INACTIVE;
    }
    shape.graphics.beginStroke(shape.color).setStrokeStyle(consts.STROKE_SIZE, 'round', 'round');

}

When I set bLetter.powered = true and I check bLetter.color it seems that the function is executed - the bLetter.color property changes. However, the bLetter object on canvas is not updated. What's more, it's not drawn at all - probably I am using append() in incorrect way. What am I missing?

BTW: I omit the code with initializing createjs.Stage on canvas and adding bLetter as it's child, I don't think it's an issue, the shape is drawn correctly, only color won't change.

Solution

  • The issue is that you are continually appending new stroke / strokestyle commands to the end of the graphics queue, so they have no effect on the preceding paths.

    The easiest approach in my opinion would be to save off the command as Lanny suggested, and modify its style in your setPoweredState method.

    Here's an example of the above, implement with minimal modifications to your approach: https://jsfiddle.net/u4o4hahw/