Kineticjs text padding interferes with mouseover events

Question

I am trying to tween the color of a Kinetic.Rect when the mouse moves over it. I also have a piece of text defined at the same location. It seems that adding padding to a Kinetic.Text interferes with mouseover events.

I have created a fiddle at http://jsfiddle.net/d5pbK/ I have two padding statements one at line 40 and one at line 45.

The way the fiddle is right now when I move the mouse in the blue rectangle its changes color but if you move the mouse over the horizontal text extents then the rectangle does NOT change color.

Also if you activate any of the padding statements then only when I place the mouse over the orange border, only then does the rectangle change colors.

I would like the rectangle to change colors when the mouse is over it irrespectively of the text.

Answer 1

The Kinetic.Text element takes up the same space as the Kinetic.Rect element when padding is added to the text.

So instead of adding the events to the Kinetic.Rect, add them to the Kinetic.Text

Updated fiddle at: http://jsfiddle.net/MZ57d/