kineticjs rebinding objects after redraw

Question

I am working on using KineticJS to allow a user to drag the corners of a box and skew it. Through lots of SO and googling, I have gotten it to the point where the new box is redrawn as you drag one of the corners.

HOWEVER, it can only be done once. After the first drag/stop the corners (which are circles) are no longer draggable or clickable. prior to the first move, a mouseover text of the circles works just fine.

for testing, I made both boxes draggable, and both of them are 'reachable' after the redraw. But I've lost any connection to the circles - can't drag them or anything. Do I have to rebind them to a listener?

can someone point me in the right direction?

here is a link to a jsfiddle: http://jsfiddle.net/robschaefer/5qE64/2/

all the code is posted in the jsfiddle, but here are my dragmove and dragend functions:

            //on drag of corners, redraw line
        layer2.get('Circle').on("dragmove", function(){


            var c1x = c1.getPosition().x;
            var c1y = c1.getPosition().y;
            var c2x = c2.getPosition().x;
            var c2y = c2.getPosition().y;
            var c3x = c3.getPosition().x;
            var c3y = c3.getPosition().y;
            var c4x = c4.getPosition().x;
            var c4y = c4.getPosition().y;


            //draw dotted line
            var dotted = new Kinetic.Line({
                points: [c1x,c1y,c2x,c2y,c3x,c3y,c4x,c4y,c1x,c1y],
                stroke: 'red',
                draggable: true,
                strokeWidth: 3,
            });


            document.getElementById('output').innerHTML = 'WE ARE MOVING!!!';

            layer2.removeChildren();
            layer2.add(dotted);
            layer2.add(c1);
            layer2.add(c2);
            layer2.add(c3);
            layer2.add(c4);
            layer2.draw();


        });

        layer2.get('Circle').on("dragend", function(){

            var c1x = c1.getPosition().x;
            var c1y = c1.getPosition().y;
            var c2x = c2.getPosition().x;
            var c2y = c2.getPosition().y;
            var c3x = c3.getPosition().x;
            var c3y = c3.getPosition().y;
            var c4x = c4.getPosition().x;
            var c4y = c4.getPosition().y;

            document.getElementById('output').innerHTML  = 'drag stopped ' + c1x + ' ' + c1y + ' ' + c2x + ' ' + c2y + ' ' + c3y  + ' ' + c4x + ' ' + c4y;

            layer2.draw();

        });

thanks for any help!

R

you removeChildren within a callback to an object that you remove. — Jonke, Nov 29 '12 at 07:37
so the removeChildren was causing it? even though i re-added the circles to the layer? — rob s, Nov 29 '12 at 16:06

score 0 · Answer 1 · answered Nov 29 '12 at 04:57

for anyone who comes across this, here's how i fixed it:

I put the vertices of the box and the line connecting them on different layers. once I did that, the vertices (circles) where available for mouse actions (mouseover, drag, etc).

still not quite sure why I could access the other shapes in the layer (the redrawn line).....

kineticjs rebinding objects after redraw

1 Answers1