CODEWITHSUNDEEP
kineticjs
user2594637
user2594637

Reputation: 1

Kinetic.js: move and setWidth of a Group

I am looking for a way to move several shapes (rectangles) together. With mousewheel scrolling, the shapes should change on Size (setWidth) and move to a different x-position. I know that it is not possible to setWidth of layers as the canvas that represents the layer is always the same size as the kinetic stage. Probably it is the same with groups...

I've created a fiddle: jsfiddle.net

I want to fit the shapes with the above calendar grid so their x-position and width have to be set to new values when the user is scrolling with the mouse (line 444):

    else if (eventline.stage.zoomWheel<=8){
      group.setX(sdaynum*cellW/7);
      group.setWidth((edaynum-sdaynum)*cellW/7);

Thanks in advance for your help!

Upvotes: 0

Views: 1162

Answers (1)

markE
markE

Reputation: 105015

That's a lot of code to wade through, so here's a general answer.

Kinetic Groups can be moved and resized...

The Kinetic Group is a container that you can put multiple shapes into.

It is a great way to organize your calendar.

You can drag a Group by simply setting its draggable property to true:

myGroup.setDraggable(true);

You can set the XY position of a Group (which also sets XY for all contained shapes):

myGroup.setX(20);
myGroup.setY(20);

Importantly in your case, you can also enumerate through all the children of the group change the properties of those children:

myGroup.getChildren().each( function(){

    // Make your changes to each child here
    // You could set each child's XY position within the group (relative positioning)
    // You could reset each child's width 

});

Also useful in your case is that you can have multiple groups and move shapes between them:

aSelectedDay.moveTo(myVacationGroup);

anotherSelectedDay.moveTo(myConferenceGroup);

Upvotes: 2

Related Questions