javascript - 在 mousemove kineticJS 上更改半径

Question

我想用我在 Canvas 上使用 KineticJS 生成的形状创建某种 3D 效果。当我将它们拖到顶部时，需要变小，而当拖到底部时，它们需要变大。

我最接近我想要的是你在这里看到的 mousemove 事件

$.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);

});

但这只会在结束拖动并再次单击形状时改变半径。

如果我可以在拖动时“实时”更改它们，那就太好了。

有没有人知道如何解决这个问题？这是我的 JSFiddle http://jsfiddle.net/ZsADd/1/

谢谢!

Answer 1

我想你想要的是bubble.on("dragmove")。 Here is an example of it in action .有关拖动事件的更多信息，请查看我找到的文档 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.