CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
Mokus
Mokus

Reputation: 10400

Animation in KineticJS

I have a circle added to a layer. In the top of the layer I added a text. I would like to run an animation when the mouse is over the circle, but when the mouse reaches the text the mouseout callback function is called. How can I prevent that? 

var circle = new Kinetic.Circle({
    x: j * xcenterstep  + xshift,
    y: i * ycenterstep  + yshift,
    radius: t_radius,
    fill: t_fill,
    stroke: t_stroke,
    strokeWidth: t_stroke_w,
    strokeOpacity: 0.1,
    opacity: 0.3 + t_number * 0.05,                 
});
if (t_number) {
    circle.tw;
    circle.on("mouseover", function () {                    
        this.tw = new Kinetic.Tween({
            node: this,
            duration: 0.3,
            strokeWidth: 6
        });
        this.tw.play();
    });
    circle.on("mouseout", function () {
        this.tw.reverse();
    });
}

// Adding the text 
var radiusText = new Kinetic.Text({
    x : circle.getX(),
    y : circle.getY(),
    text : t_number,
    fontSize : radius,                  
    fill : '#fff',
    fontStyle: 'bold',
    align : 'center'
});
radiusText.setOffset({
    x : radiusText.getWidth()/2,    
    y : radiusText.getHeight()/2
});

bgLayer.add(circle);
bgLayer.add(radiusText);

Upvotes: 1

Views: 40

Answers (2)

lavrton
lavrton

Reputation: 20288

I think it is better to use mouseenter event. You can disable text's events to prevent mouseout from circle.

radiusText.listening(false)

Upvotes: 3

C1pher
C1pher

Reputation: 1972

Reviewing your code, you were missing a } to close the if (t_number) {. I am not sure if it was supposed to encompass the mouseover and mouseout events, but it might have caused your code to respond differently than you are expecting.

Upvotes: 1

Related Questions