Question

I want to create sort of a 3D effect with the shapes I generated with KineticJS on my canvas.
When I drag them to the top, the need to become smaller, and when dragged to the bottom, they need to become bigger.

The closest I got to what I wanted is with the mousemove event you see here

$.each(bubbles, function(){
var bubble = this;
bubble = new Kinetic.Circle({x:this.x, y:this.y, radius:this.r, fill:'#000000', draggable:true});
bubble.on("mousemove",function(){
    bubble.setRadius((bubble.getY()/5));
});
layer.add(bubble);

});

But this only changes the radius when ending dragging and click the shape again.

It would be very nice if I can make it possible to change them “realtime”, when dragging.

Does anyone have any idea how to solve this?
Here’s my JSFiddle http://jsfiddle.net/ZsADd/1/

Thank you!

Answer 1

I think what you want is bubble.on("dragmove"). Here is an example of it in action. For more info on drag events, look into the documentation which I found here.

To detect drag and drop events with KineticJS, we can use the on()
method to detect dragstart , dragmove, or dragend events. The on()
method requires an event type and a function to be executed when the
event occurs.