Question

I switched over to EaselJS after having muleheadedly implemented all mouse and vector related information in the HTML canvas element.

I have gotten used to EaselJS and it is really neat. I especially like the containers and how simple they make drawing embedded shapes. However, I can’t figure out how you, for example, implement a color change of a shape on a mouse over. Anything as simple as a rectangle changing color from red to green.

Am I supposed to remove the shape from its container and create a new shape with the new color?

To complicate matters, if one shape partially occludes another, lets say a square inside a circle, then onMouseOver will not register for the circle when over the square. Is there any way around this.

Cheers

EDIT: here is an example of the vector I use to draw my circle

    var circle=new Shape();
    circle.graphics.beginStroke("rgba(255,0,0,0.75)")
            .setStrokeStyle(lw)
            .drawCircle(w/2,h/2,r)
            .endStroke()
            .beginFill("rgba(255,255,0,0.5)")
            .drawCircle(w/2,h/2,r-lw/2)
            .endFill();
    circle.shadow=new Shadow("rgba(0,0,0,0.5)",10,-10,10)

Is there an easy way to pass a new color to beginFill? Can I use variable there? Does the circle.graphics... get executed only once, or every time there is a call to stage.update()?

Answer 1

You want to change the Shape.graphics.beginFill to a different color on the mouseover.

Here’s an example (warning: sloppy code!)