CODEWITHSUNDEEP
kineticjs
Puchacz
Puchacz

Reputation: 2105

kineticjs - shift shapes in groupS

I've got a little problem. My kinetic stage is something like this:

Stage -> layer0 -> group0 -> shapes
          layer1 -> group1 -> shapes
          layer2 -> group2 -> shapes

I need to move group1 and group2 both when group0 event called (dragstart, dragmove etc). I tried to do something like this:

group0.draggable = true;
group0.on('dragstart', function(){
  var a = #save first mouse position point
})
group0.on('dragmove', function(){
  #ref to group1 and group2 is store in group0 and as i debugged in chrome, this object is properly recognize 
  group1.setPosition(my new positions x, y)
  group2.setPosition(...)
})

in other words. I need connected groups from different layers and treat them like they would be in one group with nested 3 others groups. My code doesnt work, is it bug or i forgot about something? How to achieve this? There is no error in console, its just doesnt work, i can shift group0 but group1 and group2 setPosition function doesnt change anything despite they seem to be call properly. Thank you

Upvotes: 0

Views: 128

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

I can only speculate because I don't have your code in front of me.

But the first thing to check is that you are redrawing the layers.

group0.on('dragmove', function(){
    #ref to group1 and group2 is store in group0 and as i debugged in chrome, this object is properly recognize 
    group1.setPosition(my new positions x, y)
    group2.setPosition(...)
    group1.getLayer().draw(); //redraw group1 layer
    group2.getLayer().draw(); //redraw group2 layer
    // stage.draw(); // also a possibility
})

//you can also do transitions, which do redrawing for you.
group1.transitionTo({
    duration: 1, //how long the animation takes in seconds
    x: new position x coord
    y: new position y coord
}); 
//repeat for other groups you want moved

Also, important to note that set position doesn't change the position of the items inside it, so if you had shape1 at 100,100 then it will still report being at 100, 100 after the group is moved, since the position is relative to the container its in.

Upvotes: 2

Related Questions