konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.59k stars 926 forks source link

Getting collisions inside dragBoundFunc isn't working #163

Closed iandanforth closed 8 years ago

iandanforth commented 8 years ago

I'm trying to prevent a circle from being dragged over rectangles. I have a layer named dynamicLayer which contains both a circle and a rectangle. I had thought to implement a collision check in dragBoundFunc, however after the circle has been dragged more than 2 pixels, all I get back is 'null'.

Digging into this a bit https://github.com/konvajs/konva/blob/master/src/Layer.js#L140 starts returning all zero's after the 2nd or third call, but only in the context of dragBoundFunc.


        var circle = new Konva.Circle({
            x: 50,
          y: 50,
          radius: 20,
          fill: 'blue',
          stroke: 'black',
          strokeWidth: 4,
          draggable: true,
          dragBoundFunc: function(pos) {
            var collision = dynamicLayer.getIntersection(pos, 'Rect');
            return pos;
          }
        });

Fiddle: https://jsfiddle.net/eL6vcm5f/1/ (see console output)

lavrton commented 8 years ago

For performance reasons hit graph for a layer will be disabled while drag&drop. I suggest to move dragging shape into another layer. https://jsfiddle.net/eL6vcm5f/2/

iandanforth commented 8 years ago

Thank you for the quick response and fiddle! This is very helpful.

It might also be useful to add a note about this optimization into one of the drag and drop example sections. For reference I was using http://konvajs.github.io/docs/drag_and_drop/Complex_Drag_and_Drop.html and http://konvajs.github.io/docs/sandbox/Physics_Simulator.html during my exploration.