EaselJS: change shape fill color on mouse click

Question

I'm having an hard time working with EaselJS. Basically I want to create a simple grid and highlight the actual element selected:

var stageWidth = 800,
   stageHeight = 600,
   cell_size = 50,
   w = 16,
   h = 12,
   n = w * h,
   canvas,
   stage,
   background;

$(document).ready(function(){

            canvas = $("#container")[0];     
            stage = new createjs.Stage(canvas);

            var x_pos = 0,
                y_pos = 0,
                res = 0,
                grid_el;

            for(i=0;i<n;i++){

                res = i%w;

                if(i>0){
                    if(res===0){
                        x_pos = 0;
                        y_pos++;
                    } else {
                        x_pos++;
                    }
                }

                grid_el = new createjs.Shape();
                grid_el.graphics.setStrokeStyle(2,"square").beginStroke("#000000");
                grid_el.graphics.beginFill("#70FF85");
                grid_el.graphics.rect(x_pos * cell_size,y_pos * cell_size,cell_size,cell_size);
                grid_el.x_pos = x_pos * cell_size;
                grid_el.y_pos = y_pos * cell_size;
                grid_el.name = "quad";

                stage.addChild(grid_el);
            }

            stage.update();

            stage.onMouseDown = function(e){
                console.log(e);
                var quad = this.getObjectsUnderPoint(e.stageX,e.stageY);

                var clone = quad[0].graphics.clone();
                clone.beginFill("#51D9FF");

                quad[0].graphics = new createjs.Graphics(clone);

                stage.update();
            }

        });         

I tried cloning the actual element graphics property, changing the fill color and then updating the stage, but I only obtain a white element, just like it didn't recognize the new graphics properties.

Thanks for any help.

Answer 1

What I would recommend is using the onMouseOver/onMouseOut calls backs on a the shape or display object that you are creating. When you can update you color that was.

Here is a simple demo that might help illustrate my point.

Link to demo

var stage = new createjs.Stage("test");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);
var padding = 1;
var width = 55;
var height = 55;
var cols = 15;
for(var i=0;i<200;i++) {
    var s = new createjs.Shape();
    s.overColor = "#3281FF"
    s.outColor = "#FF0000"
    s.graphics.beginFill(s.outColor).drawRect(0, 0, width, height).endFill();
    s.x = (width + padding) * (i%cols);
    s.y = (height + padding) * (i/cols|0);
    s.onMouseOver = handleMouseOver;
    s.onMouseOut = handleMouseOut;
    stage.addChild(s)
}

createjs.Ticker.addListener(stage);

function handleMouseOver(event) {
   var target = event.target;
   target.graphics.clear().beginFill(target.overColor).drawRect(0, 0, width, height).endFill();
}

function handleMouseOut(event) {
    var target = event.target;
    target.graphics.clear().beginFill(target.outColor).drawRect(0, 0, width, height).endFill();
}

function tick() {
  stage.update();   
}

Hope this helps.