CODEWITHSUNDEEP
dragkineticjs
hncl
hncl

Reputation: 2295

KineticJS - update drawFunc after an object on another stage has been moved

With the help of a fellow stackoverflow user, I am able to change the position of a two lines and a circle on the stage using the following:

                   var circle2 = new Kinetic.Circle({
                    drawFunc: function(canvas) {
                        var context2 = canvas.getContext();
                        var centerX2 = blueLine2.getPosition().x;
                        centerY2 = greenLine2.getPosition().y;
                        context2.drawImage(gArrow2, -156, -23 + centerY2, 11, 23);
                        context2.drawImage(gArrow2, 156, -23 + centerY2, 11, 23);
                        context2.drawImage(bArrow2, centerX2, 156, 23, 11);
                        context2.drawImage(bArrow2, centerX2, -156, 23, 11);  
                        context2.beginPath();
                        context2.arc(centerX2, centerY2, this.getRadius(), 0, 2 * Math.PI, false);
                        context2.lineWidth = this.getStrokeWidth();
                        context2.strokeStyle = this.getStroke();
                        context2.stroke();
                    },
                    x: cx + gx,
                    y: cy + gy,
                    radius: 70,
                    stroke: '#00ffff',
                    strokeWidth: 3,
                    opacity: 0.5
                });
                layer2.add(circle2);

It works great, now my challenge is if I move a line on a second stage for example the horizontal line, I can also move the horizonal line on the first stage using:

        greenLine2.on('dragend', function (event) {
        var y1 = greenLine2.getPosition().y;
        greenLine3.setPoints([0, 256 + y1, 512, 256 + y1]);
        centerY3 = 256 + y1;
        layer3.draw();
        layer2.draw();
    });

However I can't update the layer to move also the vertical line and the circle. I would appreciate your suggestions, thanks in advance.

Upvotes: 0

Views: 427

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

Lets say that greenLine2 is the one you're moving, and you want greenLine3 to move to the same position on the other stage. I'm going to assume the stages are the same size, but you can change up the code to account for these changes.

 greenLine2.on('dragmove', function (event) {
    var userPos = stage.getUserPosition();  //if this doesnt work the way you need, try a different approach, such as below:
    //var userPos = greenLine.getPosition(); //other possibility
    greenLine3.setPosition(userPos);
    layer3.draw();
    layer2.draw();
 });

and if you want other things to move as well, you can do the same kind of code using .setPosition() with some offset so that the drawing is relative.

Another approach would be to create a group in each stage, and make the group draggable, that way, you can drag all the items in a group at the same time, and synchronously across stages.

Upvotes: 1

Related Questions