kineticjs - Kinetic.js: move and setWidth of a Group -

i looking way move several shapes (rectangles) together. mousewheel scrolling, shapes should change on size (setwidth) , move different x-position. know not possible setwidth of layers canvas represents layer same size kinetic stage. same groups...

i've created fiddle: jsfiddle.net

i want fit shapes above calendar grid x-position , width have set new values when user scrolling mouse (line 444):

    else if (eventline.stage.zoomwheel<=8){       group.setx(sdaynum*cellw/7);       group.setwidth((edaynum-sdaynum)*cellw/7); 

thanks in advance help!

that's lot of code wade through, here's general answer.

kinetic groups can be moved , resized...

the kinetic group container can put multiple shapes into.

it great way organize calendar.

you can drag group setting draggable property true:

mygroup.setdraggable(true); 

you can set xy position of group (which sets xy contained shapes):

mygroup.setx(20); mygroup.sety(20); 

importantly in case, can enumerate through children of group change properties of children:

mygroup.getchildren().each( function(){      // make changes each child here     // set each child's xy position within group (relative positioning)     // reset each child's width   }); 

also useful in case can have multiple groups , move shapes between them:

aselectedday.moveto(myvacationgroup);  anotherselectedday.moveto(myconferencegroup);